/* ===== BEGIN style.css ===== */
    /* ============================================================
   SKILLAK DESIGN SYSTEM - v4 Clean
   ============================================================ */
    :root {
      --ink: #111827;
  --teal: #0d6e75;
  --teal2: #0a575d;
  --teal3: #e6f4f5;
  --teal4: #b2dfe2;
  --amber: #f59e0b;
  --amber2: #fbbf24;
  --amber3: #fef3c7;
  --cream: #f7f4ef;
  --cream2: #eee8dc;
  --cream3: #e5ddd0;
  --white: #fff;
  --border: #ddd6c8;
  --muted: #5a6474;
  --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: clamp(16px,3vw,24px);
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
      transition: background .2s, transform .2s;
    }

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

    .stepn {
      font-family: 'Fraunces', serif;
      font-size: clamp(2rem,5vw,2.6rem);
      font-weight: 900;
      color: rgba(245,158,11,.25);
      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: #f59e0b;
    }

    .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;
}

/* ===== END style.css ===== */

/* ===== BEGIN style_patch.css ===== */
/* ═════════════════════════════════════════════════════════════
   style_patch.css — Skillak v3.0
   احترافي · متجاوب · داكن/فاتح
   ═════════════════════════════════════════════════════════════ */

/* ─── SESSION WAITING ROOM ─── */
.waitov {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0a0a1a 0%, #0d1a2e 50%, #0a1a14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  overflow-y: auto;
  padding: 20px;
}

.swr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  padding: 10px 0 20px;
}

.swr-logo {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.swr-logo span { color: var(--amber, #f59e0b); }

.swr-av { position: relative; }
.swr-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.2);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
.swr-initials {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  border: 3px solid rgba(255,255,255,.2);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

.swr-name {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  font-family: 'Fraunces', serif;
  margin: 0;
}

.swr-role {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  margin: 0;
}

.swr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 4px 0;
}

.swr-cell {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.swr-ic { font-size: 1.25rem; }
.swr-val {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Fraunces', serif;
}
.swr-lbl {
  font-size: .66rem;
  color: rgba(255,255,255,.45);
}

.swr-note {
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  width: 100%;
  text-align: start;
  line-height: 1.6;
}

.swr-status {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.07);
  border-radius: 50px;
  padding: 10px 18px;
  font-size: .84rem;
  color: rgba(255,255,255,.7);
}
.swr-spin {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--teal, #0d6e75);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}

.swr-tip {
  font-size: .74rem;
  color: rgba(255,255,255,.35);
  margin: 0;
}

/* ─── SESSION BAR ENHANCEMENTS ─── */
.sesbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  background: linear-gradient(90deg, #0a0a1a, #0d1a2e);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
}

.ses-countdown {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.07);
  border-radius: 50px;
  padding: 4px 12px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.1);
  transition: all .3s;
}
.ses-countdown.warning {
  color: var(--amber, #f59e0b);
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.3);
  animation: pulse-warn 1.5s ease-in-out infinite;
}
.ses-countdown.expired {
  color: #ef4444;
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
}
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

/* ─── SESSION CONTROLS — professional ─── */
.sesctrls {
  background: linear-gradient(180deg, #0d0d1f, #111827);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  flex-wrap: wrap;
}

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

.cbtn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s cubic-bezier(.25,.46,.45,.94);
  outline: none;
  position: relative;
}
.cbtn:active { transform: scale(.9); }

.cbtn.on {
  background: rgba(255,255,255,.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.cbtn.on:hover { background: rgba(255,255,255,.18); }

.cbtn.off {
  background: rgba(239,68,68,.18);
  box-shadow: 0 0 0 2px rgba(239,68,68,.4);
}

.cbtn.scron {
  background: rgba(245,158,11,.2);
  box-shadow: 0 0 0 2px rgba(245,158,11,.5);
  animation: pulse-scr 2s ease-in-out infinite;
}
@keyframes pulse-scr {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245,158,11,.5); }
  50% { box-shadow: 0 0 0 5px rgba(245,158,11,.15); }
}

.cbtn.end {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 15px rgba(220,38,38,.4);
  width: 56px; height: 56px;
}
.cbtn.end:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 20px rgba(220,38,38,.6);
}

.cbtn.chattog { background: rgba(13,110,117,.2); }
.cbtn.chattog.unread {
  background: rgba(13,110,117,.35);
  box-shadow: 0 0 0 3px var(--teal, #0d6e75);
}

.clbl {
  font-size: .58rem;
  color: rgba(255,255,255,.45);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .cbtn { width: 44px; height: 44px; font-size: 1.15rem; }
  .cbtn.end { width: 48px; height: 48px; }
  .sesctrls { gap: 4px; padding: 8px; }
}

/* ─── ENTER SESSION BUTTON ─── */
.btn-enter-session {
  background: linear-gradient(135deg, #0d6e75, #14b8a6) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(13,110,117,.35);
  animation: pulse-enter 2.5s ease-in-out infinite;
}
@keyframes pulse-enter {
  0%, 100% { box-shadow: 0 2px 10px rgba(13,110,117,.35); }
  50% { box-shadow: 0 2px 18px rgba(13,110,117,.55); }
}

.btn-end-dash {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.btn-chat-xs {
  background: var(--wa-green, #25d366) !important;
  color: #fff !important;
}

.btn-cancel-xs {
  background: transparent !important;
  color: var(--red, #ef4444) !important;
  border: 1.5px solid var(--red, #ef4444) !important;
  border-radius: var(--rxs, 8px) !important;
}

.bkcard-active {
  border: 1.5px solid rgba(13,110,117,.4) !important;
  background: linear-gradient(135deg, rgba(13,110,117,.04), transparent) !important;
}

.tr-active td { background: rgba(13,110,117,.03); }

/* ─── DUAL DASHBOARD ─── */
.dual-block {
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 16px;
  color: #fff;
}

.student-block {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  box-shadow: 0 6px 24px rgba(59,130,246,.22);
}

.teacher-block {
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
  box-shadow: 0 6px 24px rgba(5,150,105,.22);
}

.dual-block-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.dual-block-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.dual-block-title {
  font-weight: 900;
  font-size: 1.05rem;
}

.dual-block-sub {
  font-size: .73rem;
  opacity: .65;
  margin-top: 2px;
}

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

@media (max-width: 540px) {
  .dual-stats { grid-template-columns: repeat(2, 1fr); }
  .dual-block { padding: 16px; }
}

.ds-item {
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.ds-val {
  font-size: 1.55rem;
  font-weight: 900;
  font-family: 'Fraunces', serif;
  line-height: 1;
}
.ds-val small { font-size: .65rem; font-weight: 600; opacity: .7; }

.ds-lbl {
  font-size: .65rem;
  opacity: .7;
  margin-top: 5px;
}

.dual-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: .82rem;
  margin-top: 4px;
}

.dual-teacher-info {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 4px;
}

.dti-badge {
  background: rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 700;
}

.dti-badge.badge-warn {
  background: rgba(245,158,11,.25);
}

.dti-btn {
  margin-right: auto;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

/* ─── ADMIN — platform profit hidden from non-admin ─── */
[data-admin-only] { display: none !important; }
body.is-admin [data-admin-only] { display: revert !important; }

/* ─── CROP MODAL FIX ─── */
.crop-modal { max-width: 820px !important; }

#cropResultPreview {
  opacity: 0;
  transition: opacity .3s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#cropResultPreview[src] { opacity: 1; }

/* ─── BOOKING MODAL — fee row visibility ─── */
.pline:has(#bkTutorFee),
.pline:has(#bkFee) {
  display: none;
}
body.is-admin .pline:has(#bkTutorFee),
body.is-admin .pline:has(#bkFee) {
  display: flex;
}

/* ─── SESSION CHAT ─── */
.seschat {
  background: #1a1a2e;
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  width: 300px;
  min-width: 260px;
}

@media (max-width: 640px) {
  .seschat {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 30;
    border: none;
  }
}

.seschathdr {
  background: rgba(255,255,255,.04);
  padding: 12px 16px;
  font-size: .86rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sesmsgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sesmb {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: .83rem;
  line-height: 1.55;
  word-break: break-word;
}
.sesmb.mine {
  background: var(--teal, #0d6e75);
  color: #fff;
  align-self: flex-end;
  border-bottom-left-radius: 4px;
}
.sesmb.theirs {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  align-self: flex-start;
  border-bottom-right-radius: 4px;
}

.sesmeta {
  font-size: .65rem;
  opacity: .55;
  margin-top: 3px;
  text-align: end;
}

.sesinp {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.2);
}

.sesinp input {
  flex: 1;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: .84rem;
}
.sesinp input::placeholder { color: rgba(255,255,255,.3) !important; }

/* ─── RESPONSIVE SESSION LAYOUT ─── */
.sesmain {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

#remWrap {
  flex: 1;
  position: relative;
  background: #0a0a1a;
  overflow: hidden;
}

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

#locWrap {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 140px;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  z-index: 15;
  background: #1a1a2e;
  cursor: move;
}

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

@media (max-width: 480px) {
  #locWrap { width: 100px; bottom: 8px; right: 8px; }
}

/* ─── ADMIN ROWS ─── */
.adm-chat-btn {
  white-space: nowrap;
}

/* ─── active pill ─── */
.pill.active-pill {
  animation: pulse-active 1.8s ease-in-out infinite;
  background: rgba(16,185,129,.15);
  color: #059669;
  border: 1px solid rgba(16,185,129,.3);
}
@keyframes pulse-active {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* ─── GENERAL RESPONSIVENESS ─── */
@media (max-width: 768px) {
  .dashlay { grid-template-columns: 1fr !important; }
  .swr-grid { grid-template-columns: 1fr 1fr; }

  .sesctrls {
    justify-content: center;
    gap: 8px;
  }

  /* Hide text labels on small screens to save space */
  .clbl { display: none; }
}

@media (max-width: 380px) {
  .cbtn { width: 40px; height: 40px; font-size: 1rem; }
}

/* ─── SCROLL TO REVIEW — smooth ─── */
#revMod .modal {
  animation: slideUp .35s cubic-bezier(.25,.46,.45,.94);
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ─── Star rating accessible ─── */
.sbtn {
  font-size: 2rem;
  color: #d1d5db;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .15s, transform .15s;
  line-height: 1;
}
.sbtn:hover,
.sbtn.lit { color: var(--amber, #f59e0b); }
.sbtn:hover { transform: scale(1.2); }


/* ─── UX / Responsive improvements ─── */
#endBtn,
#endBtn ~ .clbl,
.cwrap:has(#endBtn) {
  display: none !important;
}

.pwa-early-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(10,10,26,.98), rgba(13,110,117,.95));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
  z-index: 10000;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pwa-early-banner.pwa-banner-soft {
  box-shadow: 0 18px 52px rgba(0,0,0,.42);
}
.pwa-banner-later {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .navbar {
    padding: 0 16px;
    gap: 10px;
  }
  .nl {
    display: none;
  }
  .hero {
    min-height: auto;
    padding: 28px 16px 40px;
  }
  .hero-grid,
  .footgrid,
  .fr,
  .dual-stats,
  .swr-grid {
    grid-template-columns: 1fr !important;
  }
  .card,
  .cb,
  .ch {
    border-radius: 18px;
  }
  .cb {
    padding: 18px;
  }
  .ch {
    padding: 14px 18px;
  }
  .pwa-early-banner {
    width: calc(100vw - 16px);
    bottom: 8px;
    border-radius: 18px;
    padding: 12px;
    flex-wrap: wrap;
  }
  .pwa-banner-text {
    min-width: 0;
    flex: 1 1 100%;
  }
  .pwa-banner-btn,
  .pwa-banner-later {
    flex: 1 1 160px;
  }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .navbar { height: 60px; }
  .logo { font-size: 1.25rem; }
  .btn { padding: 10px 14px; }
  .btn-sm { padding: 8px 12px; }
  .swr-inner { max-width: 100%; }
  .swr-name { font-size: 1.15rem; }
  .sesbar { padding: 0 10px; }
  .sesctrls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .cwrap { min-width: 0; }
  .pwa-banner-icon { width: 34px; height: 34px; }
  .pwa-banner-title { font-size: .95rem; }
  .pwa-banner-sub { font-size: .74rem; }
}

@media (max-width: 480px) {
  .pwa-early-banner {
    align-items: flex-start;
  }
  .pwa-banner-btn,
  .pwa-banner-later {
    width: 100%;
  }
}


/* ─── Support chat image card ─── */
.support-photo-card .cb {
  padding: 20px;
}
.support-photo-grid {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: 18px;
  align-items: start;
}
.support-photo-visual {
  position: relative;
  width: 144px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #f8fbff, #fff7ec);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.support-photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.support-photo-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: rgba(17,24,39,.82);
  color: #fff;
  backdrop-filter: blur(8px);
}
.support-photo-copy {
  min-width: 0;
}
.support-photo-title {
  font-size: .98rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--ink);
}
.support-photo-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 14px;
}
.support-photo-actions {
  display: grid;
  gap: 12px;
}
.support-photo-field {
  margin-bottom: 0;
}
.support-photo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.support-photo-msg {
  margin-top: 10px;
}
@media (max-width: 720px) {
  .support-photo-grid {
    grid-template-columns: 1fr;
  }
  .support-photo-visual {
    width: 100%;
    max-width: 220px;
    justify-self: center;
  }
  .support-photo-buttons {
    flex-direction: column;
  }
  .support-photo-buttons .btn {
    width: 100%;
  }
}

/* ===== END style_patch.css ===== */

/* ===== BEGIN style_brand.css ===== */
/* ═══════════════════════════════════════════════════════════════════════
   SKILLAK — Brand Theme v1.0
   هوية الألوان: أزرق + برتقالي — مطابق لشعار المنصة
   يُحمَّل آخر ملف CSS ليطغى على كل الأنماط السابقة
   ════════════════════════════════════════════════════════════════════════ */

/* ══ 1. متغيرات الألوان الجديدة ══ */
:root {
  /* ── الأزرق الرئيسي (يحل محل teal) ── */
  --teal:  #1565c0;
  --teal2: #0d47a1;
  --teal3: #e3f2fd;
  --teal4: #90caf9;

  /* ── البرتقالي (يحل محل amber) ── */
  --amber:  #f97316;
  --amber2: #fb923c;
  --amber3: #fff3e8;

  /* ── الخلفيات ── */
  --cream:  #f4f7fc;
  --cream2: #e4ecf8;
  --cream3: #d5e3f5;
  --border: #c5d8f0;

  /* ── متغيرات الظل الجديدة ── */
  --sh:   0 2px 12px rgba(21,101,192,.08);
  --shmd: 0 8px 32px rgba(21,101,192,.12);
  --shlg: 0 20px 64px rgba(21,101,192,.18);
}

/* ══ 2. إعادة تلوين body ══ */
body {
  background: var(--cream);
}

/* ══ 3. NAVBAR ══ */
.navbar {
  background: linear-gradient(135deg, #0d2f6e 0%, #1565c0 60%, #1976d2 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 20px rgba(13,47,110,.35) !important;
}

.logo {
  color: #fff !important;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -.03em;
}
.logo span { color: #f97316 !important; }

.nli {
  color: rgba(255,255,255,.82) !important;
  font-weight: 600;
  transition: color .18s;
}
.nli:hover { color: #fff !important; }

/* أزرار Navbar */
.navbar .btn-gh {
  color: rgba(255,255,255,.85) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 10px !important;
  background: transparent !important;
}
.navbar .btn-gh:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.navbar .btn-p {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  box-shadow: 0 3px 14px rgba(249,115,22,.38) !important;
  color: #fff !important;
  border: none !important;
}
.navbar .btn-p:hover {
  background: linear-gradient(135deg, #ea6a00, #f97316) !important;
  box-shadow: 0 5px 20px rgba(249,115,22,.5) !important;
}

/* ── Hamburger ── */
.hamburger span { background: #fff !important; }

/* ── wallet chip ── */
.wchip {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-radius: 50px;
}

/* ── nav avatar ── */
.nav-av {
  background: linear-gradient(135deg, #f97316, #1565c0) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.3) !important;
}

/* ══ 4. MOBILE MENU ══ */
.mob-menu {
  background: linear-gradient(160deg, #0a1f54 0%, #0d47a1 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.mob-nli {
  color: rgba(255,255,255,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.mob-nli:hover { background: rgba(255,255,255,.08) !important; }

.mob-menu-divider { border-color: rgba(255,255,255,.1) !important; }

.mob-menu .btn-o {
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
}
.mob-menu .btn-o:hover { background: rgba(255,255,255,.12) !important; }

.mob-menu .btn-p {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  color: #fff !important;
  border: none !important;
}

/* ══ 5. BOTTOM NAV (mobile) ══ */
.bottom-nav {
  background: linear-gradient(180deg, #0d47a1 0%, #0a2f7a 100%) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 -4px 20px rgba(13,47,161,.35) !important;
}

.bn-item { color: rgba(255,255,255,.55) !important; }
.bn-item .bn-ic { font-size: 1.3rem; }
.bn-item .bn-lbl { font-size: .62rem; font-weight: 700; margin-top: 2px; }

.bn-item.active {
  color: #f97316 !important;
}
.bn-item.active .bn-ic { filter: drop-shadow(0 0 5px rgba(249,115,22,.6)); }

.bn-badge {
  background: #f97316 !important;
}

/* ══ 6. الأزرار الرئيسية ══ */
.btn-p {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
  box-shadow: 0 4px 14px rgba(21,101,192,.30) !important;
  color: #fff !important;
}
.btn-p:hover {
  background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
  box-shadow: 0 6px 22px rgba(21,101,192,.42) !important;
}

.btn-a {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.30) !important;
  color: #fff !important;
}
.btn-a:hover {
  background: linear-gradient(135deg, #ea6a00, #f97316) !important;
}

.btn-o {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
}
.btn-o:hover {
  background: var(--teal) !important;
  color: #fff !important;
}

/* ══ 7. INPUTS & FORMS ══ */
input:focus, textarea:focus, select:focus {
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 4px rgba(21,101,192,.10) !important;
}

/* ══ 8. SPLASH SCREEN ══ */
#loadScreen {
  background: linear-gradient(160deg, #030c20 0%, #071540 55%, #030c20 100%) !important;
}

#loadScreen::before {
  background: radial-gradient(circle, rgba(21,101,192,.22) 0%, transparent 70%) !important;
}

.skl-splash-name span { color: #f97316 !important; }

.skl-loader-fill {
  background: linear-gradient(90deg, #1565c0, #42a5f5, #f97316) !important;
}

.skl-splash-dots span {
  background: rgba(21,101,192,.7) !important;
}
.skl-splash-dots span:nth-child(2) { background: rgba(66,165,245,.7) !important; }
.skl-splash-dots span:nth-child(3) { background: rgba(249,115,22,.7) !important; }

@keyframes sklLogoPulse {
  0%,100% { transform:scale(1);
    box-shadow:0 8px 40px rgba(21,101,192,.45), 0 0 0 1.5px rgba(255,255,255,.08); }
  50%      { transform:scale(1.04);
    box-shadow:0 12px 56px rgba(21,101,192,.65), 0 0 0 1.5px rgba(255,255,255,.12); }
}

/* ══ 9. CARDS ══ */
.card {
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(21,101,192,.06) !important;
}

.ch {
  background: var(--cream) !important;
  border-bottom-color: var(--border) !important;
}

/* ══ 10. TAGS & PILLS ══ */
.tag { color: var(--teal) !important; background: var(--teal3) !important; }
.pco { background: var(--teal3) !important; color: var(--teal) !important; }

/* ══ 11. SPINNER ══ */
.spin {
  border-color: rgba(21,101,192,.15) !important;
  border-top-color: #1565c0 !important;
}

/* ══ 12. SCROLL TO TOP ══ */
.scroll-top {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
  box-shadow: 0 4px 16px rgba(21,101,192,.40) !important;
}

/* ══ 13. HERO SECTION ══ */
.hero {
  background: linear-gradient(160deg,
    #0a1f54 0%,
    #0d47a1 45%,
    #1a2f72 80%,
    #0a1a3a 100%) !important;
}

.hero::before {
  background:
    radial-gradient(circle at 20% 50%, rgba(249,115,22,.12) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(66,165,245,.15) 0%, transparent 55%) !important;
}

/* ── hero badge ── */
.hero .sl { color: #f97316 !important; }

/* ═══ 14. SECTION HEADINGS ══ */
.st span { color: #1565c0 !important; }

/* ══ 15. TEACHER CARD ══ */
.tcard:hover {
  border-color: rgba(21,101,192,.30) !important;
  box-shadow: 0 8px 32px rgba(21,101,192,.14) !important;
}

.tc-name { color: var(--ink) !important; }

/* ══ 16. STATS BAR / NUMBERS ══ */
.stat-num { color: #1565c0 !important; }

/* ══ 17. SESSION SECTION ══ */
.swr-spin {
  border-top-color: #1565c0 !important;
}

.sesmb.mine {
  background: linear-gradient(135deg, #1565c0, #1976d2) !important;
}

.cbtn.chattog { background: rgba(21,101,192,.22) !important; }
.cbtn.chattog.unread {
  background: rgba(21,101,192,.38) !important;
  box-shadow: 0 0 0 3px #1565c0 !important;
}

.btn-enter-session {
  background: linear-gradient(135deg, #1565c0, #42a5f5) !important;
  box-shadow: 0 2px 10px rgba(21,101,192,.38) !important;
}
@keyframes pulse-enter {
  0%,100% { box-shadow: 0 2px 10px rgba(21,101,192,.38); }
  50%      { box-shadow: 0 2px 20px rgba(21,101,192,.60); }
}

/* ══ 18. DUAL DASHBOARD BLOCKS ══ */
.student-block {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%) !important;
  box-shadow: 0 6px 24px rgba(13,71,161,.28) !important;
}

.teacher-block {
  background: linear-gradient(135deg, #7c2d12 0%, #f97316 100%) !important;
  box-shadow: 0 6px 24px rgba(249,115,22,.25) !important;
}

/* ══ 19. WALLET CHIP ══ */
.wa { color: #f97316 !important; font-weight: 900; }

/* ══ 20. FOOTER ══ */
footer {
  background: linear-gradient(160deg, #071028 0%, #0d2355 100%) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

footer .ll span,
footer .logo span { color: #f97316 !important; }
footer a { color: rgba(255,255,255,.65) !important; }
footer a:hover { color: #f97316 !important; }

/* ══ 21. MODALS ══ */
.modal {
  border: 1px solid rgba(21,101,192,.15) !important;
}

.mc {
  background: var(--teal3) !important;
  color: var(--teal) !important;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.mc:hover { background: var(--teal4) !important; }

/* ══ 22. PWA INSTALL BANNER ══ */
.pwa-install-banner,
.pwa-early-banner {
  background: linear-gradient(135deg, rgba(7,16,40,.98), rgba(21,101,192,.95)) !important;
  border-color: rgba(66,165,245,.30) !important;
}

.pwa-banner-btn {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  box-shadow: 0 3px 12px rgba(249,115,22,.40) !important;
}

/* ══ 23. PROGRESS / ACTIVE INDICATORS ══ */
.pill.active-pill {
  background: rgba(21,101,192,.14) !important;
  color: #1565c0 !important;
  border-color: rgba(21,101,192,.30) !important;
}

.tr-active td { background: rgba(21,101,192,.04) !important; }
.bkcard-active {
  border-color: rgba(21,101,192,.40) !important;
  background: linear-gradient(135deg, rgba(21,101,192,.05), transparent) !important;
}

/* ══ 24. PAY INFO BOX ══ */
.pib-val { color: #1565c0 !important; }

/* ══ 25. CROPPER ZOOM ══ */
.crop-zoom input[type="range"] { accent-color: #1565c0 !important; }

/* ══ 26. CHAT SENDER BADGE ══ */
.msender {
  color: #1565c0 !important;
  background: rgba(21,101,192,.08) !important;
  border-color: rgba(21,101,192,.14) !important;
}

/* ══ 27. EXPLORE PAGE — FILTER BAR ══ */
.filter-btn.active,
.filter-btn:focus {
  background: var(--teal) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
  box-shadow: 0 3px 12px rgba(21,101,192,.28) !important;
}

/* ══ 28. STARS ══ */
.stars { color: #f97316 !important; }
.sbtn.lit,
.sbtn:hover { color: #f97316 !important; }
.sl { color: #f97316 !important; }

/* ══ 29. RESPONSIVE MOBILE POLISH ══ */

/* ── تأكد أن جميع الأزرار لها حجم مناسب للمس ── */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* ── Hero على الهاتف ── */
  .hero { padding: 32px 16px 44px !important; }
  .hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  .hero p { font-size: .92rem !important; }

  /* ── Cards ── */
  .card, .cb { border-radius: 18px !important; }

  /* ── Modals ── */
  .modal { border-radius: 24px 24px 0 0 !important; }

  /* ── تحسين padding الصفحات ── */
  .page-wrap, .dashwrap { padding: 16px !important; }
}

/* ── Tablet ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero { padding: 48px 28px 56px !important; }
}

/* ══ 30. DARK MODE  ══ */
/* ══════════════════════════════════════════════════════
   LIGHT MODE — explicit (default is light)
   Ensures readable colors on light background
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    --page-bg:  #f5f7fa;
    --card-bg:  #ffffff;
    --card-bg2: #f0f4f8;
    --ink:      #111827;
    --ink2:     #374151;
    --muted:    #6b7280;
    --border:   #e2e8f0;
    --white:    #ffffff;
    --cream:    #f5f7fa;
    --cream2:   #eef2f7;
    --cream3:   #e4eaf2;
    --teal3:    #e0f2f4;
    --teal4:    #b2dfe2;
    --amber3:   #fef3c7;
    --red2:     #fee2e2;
    --green2:   #d1fae5;
  }

  body { background: var(--page-bg); color: var(--ink); }

  /* Steps section — force dark background for readability */
  .steps-section { background: linear-gradient(160deg,#0d1b35,#0a1628) !important; }
  .step { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; }
  .steptitle { color: #ffffff !important; }
  .stepdesc  { color: rgba(255,255,255,.6) !important; }

  /* Cards */
  .card { background: #ffffff !important; border-color: var(--border) !important; color: var(--ink) !important; }
  .ch   { background: #f8fafc !important; border-color: var(--border) !important; color: var(--ink) !important; }
  .cb   { background: #ffffff !important; color: var(--ink) !important; }

  /* Forms */
  input, textarea, select {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
  }
  input::placeholder, textarea::placeholder { color: #9ca3af !important; }

  /* Modal */
  .modal { background: #ffffff !important; border-color: var(--border) !important; }
  .mi    { background: #ffffff !important; }

  /* Tags */
  .tag   { background: #e0f2f4 !important; color: #0d6e75 !important; }
  .tag-g { background: #d1fae5 !important; color: #065f46 !important; }
  .tag-a { background: #fef3c7 !important; color: #92400e !important; }
  .tag-r { background: #fee2e2 !important; color: #b91c1c !important; }

  /* Booking cards */
  .bkcard { background: #ffffff !important; border-color: var(--border) !important; }
  .bkcard-title { color: var(--ink) !important; }
  .bkcard-sub   { color: var(--muted) !important; }

  /* Status badges */
  .pco { background: #dbeafe !important; color: #1e40af !important; }
  .pp  { background: #fef3c7 !important; color: #92400e !important; }
  .pc  { background: #d1fae5 !important; color: #065f46 !important; }
  .pca { background: #fee2e2 !important; color: #b91c1c !important; }

  /* Chat */
  .chatmsgs { background: #f8fafc !important; }
  .chatmsg-wrap.mine .chatmsg { background: #0d6e75 !important; color: #fff !important; }
  .chatmsg { background: #e2e8f0 !important; color: #111827 !important; }

  /* Profile page */
  .profsec { background: #ffffff !important; border-color: var(--border) !important; }

  /* Bottom nav */
  .bottom-nav { background: rgba(255,255,255,.96) !important; border-color: var(--border) !important; }
  .bnav-lbl   { color: var(--muted) !important; }
  .bnav-item.active .bnav-lbl { color: #0d6e75 !important; }
}

/* ══════════════════════════════════════════════════════
   DARK MODE — full override
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --page-bg:  #080f1f;
    --card-bg:  #0e1a30;
    --card-bg2: #122040;
    --ink:      #e8edf8;
    --ink2:     #b8c8e8;
    --muted:    #7a90b8;
    --border:   #1a2f55;
    --white:    #0e1a30;
    --cream:    #080f1f;
    --cream2:   #0e1a30;
    --cream3:   #122040;
    --teal3:    #0d2040;
    --teal4:    #153060;
    --amber3:   #1f1200;
    --red2:     #2a0808;
    --green2:   #062015;
  }

  body { background: #080f1f; color: #e8edf8; }

  /* Navbar */
  .navbar {
    background: linear-gradient(135deg,#050c1c 0%,#0a1835 60%,#0d2050 100%) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
  }
  .mob-menu { background: linear-gradient(160deg,#050c1c 0%,#0a1835 100%) !important; }

  /* Cards */
  .card { background: #0e1a30 !important; border-color: #1a2f55 !important; }
  .ch   { background: #0a1628 !important; border-color: #1a2f55 !important; }
  .cb   { background: #0e1a30 !important; }

  /* Forms */
  input, textarea, select {
    background: #0a1628 !important;
    border-color: #1a2f55 !important;
    color: #e8edf8 !important;
  }
  input::placeholder, textarea::placeholder { color: #5a7090 !important; }

  /* Modal */
  .modal { background: #0e1a30 !important; border-color: rgba(30,70,140,.4) !important; }
  .mi    { background: #0e1a30 !important; }

  /* Tags */
  .tag   { background: #0d2040 !important; color: #5eead4 !important; }
  .tag-g { background: #062015 !important; color: #6ee7b7 !important; }
  .tag-a { background: #1f1200 !important; color: #fbbf24 !important; }
  .tag-r { background: #2a0808 !important; color: #fca5a5 !important; }

  /* Steps */
  .step { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
  .steptitle { color: #ffffff !important; }
  .stepdesc  { color: rgba(255,255,255,.5) !important; }

  /* Booking cards */
  .bkcard { background: #0e1a30 !important; border-color: #1a2f55 !important; }
  .bkcard-title { color: #e8edf8 !important; }
  .bkcard-sub   { color: #7a90b8 !important; }

  /* Status */
  .pco { background: #0d2040 !important; color: #93c5fd !important; }
  .pp  { background: #1f1200 !important; color: #fbbf24 !important; }
  .pc  { background: #062015 !important; color: #6ee7b7 !important; }
  .pca { background: #2a0808 !important; color: #fca5a5 !important; }

  /* Chat */
  .chatmsgs { background: #060e1c !important; }
  .chatmsg-wrap.mine .chatmsg { background: #0d6e75 !important; color: #fff !important; }
  .chatmsg { background: #122040 !important; color: #e8edf8 !important; }

  /* Profile */
  .profsec { background: #0e1a30 !important; border-color: #1a2f55 !important; }

  /* Hero */
  .hero { background: linear-gradient(160deg,#03081a 0%,#071335 45%,#0a1a48 100%) !important; }

  /* Footer / Bottom nav */
  footer { background: linear-gradient(160deg,#03081a 0%,#071335 100%) !important; }
  .bottom-nav {
    background: rgba(5,12,28,.96) !important;
    border-color: rgba(255,255,255,.06) !important;
  }

  /* Misc */
  #page-dashboard { background: #080f1f !important; }
}

/* ══ 31. تنسيق الـ Scroll bar ══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(21,101,192,.30);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(21,101,192,.55);
}

/* ══ 32. Selection color ══ */
::selection {
  background: rgba(21,101,192,.22);
  color: #1565c0;
}

/* ══ 33. Focus visible (accessibility) ══ */
:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══ 34. LOGO text — ll class ══ */
.ll span { color: #f97316 !important; }

/* ══ 35. Support chat image card ══ */
.support-photo-visual {
  background: linear-gradient(160deg, #e3f2fd, #fff3e8) !important;
}

/* ══ 36. PWA status-bar color (iOS/Android) ══ */
/* Handled via meta tags in index.html */

/* ══ 37. Dashboard polish + announcements ══ */
#page-dashboard {
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.10), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%) !important;
}

#page-dashboard .dashlay {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto 24px;
  gap: 18px;
  align-items: start;
}

#page-dashboard .sidebar {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(13,47,110,.18);
}

#page-dashboard .dashcon {
  border-radius: 28px;
  background: linear-gradient(180deg, #fbfdff 0%, #f1f6fc 100%) !important;
  box-shadow: 0 14px 34px rgba(21,101,192,.08);
  border: 1px solid rgba(21,101,192,.08);
}

#page-dashboard #sklAnnBar {
  width: min(1480px, calc(100% - 32px));
  margin: 14px auto 0;
  display: block;
}

#page-dashboard .skl-ann-shell {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,249,255,.92));
  border: 1px solid rgba(21,101,192,.10);
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(13,47,110,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#page-dashboard .skl-ann-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#page-dashboard .skl-ann-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#page-dashboard .skl-ann-ic {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  box-shadow: 0 8px 20px rgba(21,101,192,.20);
  font-size: 1.1rem;
  flex-shrink: 0;
}

#page-dashboard .skl-ann-title {
  font-size: 1rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

#page-dashboard .skl-ann-sub {
  font-size: .76rem;
  color: #64748b;
  margin-top: 3px;
}

#page-dashboard .skl-ann-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(249,115,22,.22);
}

#page-dashboard .skl-ann-mark {
  border: 1px solid rgba(21,101,192,.14);
  background: rgba(21,101,192,.06);
  color: #1565c0;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}

#page-dashboard .skl-ann-mark:hover {
  background: rgba(21,101,192,.12);
  transform: translateY(-1px);
}

#page-dashboard .skl-ann-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 28vw, 244px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(21,101,192,.28) transparent;
}

#page-dashboard .skl-ann-track::-webkit-scrollbar {
  height: 6px;
}

#page-dashboard .skl-ann-track::-webkit-scrollbar-thumb {
  background: rgba(21,101,192,.26);
  border-radius: 999px;
}

#page-dashboard .skl-ann-card {
  position: relative;
  min-height: 210px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 24px rgba(13,47,110,.16);
  border: 2px solid transparent;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#page-dashboard .skl-ann-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(13,47,110,.22);
}

#page-dashboard .skl-ann-card.is-unread {
  border-color: rgba(249,115,22,.92);
}

#page-dashboard .skl-ann-card.is-read {
  border-color: rgba(255,255,255,.16);
}

#page-dashboard .skl-ann-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f97316;
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(249,115,22,.18);
  z-index: 2;
}

#page-dashboard .skl-ann-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 52%, transparent 100%);
}

#page-dashboard .skl-ann-card-title {
  color: #fff;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 5px;
}

#page-dashboard .skl-ann-card-text {
  color: rgba(255,255,255,.80);
  font-size: .76rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-dashboard .skl-ann-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(249,115,22,.26);
}

#page-dashboard .skl-ann-link:hover {
  filter: brightness(1.02);
}

#sklStoryViewer {
  background: radial-gradient(circle at top, rgba(21,101,192,.24), transparent 36%), #030712 !important;
}

#sklStoryViewer #sklStoryProg {
  padding: 12px 12px 0 !important;
  height: auto !important;
}

#sklStoryViewer #sklStoryContent {
  padding: 12px !important;
}

#sklStoryViewer a {
  transition: transform .18s ease, box-shadow .18s ease;
}

#sklStoryViewer a:hover {
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  #page-dashboard .dashlay,
  #page-dashboard #sklAnnBar {
    width: calc(100% - 18px);
  }

  #page-dashboard .dashcon {
    border-radius: 24px;
  }

  #page-dashboard .skl-ann-shell {
    border-radius: 24px;
    padding: 14px;
  }

  #page-dashboard .skl-ann-track {
    grid-auto-columns: minmax(180px, 72vw);
  }
}

@media (max-width: 640px) {
  #page-dashboard .dashlay,
  #page-dashboard #sklAnnBar {
    width: calc(100% - 12px);
  }

  #page-dashboard .dashcon {
    border-radius: 22px;
    padding: 14px !important;
  }

  #page-dashboard .skl-ann-head {
    align-items: flex-start;
  }

  #page-dashboard .skl-ann-title-wrap {
    gap: 10px;
  }

  #page-dashboard .skl-ann-ic {
    width: 40px;
    height: 40px;
  }

  #page-dashboard .skl-ann-title {
    font-size: .95rem;
  }

  #page-dashboard .skl-ann-sub {
    font-size: .72rem;
  }

  #page-dashboard .skl-ann-mark {
    width: 100%;
  }

  #page-dashboard .skl-ann-track {
    grid-auto-columns: 78vw;
  }

  #page-dashboard .skl-ann-card {
    min-height: 198px;
  }
}

@media (max-width: 420px) {
  #page-dashboard .skl-ann-shell {
    padding: 12px;
  }

  #page-dashboard .skl-ann-track {
    grid-auto-columns: 84vw;
  }

  #page-dashboard .skl-ann-card {
    min-height: 190px;
  }

  #page-dashboard .skl-ann-card-title {
    font-size: .88rem;
  }

  #page-dashboard .skl-ann-card-text {
    font-size: .72rem;
  }
}


/* ══ 38. Dashboard sidebar + layout polish ══ */
#page-dashboard .dashlay {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

#page-dashboard .sidebar {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: unset !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #07112a 0%, #0e1c3d 38%, #11264b 100%) !important;
  border-radius: 30px;
  box-shadow: 0 22px 48px rgba(7,17,42,.28), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 14px 0 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#page-dashboard .sbu {
  padding: 14px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}

#page-dashboard .sbav {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f97316, #1565c0) !important;
  box-shadow: 0 10px 22px rgba(249,115,22,.20);
}

#page-dashboard .sbname {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

#page-dashboard .sbrole {
  background: rgba(249,115,22,.12);
  color: #fb923c;
  border: 1px solid rgba(249,115,22,.12);
  backdrop-filter: blur(6px);
}

#page-dashboard .sbnav {
  padding: 0 10px 8px;
  display: grid;
  gap: 6px;
}

#page-dashboard .sbsl {
  color: rgba(255,255,255,.25);
  padding: 14px 8px 6px;
}

#page-dashboard .ni {
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.025);
  border-radius: 18px;
  padding: 14px 15px;
  color: rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}

#page-dashboard .ni:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  transform: translateX(-2px);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

#page-dashboard .ni.act {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color: #fff;
  border-right: 0;
  box-shadow: 0 12px 24px rgba(249,115,22,.28);
  transform: translateX(-1px);
}

#page-dashboard .nic {
  font-size: .98rem;
}

#page-dashboard .dashcon {
  border-radius: 28px;
  background: linear-gradient(180deg, #fbfdff 0%, #f1f6fc 100%) !important;
  box-shadow: 0 14px 34px rgba(21,101,192,.08);
  border: 1px solid rgba(21,101,192,.08);
  min-height: calc(100vh - var(--nh));
}

#page-dashboard #sklAnnBar {
  width: 100%;
  margin: 14px 0 0;
  display: block;
}

#page-dashboard .skl-ann-shell {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,249,255,.92));
  border: 1px solid rgba(21,101,192,.10);
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(13,47,110,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#page-dashboard .skl-ann-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 28vw, 244px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(21,101,192,.28) transparent;
}

#page-dashboard .skl-ann-card {
  position: relative;
  min-height: 210px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 24px rgba(13,47,110,.16);
  border: 2px solid transparent;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#page-dashboard .skl-ann-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(13,47,110,.22);
}

#page-dashboard .skl-ann-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.03);
  background: #0b1227;
}

#page-dashboard .skl-ann-target {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(255,255,255,.16);
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#page-dashboard .skl-ann-target.tutor { background: rgba(16,185,129,.18); }
#page-dashboard .skl-ann-target.learner { background: rgba(249,115,22,.18); }

#page-dashboard .skl-ann-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 52%, transparent 100%);
}

#page-dashboard .skl-ann-card-title { color: #fff; }
#page-dashboard .skl-ann-card-text { color: rgba(255,255,255,.80); }

#page-dashboard .skl-ann-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(249,115,22,.26);
}

#page-dashboard .skl-ann-link:hover { filter: brightness(1.02); }

@media (max-width: 1100px) {
  #page-dashboard .dashlay { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  #page-dashboard .dashlay {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - 18px);
  }

  #page-dashboard .sidebar {
    border-radius: 24px;
  }

  #page-dashboard .dashcon {
    border-radius: 24px;
  }

  #page-dashboard .skl-ann-shell {
    border-radius: 24px;
    padding: 14px;
  }

  #page-dashboard .skl-ann-track { grid-auto-columns: minmax(180px, 72vw); }
}

@media (max-width: 640px) {
  #page-dashboard .dashlay,
  #page-dashboard #sklAnnBar { width: calc(100% - 12px); }

  #page-dashboard .sidebar {
    padding: 12px 0 14px;
    border-radius: 24px;
  }

  #page-dashboard .sbav { width: 54px; height: 54px; border-radius: 16px; }
  #page-dashboard .ni { padding: 12px 13px; border-radius: 14px; }
  #page-dashboard .skl-ann-card { min-height: 198px; }
  #page-dashboard .skl-ann-track { grid-auto-columns: 78vw; }
}

@media (max-width: 420px) {
  #page-dashboard .skl-ann-shell { padding: 12px; }
  #page-dashboard .skl-ann-track { grid-auto-columns: 84vw; }
  #page-dashboard .skl-ann-card { min-height: 190px; }
  #page-dashboard .skl-ann-card-title { font-size: .88rem; }
  #page-dashboard .skl-ann-card-text { font-size: .72rem; }
}

/* Better spacing for the dashboard shell */
#page-dashboard .dashcon {
  overflow: hidden;
}

#page-dashboard .sidebar::-webkit-scrollbar {
  width: 8px;
}
#page-dashboard .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 99px;
}


/* ══ 38. Luxury responsive dashboard refresh ══ */
#page-dashboard .dashlay {
  width: min(1600px, calc(100% - 20px));
  margin: 0 auto 28px;
  gap: 20px;
  align-items: start;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

#page-dashboard .dashmain {
  min-width: 0;
}

#page-dashboard .sidebar {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.14), transparent 26%),
    linear-gradient(180deg, #081327 0%, #0c1732 42%, #0f1d3b 100%) !important;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 24px 56px rgba(3,10,30,.28), inset 0 1px 0 rgba(255,255,255,.04);
}

#page-dashboard .sidebar .sbu {
  padding: 20px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}

#page-dashboard .sidebar .sbav {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.1);
}

#page-dashboard .sidebar .sbname {
  font-size: 1rem;
  color: #fff;
}

#page-dashboard .sidebar .sbrole {
  background: rgba(245,158,11,.14);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.16);
}

#page-dashboard .sidebar .sbnav {
  padding: 0 12px 14px;
  display: grid;
  gap: 10px;
}

#page-dashboard .sidebar .ni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .01em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

#page-dashboard .sidebar .ni:hover {
  transform: translateX(-2px);
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

#page-dashboard .sidebar .ni.act {
  background: linear-gradient(135deg, rgba(245,158,11,.94), rgba(251,191,36,.96));
  color: #fff;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 14px 28px rgba(245,158,11,.24);
}

#page-dashboard .sidebar .ni .nic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  flex-shrink: 0;
  font-size: 1.05rem;
  filter: saturate(1.1);
}

#page-dashboard .dashcon {
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(21,101,192,.08), transparent 30%),
    linear-gradient(180deg, #fcfdff 0%, #eef4fb 100%) !important;
  box-shadow: 0 18px 48px rgba(13,110,117,.08);
  border: 1px solid rgba(13,110,117,.08);
  overflow: hidden;
}

#page-dashboard #sklAnnBar {
  width: 100%;
  margin: 0 0 18px;
}

#page-dashboard .skl-ann-shell {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.92));
  border: 1px solid rgba(13,110,117,.10);
  border-radius: 30px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(10,87,93,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#page-dashboard .skl-ann-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#page-dashboard .skl-ann-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#page-dashboard .skl-ann-ic {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d6e75, #15919b);
  box-shadow: 0 8px 20px rgba(13,110,117,.20);
  font-size: 1.1rem;
  flex-shrink: 0;
}

#page-dashboard .skl-ann-title {
  font-size: 1rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}

#page-dashboard .skl-ann-sub {
  font-size: .76rem;
  color: #64748b;
  margin-top: 3px;
}

#page-dashboard .skl-ann-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(245,158,11,.22);
}

#page-dashboard .skl-ann-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 24vw, 280px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(13,110,117,.28) transparent;
}

#page-dashboard .skl-ann-track::-webkit-scrollbar {
  height: 6px;
}

#page-dashboard .skl-ann-track::-webkit-scrollbar-thumb {
  background: rgba(13,110,117,.26);
  border-radius: 999px;
}

#page-dashboard .skl-ann-card {
  position: relative;
  min-height: 238px;
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 24px rgba(10,87,93,.16);
  border: 2px solid transparent;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  background: linear-gradient(135deg, #0d2355 0%, #1565c0 62%, #1976d2 100%);
}

#page-dashboard .skl-ann-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(10,87,93,.22);
}

#page-dashboard .skl-ann-card.is-unread {
  border-color: rgba(245,158,11,.92);
}

#page-dashboard .skl-ann-card.is-read {
  border-color: rgba(255,255,255,.16);
}

#page-dashboard .skl-ann-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d2355 0%, #1565c0 62%, #1976d2 100%);
}

#page-dashboard .skl-ann-media.is-fallback {
  background: linear-gradient(135deg, #0d2355 0%, #1565c0 62%, #1976d2 100%);
}

#page-dashboard .skl-ann-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#page-dashboard .skl-ann-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.44) 52%, transparent 100%);
}

#page-dashboard .skl-ann-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

#page-dashboard .skl-ann-chip,
#page-dashboard .skl-story-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

#page-dashboard .skl-ann-date,
#page-dashboard .skl-story-date {
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

#page-dashboard .skl-ann-card-title {
  color: #fff;
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 6px;
}

#page-dashboard .skl-ann-card-text {
  color: rgba(255,255,255,.84);
  font-size: .8rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-dashboard .skl-ann-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(245,158,11,.26);
}

#page-dashboard .skl-ann-link:hover {
  filter: brightness(1.02);
}

#sklStoryViewer {
  background:
    radial-gradient(circle at top, rgba(13,110,117,.18), transparent 34%),
    rgba(2,6,23,.96) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 24px);
  box-sizing: border-box;
  overflow: auto;
}

#sklStoryViewer > button {
  position: fixed !important;
  z-index: 100000 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease;
}

#sklStoryViewer > button:hover {
  transform: translateY(-1px);
  background: rgba(0,0,0,.62) !important;
}

#sklStoryViewer #sklStoryProg {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  padding: 0 !important;
  gap: 5px !important;
  z-index: 99999 !important;
}

#sklStoryViewer #sklStoryContent {
  width: min(100%, 980px) !important;
  height: min(100%, 860px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.skl-story-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(280px, 1fr) auto;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8,19,39,.96), rgba(7,11,22,.98));
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.08);
}

.skl-story-media {
  position: relative;
  background:
    radial-gradient(circle at top, rgba(245,158,11,.18), transparent 34%),
    linear-gradient(160deg, #081327 0%, #0c1732 42%, #0f1d3b 100%);
  min-height: 280px;
}

.skl-story-media.is-fallback {
  background:
    radial-gradient(circle at top, rgba(245,158,11,.18), transparent 34%),
    linear-gradient(160deg, #081327 0%, #0c1732 42%, #0f1d3b 100%);
}

.skl-story-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.skl-story-body {
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.skl-story-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.skl-story-title {
  margin: 0 0 10px;
  font-family: 'Cairo', sans-serif;
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  line-height: 1.45;
}

.skl-story-text {
  color: rgba(255,255,255,.88);
  font-size: clamp(.92rem, 1.7vw, 1.02rem);
  line-height: 1.9;
  white-space: pre-wrap;
}

.skl-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 24px rgba(249,115,22,.28);
}

.skl-story-link:hover {
  filter: brightness(1.03);
}

.skl-story-seg {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.skl-story-seg.is-active {
  background: rgba(255,255,255,.88);
}

.skl-story-seg.is-done {
  background: #f97316;
}

@media (max-width: 1180px) {
  #page-dashboard .dashlay {
    width: calc(100% - 18px);
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  #page-dashboard .dashlay {
    width: calc(100% - 14px);
    grid-template-columns: 1fr;
  }

  #page-dashboard .sidebar {
    order: 2;
  }

  #page-dashboard .dashmain {
    order: 1;
  }

  #page-dashboard .skl-ann-track {
    grid-auto-columns: minmax(220px, 72vw);
  }

  #sklStoryViewer #sklStoryContent {
    width: min(100%, 860px) !important;
  }
}

@media (max-width: 720px) {
  #page-dashboard .dashlay {
    width: calc(100% - 10px);
    gap: 14px;
  }

  #page-dashboard .sidebar,
  #page-dashboard .dashcon,
  #page-dashboard .skl-ann-shell {
    border-radius: 24px;
  }

  #page-dashboard .skl-ann-shell {
    padding: 14px;
  }

  #page-dashboard .sidebar .sbu {
    padding: 18px 16px 16px;
  }

  #page-dashboard .sidebar .ni {
    min-height: 50px;
    border-radius: 16px;
    font-size: .9rem;
  }

  #page-dashboard .skl-ann-track {
    grid-auto-columns: minmax(200px, 78vw);
  }

  #page-dashboard .skl-ann-card {
    min-height: 220px;
    border-radius: 24px;
  }

  #page-dashboard .skl-ann-overlay {
    padding: 14px;
  }

  #sklStoryViewer > button {
    width: 36px !important;
    height: 36px !important;
  }

  #sklStoryViewer #sklStoryProg {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
  }

  .skl-story-shell {
    border-radius: 24px;
    grid-template-rows: minmax(250px, 48vh) auto;
  }

  .skl-story-media {
    min-height: 250px;
  }

  .skl-story-body {
    padding: 18px 16px 20px;
  }
}

@media (max-width: 520px) {
  #page-dashboard .dashlay {
    width: calc(100% - 8px);
  }

  #page-dashboard .sidebar .sbav {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  #page-dashboard .skl-ann-title {
    font-size: .96rem;
  }

  #page-dashboard .skl-ann-sub {
    font-size: .7rem;
  }

  #page-dashboard .skl-ann-track {
    grid-auto-columns: 82vw;
  }

  #page-dashboard .skl-ann-card {
    min-height: 202px;
  }

  #page-dashboard .skl-ann-card-title {
    font-size: .9rem;
  }

  #page-dashboard .skl-ann-card-text {
    font-size: .74rem;
  }

  .skl-story-shell {
    border-radius: 22px;
    grid-template-rows: minmax(220px, 44vh) auto;
  }

  .skl-story-media {
    min-height: 220px;
  }

  .skl-story-title {
    font-size: 1.08rem;
  }

  .skl-story-text {
    font-size: .9rem;
    line-height: 1.8;
  }

  .skl-story-link {
    width: 100%;
    justify-content: center;
  }
}

/* ===== END style_brand.css ===== */

/* ===== BEGIN ultra_pro_v3.css ===== */

/* ===== SKILLAK ULTRA PRO V3 ===== */

:root{
  --pro-bg:#07111f;
  --pro-card:rgba(255,255,255,.08);
  --pro-border:rgba(255,255,255,.12);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at top right, rgba(21,101,192,.15), transparent 30%),
    radial-gradient(circle at bottom left, rgba(249,115,22,.10), transparent 25%),
    var(--cream) !important;
}

/* تحسين البطاقات */
.card,
.tc,
.profsec,
.bksb,
.tc2{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 8px 30px rgba(21,101,192,.08),
    0 2px 8px rgba(0,0,0,.05) !important;
  transition:all .3s ease;
}

.card:hover,
.tc:hover,
.profsec:hover{
  transform:translateY(-4px);
  box-shadow:
    0 18px 45px rgba(21,101,192,.15),
    0 6px 18px rgba(0,0,0,.08) !important;
}

/* أزرار احترافية */
.btn{
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-p{
  background:linear-gradient(135deg,#1565c0,#1e88e5) !important;
}

.btn-a{
  background:linear-gradient(135deg,#f97316,#fb923c) !important;
}

/* Glass Navbar */
.navbar{
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* تحسين الجلسات */
.sesbar,
.sesctrls{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* تحسين الشات */
.chatmsg,
.msg,
.msgb{
  border-radius:18px !important;
}

/* Scrollbar */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#1565c0,#f97316);
  border-radius:20px;
}

/* تحسين الإدخال */
input,
textarea,
select{
  transition:all .2s ease;
}

input:focus,
textarea:focus,
select:focus{
  transform:translateY(-1px);
}

/* تحسين الهاتف */
@media(max-width:768px){

  .hero{
    padding-top:90px !important;
  }

  .tgrid{
    grid-template-columns:1fr !important;
  }

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

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

  .navbar{
    padding-inline:14px !important;
  }

  .card,
  .profsec,
  .tc{
    border-radius:20px !important;
  }
}

/* Loading animations */
.fade-up{
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp .6s ease forwards;
}

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

/* صورة الإعلانات */
img{
  image-rendering:auto;
}

/* منع تكرار overflow */
body,
html{
  overflow-x:hidden !important;
}

/* ===== END ultra_pro_v3.css ===== */

/* ===== BEGIN next_level_v4.css ===== */

/* ===== SKILLAK NEXT LEVEL V4 ===== */

/* خلفية ديناميكية */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.06), transparent 20%),
    radial-gradient(circle at 80% 40%, rgba(249,115,22,.10), transparent 25%),
    radial-gradient(circle at 50% 90%, rgba(21,101,192,.10), transparent 30%);
  pointer-events:none;
}

/* بطاقات أكثر احترافية */
.tc,
.card,
.profsec{
  position:relative;
  overflow:hidden;
}

.tc::before,
.card::before,
.profsec::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  transition:all .7s ease;
}

.tc:hover::before,
.card:hover::before,
.profsec:hover::before{
  left:120%;
}

/* تأثير احترافي للأزرار */
.btn{
  position:relative;
  overflow:hidden;
}

.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.15);
  opacity:0;
  transition:opacity .25s ease;
}

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

/* تحسين الشات */
.chatmsg,
.msgb{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* تحسين الإحصائيات */
.hstats > div{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:14px 18px;
  border-radius:18px;
  backdrop-filter:blur(10px);
}

/* تحسين الجداول */
table{
  border-collapse:separate !important;
  border-spacing:0 10px !important;
}

tr{
  transition:all .2s ease;
}

tr:hover{
  transform:scale(1.01);
}

/* تأثير تحميل */
.skeleton{
  position:relative;
  overflow:hidden;
  background:#ddd;
}

.skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.4),
    transparent
  );
  animation:sk 1.2s infinite;
}

@keyframes sk{
  100%{
    transform:translateX(100%);
  }
}

/* تحسين الـ Modal */
.modal,
.mod,
.modal-content{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* تأثير للصور */
img{
  transition:transform .35s ease;
}

img:hover{
  transform:scale(1.02);
}

/* تحسين الهاتف */
@media(max-width:768px){

  .hero{
    min-height:auto !important;
    padding-bottom:60px !important;
  }

  .hg{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .hstats{
    justify-content:center;
  }

  .navbar{
    height:auto !important;
    min-height:64px;
  }

  .sesctrls{
    padding-bottom:18px !important;
  }
}

/* ===== END next_level_v4.css ===== */

/* ===== BEGIN elite_v5.css ===== */

/* ===== SKILLAK ELITE V5 ===== */

/* خلفية احترافية */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(21,101,192,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(249,115,22,.08), transparent 28%);
  z-index:-1;
}

/* تأثيرات البطاقات */
.tc,
.card,
.profsec,
.bksb,
.tc2{
  border-radius:22px !important;
}

.tc:hover,
.card:hover{
  transform:translateY(-6px) scale(1.01);
}

/* Glass panels */
.profsec,
.card{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* تحسين الصور */
.tcav img,
.profav img,
img{
  object-fit:cover;
}

/* تحسين الـnavbar */
.navbar{
  position:sticky !important;
  top:0;
}

/* تحسين البحث */
.hsearch{
  box-shadow:
    0 10px 30px rgba(0,0,0,.15),
    0 2px 10px rgba(21,101,192,.18);
}

/* تحسين الشات */
#chatMsgs{
  scroll-behavior:smooth;
}

/* رسائل احترافية */
.msg.mine,
.sesmb.mine{
  box-shadow:0 8px 24px rgba(21,101,192,.18);
}

/* تأثيرات الجلسة */
.sesctrls{
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
}

/* Bottom nav */
.bottom-nav{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* تحسين الفورم */
input,
textarea,
select{
  border-radius:14px !important;
}

/* تحسين الـmodal */
.modal{
  animation:fadeModal .25s ease;
}

@keyframes fadeModal{
  from{
    opacity:0;
    transform:scale(.96);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* تحسين الهاتف */
@media(max-width:768px){

  .btn{
    min-height:46px;
  }

  .navbar{
    padding-inline:10px !important;
  }

  .hero{
    border-bottom-left-radius:30px;
    border-bottom-right-radius:30px;
    overflow:hidden;
  }

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

  .hstats{
    gap:12px !important;
  }

  .tc,
  .card,
  .profsec{
    border-radius:18px !important;
  }
}

/* ===== END elite_v5.css ===== */

/* ===== BEGIN ultimate_v6.css ===== */

/* ===== SKILLAK ULTIMATE V6 ===== */

/* تحسين الخطوط */
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* تأثير خلفية احترافي */
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:32px 32px;
  z-index:-1;
}

/* بطاقات متطورة */
.card,
.tc,
.profsec,
.tc2,
.step,
.cc{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.card:hover,
.tc:hover,
.profsec:hover,
.tc2:hover,
.step:hover{
  border-color:rgba(21,101,192,.35) !important;
}

/* تحسين الـhero */
.hero{
  position:relative;
  overflow:hidden;
}

.hero::before{
  animation:heroFloat 12s ease-in-out infinite alternate;
}

@keyframes heroFloat{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-15px);
  }
}

/* أزرار أكثر نعومة */
.btn{
  border-radius:16px !important;
  font-weight:800 !important;
}

/* تحسين الـinputs */
input,
textarea,
select{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(10px);
}

/* تحسين الجداول */
table{
  overflow:hidden;
  border-radius:18px;
}

/* تأثير للـavatar */
.nav-av,
.tcav,
.profav{
  transition:transform .25s ease;
}

.nav-av:hover,
.tcav:hover,
.profav:hover{
  transform:scale(1.06);
}

/* تحسين الإعلانات */
.skl-ann-bar{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* تحسين الـfooter */
footer{
  position:relative;
  overflow:hidden;
}

footer::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.10), transparent 25%),
    radial-gradient(circle at bottom left, rgba(21,101,192,.10), transparent 25%);
  pointer-events:none;
}

/* تحسين المودالات */
.modal,
.modal-content,
.mod{
  border-radius:24px !important;
}

/* تحسين الشات */
.msg,
.msgb,
.chatmsg{
  line-height:1.7;
}

/* تحسين الانتقالات */
*{
  scroll-behavior:smooth;
}

/* تحسين الهاتف */
@media(max-width:768px){

  .hero{
    min-height:auto !important;
  }

  .hsearch{
    width:100%;
  }

  .btn{
    width:auto;
  }

  .sesctrls{
    border-top-left-radius:24px;
    border-top-right-radius:24px;
  }

  .bottom-nav{
    border-top-left-radius:18px;
    border-top-right-radius:18px;
  }
}

/* ===== END ultimate_v6.css ===== */


/* ═══════════════════════════════════════════════════════════════
   SKILLAK BRAND — MASTER OVERRIDE
   Skill = #fff always | ak = #f97316 always
   Covers: .ll, .logo, .seslogo, .swr-logo, .skl-splash-name
═══════════════════════════════════════════════════════════════ */

/* Base color for the word "Skill" */
.ll,
.logo,
.seslogo,
.swr-logo,
.skl-splash-name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* "ak" span — always orange */
.ll span,
.logo span,
.seslogo span,
.swr-logo span,
.skl-splash-name span {
  color: #f97316 !important;
  -webkit-text-fill-color: #f97316 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

/* Dark backgrounds where logo sits — no change needed */
.navbar .logo,
footer .logo,
footer .ll {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.navbar .logo span,
footer .logo span,
footer .ll span {
  color: #f97316 !important;
  -webkit-text-fill-color: #f97316 !important;
}