/* ─────────────────────────── TOKENS ─────────────────────────── */
  :root {
    --bp: #1a3faa;
    --bs: #2563eb;
    --ba: #3b82f6;
    --bg: linear-gradient(135deg, #1a3faa 0%, #2563eb 55%, #3b82f6 100%);
    --g1: linear-gradient(135deg, #1a3faa, #3b82f6);
    --g2: linear-gradient(135deg, #065f46, #10b981);
    --g3: linear-gradient(135deg, #6d28d9, #a78bfa);
    --g4: linear-gradient(135deg, #92400e, #f59e0b);
    --page: #eef2fb;
    --card: #fff;
    --sidebar: #0f2470;
    --inp: #f1f5fd;
    --t1: #0f172a;
    --t2: #64748b;
    --tm: #94a3b8;
    --ok: #22c55e;
    --ok2: #dcfce7;
    --er: #ef4444;
    --er2: #fee2e2;
    --wn: #f59e0b;
    --wn2: #fef9c3;
    --in: #2563eb;
    --in2: #dbeafe;
    --bd: #e2e8f0;
    --sh: 0 2px 16px rgba(26, 63, 170, .08);
    --sh2: 0 8px 32px rgba(26, 63, 170, .15);
    --r: 16px;
    --rb: 10px;
    --ri: 10px;
    --sw: 240px;
    --tb: 62px;
    --mb: 64px;

    --bg2: #eeecea;
    --bg3: #e4e2dc;
    --text: #0e0d0b;
    --sub: #5a5852;
    --muted: #9a9690;
    --border: #dedad2;
    --navbg: rgba(247, 246, 242, .94)
  }

    /* --- Red theme example (swap to :root to activate) ---
  :root {
    --brand-primary:   #991b1b;
    --brand-secondary: #dc2626;
    --brand-accent:    #f87171;
    --brand-gradient:  linear-gradient(135deg,#7f1d1d,#dc2626,#f87171);
    --bg-sidebar:      #450a0a;
  } */

  /* --- Green theme example ---
  :root {
    --brand-primary:   #14532d;
    --brand-secondary: #16a34a;
    --brand-accent:    #4ade80;
    --brand-gradient:  linear-gradient(135deg,#14532d,#16a34a,#4ade80);
    --bg-sidebar:      #052e16;
  } */

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

  html {
    scroll-behavior: smooth
  }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--page);
    color: var(--t1);
    min-height: 100vh;
    overflow-x: hidden
  }

  ::-webkit-scrollbar {
    width: 4px;
    height: 4px
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px
  }

  /* ─── PAGES ─── */
  .pg {
    display: none;
    min-height: 100vh;
    width: 100%
  }

  .pg.active {
    display: flex;
    flex-direction: column
  }

  /* ─── AUTH ─── */
  .auth-shell {
    display: flex;
    min-height: 100vh;
    width: 100%
  }

  .auth-l {
    flex: 0 0 44%;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden
  }

  .auth-l::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .055);
    top: -110px;
    left: -110px
  }

  .auth-l::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    bottom: -70px;
    right: -65px
  }

  .auth-r {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #f8faff;
    overflow-y: auto
  }

  .auth-card {
    width: 100%;
    max-width: 420px
  }

  .logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    letter-spacing: -.5px
  }

  .logo span {
    opacity: .5
  }

  /* ─── FORMS ─── */
  .fg {
    margin-bottom: 1rem
  }

  .fl {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--t2);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .05em
  }

  .fi {
    width: 100%;
    padding: .7rem .95rem;
    background: var(--inp);
    border: 1.5px solid var(--bd);
    border-radius: var(--ri);
    font-size: .9rem;
    color: var(--t1);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: 'DM Sans', sans-serif
  }

  .fi:focus {
    border-color: var(--bs);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
  }

  .fw {
    position: relative
  }

  .fw .fi {
    padding-right: 2.7rem
  }

  .fic {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm);
    cursor: pointer;
    font-size: .85rem
  }

  /* ─── BUTTONS ─── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .78rem 1.2rem;
    background: var(--bg);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    border: none;
    border-radius: var(--rb);
    cursor: pointer;
    transition: opacity .2s, transform .14s;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
    font-family: 'DM Sans', sans-serif;
    width: 100%
  }

  .btn:hover {
    opacity: .9;
    transform: translateY(-1px)
  }

  .btn:active {
    transform: translateY(0)
  }

  .btn.w-auto {
    width: auto
  }

  .btn.sm {
    padding: .5rem .95rem;
    font-size: .8rem
  }

  .btn.xs {
    padding: .38rem .75rem;
    font-size: .74rem
  }

  .btn.danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 14px rgba(220, 38, 38, .28)
  }

  .btn.success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 4px 14px rgba(34, 197, 94, .28)
  }

  .btn-g {
    background: none;
    border: none;
    color: var(--bs);
    font-weight: 600;
    cursor: pointer;
    font-size: .87rem;
    font-family: 'DM Sans', sans-serif
  }

  .btn-g:hover {
    text-decoration: underline
  }

  .btn-o {
    background: none;
    border: 1.5px solid var(--bs);
    color: var(--bs);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--rb);
    padding: .55rem 1rem;
    font-size: .82rem;
    font-family: 'DM Sans', sans-serif;
    transition: background .18s, color .18s;
    display: inline-flex;
    align-items: center;
    justify-content: center
  }

  .btn-o:hover {
    background: var(--bs);
    color: #fff
  }

  .btn-o.sm {
    padding: .42rem .8rem;
    font-size: .76rem
  }

  /* ─── BADGES ─── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700
  }

  .bok {
    background: var(--ok2);
    color: var(--ok)
  }

  .ber {
    background: var(--er2);
    color: var(--er)
  }

  .bwn {
    background: var(--wn2);
    color: var(--wn)
  }

  .bin {
    background: var(--in2);
    color: var(--in)
  }

  .bgr {
    background: #f1f5f9;
    color: #475569
  }

  /* ─── DASHBOARD SHELL ─── */
  .dash {
    display: flex;
    width: 100%;
    min-height: 100vh
  }

  /* SIDEBAR */
  .sb {
    width: var(--sw);
    background: var(--sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform .3s;
    overflow-y: auto
  }

  .sb-brand {
    padding: 1.3rem 1.35rem .85rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0
  }

  .sb-logo {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff
  }

  .sb-logo span {
    opacity: .5
  }

  .sb-sub {
    font-size: .63rem;
    color: rgba(255, 255, 255, .3);
    margin-top: 1px
  }

  .sb-nav {
    flex: 1;
    padding: .85rem 0
  }

  .sb-sec {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .26);
    padding: .7rem 1.3rem .22rem
  }

  .ni {
    display: flex;
    align-items: center;
    gap: .72rem;
    padding: .68rem 1.3rem;
    color: rgba(255, 255, 255, .6);
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s, color .18s;
    border-left: 3px solid transparent;
    user-select: none
  }

  .ni:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff
  }

  .ni.active {
    background: rgba(255, 255, 255, .13);
    color: #fff;
    border-left-color: var(--ba)
  }

  .ni i {
    width: 16px;
    text-align: center;
    font-size: .88rem;
    flex-shrink: 0
  }

  .nb2 {
    margin-left: auto;
    background: var(--ba);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 1px 6px
  }

  .sb-foot {
    padding: .9rem 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0
  }

  .sb-user {
    display: flex;
    align-items: center;
    gap: .68rem;
    cursor: pointer
  }

  .sb-user img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .18)
  }

  .sb-un {
    font-size: .82rem;
    font-weight: 600;
    color: #fff
  }

  .sb-ur {
    font-size: .68rem;
    color: rgba(255, 255, 255, .4)
  }

  /* MAIN */
  .main {
    margin-left: var(--sw);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: calc(100vw - var(--sw))
  }

  /* TOPBAR */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--card);
    border-bottom: 1px solid var(--bd);
    padding: 0 1.5rem;
    height: var(--tb);
    display: flex;
    align-items: center;
    gap: .8rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
    flex-shrink: 0
  }

  .tb-menu {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--inp);
    border: 1px solid var(--bd);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--t2);
    flex-shrink: 0
  }

  .tb-search {
    flex: 1;
    max-width: 300px;
    position: relative
  }

  .tb-search input {
    width: 100%;
    padding: .48rem .9rem .48rem 2.35rem;
    background: var(--inp);
    border: 1.5px solid var(--bd);
    border-radius: 50px;
    font-size: .83rem;
    color: var(--t1);
    outline: none;
    transition: border-color .2s;
    font-family: 'DM Sans', sans-serif
  }

  .tb-search input:focus {
    border-color: var(--ba)
  }

  .tb-search i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm);
    font-size: .78rem
  }

  .tb-r {
    display: flex;
    align-items: center;
    gap: .48rem;
    margin-left: auto
  }

  /* DROPDOWNS */
  .dd {
    position: relative
  }

  .ddm {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh2);
    z-index: 300;
    display: none;
    overflow: hidden;
    animation: dIn .15s ease;
    min-width: 200px
  }

 .mobile-min-card{
    min-width:330px;
}

@media (max-width:768px){
    .mobile-min-card{
        min-width:270px;
    }
}

  .ddm.open {
    display: block
  }

  @keyframes dIn {
    from {
      opacity: 0;
      transform: translateY(-6px)
    }

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

  .ib {
    position: relative;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: var(--inp);
    border: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--t2);
    font-size: .88rem;
    transition: background .18s;
    flex-shrink: 0
  }

  .ib:hover {
    background: #e2e8f0
  }

  .ib-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    background: var(--er);
    color: #fff;
    border-radius: 50%;
    font-size: .55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card)
  }

  .ddh {
    padding: .8rem 1rem .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bd)
  }

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

  .ddl {
    max-height: 300px;
    overflow-y: auto
  }

  .ddi {
    display: flex;
    align-items: flex-start;
    gap: .68rem;
    padding: .78rem 1rem;
    border-bottom: 1px solid var(--bd);
    cursor: pointer;
    transition: background .14s
  }

  .ddi:hover,
  .ddi.unread {
    background: var(--in2)
  }

  .ddi.unread {
    background: #eff6ff
  }

  .ddic {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    flex-shrink: 0
  }

  .dic-ok {
    background: var(--ok2);
    color: var(--ok)
  }

  .dic-er {
    background: var(--er2);
    color: var(--er)
  }

  .dic-in {
    background: var(--in2);
    color: var(--in)
  }

  .dic-wn {
    background: var(--wn2);
    color: var(--wn)
  }

  .ddi-t {
    font-size: .8rem;
    font-weight: 600
  }

  .ddi-d {
    font-size: .71rem;
    color: var(--t2);
    margin-top: 1px
  }

  .ddi-tm {
    font-size: .66rem;
    color: var(--tm);
    margin-top: 2px
  }

  .ddi-dot {
    width: 6px;
    height: 6px;
    background: var(--bs);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    margin-top: 6px
  }

  .ddf {
    padding: .6rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bs);
    cursor: pointer
  }

  .ddf:hover {
    background: var(--inp)
  }

  .lang-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: 50px;
    background: var(--inp);
    border: 1px solid var(--bd);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--t2);
    flex-shrink: 0
  }

  .lang-btn:hover {
    background: #e2e8f0
  }

  .lopt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .95rem;
    font-size: .82rem;
    cursor: pointer;
    transition: background .14s
  }

  .lopt:hover {
    background: var(--inp)
  }

  .lopt.active {
    font-weight: 700;
    color: var(--bs)
  }

  .pb {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    padding: .25rem .55rem .25rem .25rem;
    border-radius: 50px;
    border: 1px solid var(--bd);
    background: var(--inp);
    flex-shrink: 0
  }

  .pb:hover {
    background: #e2e8f0
  }

  .pb img {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    object-fit: cover
  }

  .pb .pn {
    font-size: .78rem;
    font-weight: 600
  }

  .pm-top {
    display: flex;
    align-items: center;
    gap: .72rem;
    padding: .95rem 1rem;
    border-bottom: 1px solid var(--bd)
  }

  .pm-top img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
  }

  .pm-top .pn {
    font-size: .86rem;
    font-weight: 700
  }

  .pm-top .pe {
    font-size: .71rem;
    color: var(--t2)
  }

  .pmi {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .67rem 1rem;
    font-size: .82rem;
    cursor: pointer;
    transition: background .14s;
    color: var(--t1)
  }

  .pmi:hover {
    background: var(--inp)
  }

  .pmi i {
    width: 14px;
    text-align: center;
    color: var(--t2)
  }

  .pmi.danger {
    color: var(--er)
  }

  .pmi.danger i {
    color: var(--er)
  }

  /* SECTIONS */
  .sec {
    padding: 1.5rem;
    flex: 1;
    display: none;
    width: 100%
  }

  .sec.active {
    display: block
  }

  .pg-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.35rem
  }

  .pg-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 800
  }

  .pg-sub {
    font-size: .8rem;
    color: var(--t2);
    margin-top: 2px
  }

  .card {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden
  }

  .ch {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem
  }

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

  .sa {
    font-size: .73rem;
    color: var(--bs);
    font-weight: 600;
    cursor: pointer
  }

  .sa:hover {
    text-decoration: underline
  }

  /* ACCOUNT SLIDER */
  .sl-shell {
    position: relative
  }

  .sl-track {
    display: flex;
    overflow: hidden;
    border-radius: var(--r)
  }

  .slide {
    min-width: 100%;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1)
  }

  .ac {
    border-radius: var(--r);
    padding: 1.45rem 1.6rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer
  }

  .ac::before {
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    top: -75px;
    right: -55px
  }

  .ac::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    bottom: -35px;
    left: 45px
  }

  .ac-type {
    font-size: .78rem;
    font-weight: 600;
    opacity: .82;
    position: relative;
    z-index: 1
  }

  .ac-num {
    font-size: .76rem;
    opacity: .62;
    margin-top: .16rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    position: relative;
    z-index: 1
  }

  .ac-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.4rem;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 20px;
    padding: .22rem .7rem;
    font-size: .67rem;
    font-weight: 600;
    z-index: 1
  }

  .ac-amt {
    font-family: 'Syne', sans-serif;
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-top: .75rem;
    position: relative;
    z-index: 1
  }

  .ac-avail {
    font-size: .7rem;
    opacity: .66;
    margin-top: .1rem;
    position: relative;
    z-index: 1
  }

  .ac-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: .8rem
  }

  .ac-btn {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .26);
    color: #fff;
    padding: .38rem .85rem;
    border-radius: 50px;
    cursor: pointer;
    font-size: .74rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    font-family: 'DM Sans', sans-serif;
    transition: background .18s
  }

  .ac-btn:hover {
    background: rgba(255, 255, 255, .32)
  }

  .sl-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: .7rem
  }

  .sl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bd);
    cursor: pointer;
    transition: background .2s, width .2s
  }

  .sl-dot.active {
    background: var(--bs);
    width: 20px;
    border-radius: 4px
  }

  .sl-arr {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--t2);
    font-size: .72rem;
    box-shadow: var(--sh);
    transition: background .18s
  }

  .sl-arr:hover {
    background: #e2e8f0
  }

  /* STATS */
  .stat {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 1.05rem 1.25rem;
    box-shadow: var(--sh)
  }

  .sl2 {
    font-size: .7rem;
    font-weight: 700;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: .05em
  }

  .sv {
    font-family: 'Syne', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    margin-top: .25rem
  }

  .sc {
    font-size: .7rem;
    margin-top: .15rem
  }

  .sc.up {
    color: var(--ok)
  }

  .sc.dn {
    color: var(--er)
  }

  /* QUICK ACTIONS */
  .qa-g {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7rem
  }

  .qa {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: .85rem .65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    transition: box-shadow .2s, transform .14s;
    box-shadow: var(--sh)
  }

  .qa:hover {
    box-shadow: var(--sh2);
    transform: translateY(-2px)
  }

  .qa-i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--inp);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--bs)
  }

  .qa-l {
    font-size: .71rem;
    font-weight: 600;
    color: var(--t2);
    text-align: center
  }

  /* TRANSACTIONS */
  .txr {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--bd);
    transition: background .14s;
    cursor: pointer
  }

  .txr:last-child {
    border-bottom: none
  }

  .txr:hover {
    background: var(--inp)
  }

  .tx-ico {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0
  }

  .tx-ico.cr {
    background: var(--ok2);
    color: var(--ok)
  }

  .tx-ico.db {
    background: var(--er2);
    color: var(--er)
  }

  .tx-ico.pn {
    background: var(--wn2);
    color: var(--wn)
  }

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

  .tx-d {
    font-size: .69rem;
    color: var(--tm);
    margin-top: 2px
  }

  .tx-c {
    font-size: .66rem;
    color: var(--ba);
    font-weight: 600;
    margin-top: 1px
  }

  .tx-a {
    margin-left: auto;
    font-weight: 700;
    font-size: .88rem;
    text-align: right;
    flex-shrink: 0
  }

  .tx-a.cr {
    color: var(--ok)
  }

  .tx-a.db {
    color: var(--er)
  }

  .tx-s {
    font-size: .63rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-top: 2px;
    display: inline-block
  }

  .tx-s.ok {
    background: var(--ok2);
    color: var(--ok)
  }

  .tx-s.pn {
    background: var(--wn2);
    color: var(--wn)
  }

  .tx-s.er {
    background: var(--er2);
    color: var(--er)
  }

  /* CARDS VISUAL */
  .cc {
    width: 100%;
    max-width: 300px;
    height: 175px;
    border-radius: 17px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--sh2)
  }

  .cc::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    top: -60px;
    right: -50px
  }

  .cc::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    bottom: -22px;
    left: 25px
  }

  .cc-chip {
    width: 32px;
    height: 24px;
    background: linear-gradient(135deg, #f0c040, #c8900a);
    border-radius: 4px;
    position: relative;
    z-index: 1
  }

  .cc-num {
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 3px;
    position: relative;
    z-index: 1
  }

  .cc-bot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 1
  }

  .cc-h {
    font-size: .68rem;
    opacity: .72;
    text-transform: uppercase;
    letter-spacing: .05em
  }

  .cc-e {
    font-size: .68rem;
    opacity: .72
  }

  .cc-net {
    font-size: 1.6rem;
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    opacity: .85;
    z-index: 1
  }

  /* BILL CATEGORIES */
  .bc {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 1rem .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: box-shadow .2s, transform .14s;
    box-shadow: var(--sh);
    text-align: center
  }

  .bc:hover {
    box-shadow: var(--sh2);
    transform: translateY(-2px)
  }

  .bc-i {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem
  }

  .bc-l {
    font-size: .73rem;
    font-weight: 600;
    color: var(--t2)
  }

  /* BENE */
  .bcard {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    padding: 1.05rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow: var(--sh);
    transition: box-shadow .18s
  }

  .bcard:hover {
    box-shadow: var(--sh2)
  }

  .bcard img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--bd)
  }

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

  .b-b {
    font-size: .74rem;
    color: var(--t2)
  }

  .b-a {
    font-size: .7rem;
    color: var(--tm);
    margin-top: 2px
  }

  .mini-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    cursor: pointer
  }

  .mini-b img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--bd);
    transition: border-color .18s
  }

  .mini-b:hover img {
    border-color: var(--ba)
  }

  .mini-b .mn {
    font-size: .69rem;
    font-weight: 600;
    text-align: center
  }

  .add-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--inp);
    border: 2px dashed var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--tm);
    cursor: pointer;
    transition: border-color .18s, color .18s
  }

  .add-circle:hover {
    border-color: var(--ba);
    color: var(--ba)
  }

  /* SPEND CHART */
  .bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 75px
  }

  .bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--bg);
    opacity: .62;
    transition: opacity .18s
  }

  .bar:hover,
  .bar.hi {
    opacity: 1
  }

  .bar-l {
    display: flex;
    gap: 6px;
    margin-top: .35rem
  }

  .bar-l span {
    flex: 1;
    font-size: .62rem;
    color: var(--tm);
    text-align: center
  }

  /* ─── NOTIFICATIONS PAGE ─── */
  .notif-pg-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--bd);
    cursor: pointer;
    transition: background .14s
  }

  .notif-pg-item:hover {
    background: var(--inp)
  }

  .notif-pg-item.unread {
    background: #eff6ff
  }

  .notif-pg-item:last-child {
    border-bottom: none
  }

  .npi-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0
  }

  .npi-body {
    flex: 1;
    min-width: 0
  }

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

  .npi-desc {
    font-size: .78rem;
    color: var(--t2);
    margin-top: 2px;
    line-height: 1.45
  }

  .npi-time {
    font-size: .68rem;
    color: var(--tm);
    margin-top: 4px
  }

  .npi-dot {
    width: 8px;
    height: 8px;
    background: var(--bs);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px
  }

  /* ─── SUPPORT PAGE ─── */
  .chat-list-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--bd);
    cursor: pointer;
    transition: background .14s
  }

  .chat-list-item:hover,
  .chat-list-item.active {
    background: var(--inp)
  }

  .chat-list-item img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
  }

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

  .cli-preview {
    font-size: .74rem;
    color: var(--t2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px
  }

  .cli-time {
    font-size: .66rem;
    color: var(--tm);
    flex-shrink: 0
  }

  .cli-badge {
    background: var(--bs);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
  }

  /* Chat window */
  .chat-win {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--tb) - 2rem);
    min-height: 400px
  }

  .chat-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--bd);
    background: var(--card);
    flex-shrink: 0
  }

  .chat-header img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover
  }

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

  .chat-hstatus {
    font-size: .7rem;
    color: var(--ok)
  }

  .chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: #f0f4ff
  }

  .msg-row {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    max-width: 80%
  }

  .msg-row.user {
    flex-direction: row-reverse;
    margin-left: auto
  }

  .msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
  }

  .msg-bubble {
    padding: .6rem .9rem;
    border-radius: 14px;
    font-size: .83rem;
    line-height: 1.5;
    max-width: 320px;
    position: relative
  }

  .msg-row.admin .msg-bubble {
    background: var(--card);
    border: 1px solid var(--bd);
    border-bottom-left-radius: 4px;
    color: var(--t1)
  }

  .msg-row.user .msg-bubble {
    background: var(--bg);
    color: #fff;
    border-bottom-right-radius: 4px
  }

  .msg-name {
    font-size: .65rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--t2)
  }

  .msg-row.user .msg-name {
    text-align: right;
    color: rgba(255, 255, 255, .72)
  }

  .msg-time {
    font-size: .6rem;
    margin-top: 3px;
    opacity: .6
  }

  .msg-attach {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(0, 0, 0, .06);
    border-radius: 8px;
    padding: .45rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    margin-top: 4px;
    cursor: pointer
  }

  .msg-attach i {
    font-size: .9rem
  }

  /* Chat input bar */
  .chat-input-bar {
    border-top: 1px solid var(--bd);
    background: var(--card);
    padding: .75rem 1rem;
    flex-shrink: 0
  }

  .img-preview-strip {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem
  }

  .img-prev {
    position: relative;
    display: inline-block
  }

  .img-prev img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--bd);
    display: block
  }

  .img-prev .rm {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--er);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: .6rem;
    border: 2px solid var(--card)
  }

  .chat-input-row {
    display: flex;
    align-items: center;
    gap: .55rem
  }

  .chat-textarea {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--bd);
    border-radius: 22px;
    padding: .6rem 1rem;
    font-size: .84rem;
    font-family: 'DM Sans', sans-serif;
    background: var(--inp);
    outline: none;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.45
  }

  .chat-textarea:focus {
    border-color: var(--bs)
  }

  .chat-ico-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--inp);
    border: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--t2);
    flex-shrink: 0;
    transition: background .18s
  }

  .chat-ico-btn:hover {
    background: #e2e8f0
  }

  .chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: opacity .18s;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .3)
  }

  .chat-send:hover {
    opacity: .88
  }

  /* New ticket form */
  .ticket-form {
    max-width: 580px
  }

  /* ─── MODALS ─── */
  .modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    padding: 1rem
  }

  .modal.open {
    display: flex
  }

  .mbox {
    background: var(--card);
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    animation: mIn .18s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column
  }

  .mbox.wide {
    max-width: 540px
  }

  @keyframes mIn {
    from {
      opacity: 0;
      transform: scale(.94)
    }

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

  .mh {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0
  }

  .mh h3 {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 1rem
  }

  .mc {
    padding: 1.35rem;
    overflow-y: auto;
    flex: 1
  }

  .mclose {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--inp);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t2);
    font-size: .82rem
  }

  .dr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .58rem 0;
    border-bottom: 1px solid var(--bd)
  }

  .dr:last-child {
    border-bottom: none
  }

  .dl {
    font-size: .76rem;
    color: var(--t2)
  }

  .dv {
    font-size: .82rem;
    font-weight: 600;
    text-align: right
  }

  /* SEND STEPS */
  .steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
    gap: .3rem
  }

  .step-c {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 700;
    color: var(--tm);
    transition: all .28s
  }

  .step-c.done {
    background: var(--bs);
    border-color: var(--bs);
    color: #fff
  }

  .step-c.cur {
    border-color: var(--bs);
    color: var(--bs)
  }

  .step-ln {
    width: 46px;
    height: 2px;
    background: var(--bd);
    transition: background .28s
  }

  .step-ln.done {
    background: var(--bs)
  }

  .step-lb {
    font-size: .65rem;
    color: var(--tm);
    font-weight: 600;
    margin: 0 .25rem
  }

  /* SUCCESS */
  .sring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--ok2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
    font-size: 1.85rem;
    color: var(--ok);
    animation: pop .35s ease
  }

  @keyframes pop {
    from {
      transform: scale(.5);
      opacity: 0
    }

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

  /* TAB BAR */
  .tbar {
    display: flex;
    gap: .25rem;
    background: var(--inp);
    border-radius: 9px;
    padding: .25rem
  }

  .tbtn {
    padding: .4rem .88rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--t2);
    transition: background .18s, color .18s;
    font-family: 'DM Sans', sans-serif
  }

  .tbtn.active {
    background: var(--card);
    color: var(--bs);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07)
  }

  /* SEARCH INLINE */
  .si {
    position: relative
  }

  .si i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm);
    font-size: .76rem
  }

  .si input {
    padding: .5rem .9rem .5rem 2.2rem;
    background: var(--inp);
    border: 1.5px solid var(--bd);
    border-radius: 50px;
    font-size: .8rem;
    width: 100%;
    max-width: 250px;
    outline: none;
    font-family: 'DM Sans', sans-serif
  }

  .si input:focus {
    border-color: var(--ba)
  }

  /* TOAST */
  .toast {
    position: fixed;
    bottom: 1.3rem;
    right: 1.3rem;
    background: var(--t1);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    font-size: .81rem;
    font-weight: 500;
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    animation: tIn .2s ease;
    max-width: 90vw
  }

  .toast.show {
    display: flex;
    align-items: center;
    gap: .5rem
  }

  @keyframes tIn {
    from {
      opacity: 0;
      transform: translateY(10px)
    }

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

  /* MOBILE BOTTOM NAV */
  .mob-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mb);
    background: var(--card);
    border-top: 1px solid var(--bd);
    z-index: 100;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08)
  }

  .mn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: .55rem .5rem;
    cursor: pointer;
    color: var(--tm);
    font-size: .62rem;
    font-weight: 600;
    flex: 1;
    transition: color .18s;
    position: relative
  }

  .mn-item.active {
    color: var(--bs)
  }

  .mn-item i {
    font-size: 1.15rem
  }

  .mn-badge {
    position: absolute;
    top: .35rem;
    right: .8rem;
    min-width: 16px;
    height: 16px;
    background: var(--er);
    color: #fff;
    border-radius: 50%;
    font-size: .55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card);
    padding: 0 2px
  }

  /* MOBILE SIDEBAR OVERLAY */
  .sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 99
  }

  .sb-overlay.open {
    display: block
  }

  /* IMAGE LIGHTBOX */
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    z-index: 600;
    display: none;
    align-items: center;
    justify-content: center
  }

  .lightbox.open {
    display: flex
  }

  .lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
    object-fit: contain
  }

  .lightbox .lb-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem
  }

  /* ─── RESPONSIVE ─── */
  @media(max-width:900px) {
    .auth-l {
      display: none
    }

    .auth-r {
      padding: 2rem 1.25rem
    }
  }

  @media(max-width:768px) {
    :root {
      --sw: 0px
    }

    .sb {
      transform: translateX(-100%);
      width: 260px
    }

    .sb.open {
      transform: translateX(0)
    }

    .main {
      margin-left: 0;
      max-width: 100vw
    }

    .topbar {
      padding: 0 1rem
    }

    .tb-menu {
      display: flex
    }

    .tb-search {
      max-width: none;
      flex: 1
    }

    .lang-btn .lc-text,
    .pb .pn {
      display: none
    }

    .sec {
      padding: 1rem
    }

    .pg-h .btn {
      padding: .48rem .85rem;
      font-size: .78rem
    }

    .qa-g {
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem
    }

    .qa {
      padding: .7rem .5rem
    }

    .qa-i {
      width: 38px;
      height: 38px;
      font-size: 1rem
    }

    .qa-l {
      font-size: .65rem
    }

    .mob-nav {
      display: flex
    }

    .main {
      padding-bottom: var(--mb)
    }

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

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

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

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

    .bills-grid {
      grid-template-columns: repeat(3, 1fr) !important
    }

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

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

    .chat-layout {
      grid-template-columns: 1fr !important
    }

    .chat-list-panel {
      display: none
    }

    .chat-list-panel.show {
      display: block
    }

    .chat-win-panel {
      display: none
    }

    .chat-win-panel.show {
      display: block
    }

    .notif-items-grid {
      grid-template-columns: 1fr !important
    }

    .chat-win {
      height: calc(100vh - var(--tb) - var(--mb) - 1.5rem)
    }
  }

  @media(max-width:480px) {
    .qa-g {
      grid-template-columns: repeat(4, 1fr)
    }

    .bills-grid {
      grid-template-columns: repeat(2, 1fr) !important
    }

    .auth-card {
      max-width: 100%
    }

    .ac-amt {
      font-size: 1.6rem
    }

    .pg-title {
      font-size: 1.15rem
    }

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

    .msg-bubble {
      font-size: .8rem
    }
  }


  /* create account */
  .plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
  }

  .plan-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #eef1f5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
    transition: .25s ease;
  }

  .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
  }

  .plan-header {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    text-align: center;
    color: #fff;
  }

  .plan-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
  }

  .plan-header p {
    margin-top: .45rem;
    font-size: .84rem;
    opacity: .9;
    line-height: 1.5;
  }

  .plan-body {
    padding: 1.5rem;
  }

  .plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
  }

  .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    color: #374151;
    line-height: 1.5;
  }

  .plan-features li i {
    color: #16a34a;
    font-size: 1rem;
    margin-top: 2px;
  }

  .plan-btn {
    width: 100%;
    margin-top: 1.5rem;
    border: none;
    border-radius: 14px;
    background: #2563eb;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    padding: .9rem 1rem;
    cursor: pointer;
    transition: .2s ease;
  }

  .plan-btn:hover {
    background: #1d4ed8;
  }

  .plan-exists {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #ecfdf5;
    color: #15803d;
    padding: .9rem 1rem;
    border-radius: 14px;
    font-size: .86rem;
    font-weight: 500;
  }

  .empty-plan {
    grid-column: 1/-1;
    background: #fff;
    border: 1px dashed #dbe2ea;
    border-radius: 24px;
    padding: 4rem 1.5rem;
    text-align: center;
  }

  .empty-icon {
    width: 70px;
    height: 70px;
    margin: auto;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .empty-icon i {
    font-size: 2rem;
    color: #9ca3af;
  }

  .empty-plan h5 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
  }

  .empty-plan p {
    margin-top: .55rem;
    color: #6b7280;
    font-size: .92rem;
  }


  /* ─── PIN INPUT ─── */
  .pin-modal-header {
    text-align: center;
    padding: 1.4rem 1.4rem .8rem;
    border-bottom: 1px solid var(--bd);
  }

  .pin-lock-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
    box-shadow: 0 4px 18px rgba(37, 99, 235, .3);
  }

  .pin-lock-icon i {
    font-size: 1.4rem;
    color: #fff
  }

  .pin-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 800
  }

  .pin-subtitle {
    font-size: .78rem;
    color: var(--t2);
    margin-top: .3rem;
    line-height: 1.45
  }

  .pin-amount-badge {
    display: inline-block;
    background: var(--in2);
    color: var(--bs);
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    padding: .35rem 1.1rem;
    border-radius: 30px;
    margin-top: .55rem;
  }

  /* The 4 PIN boxes */
  .pin-grid {
    display: flex;
    gap: .9rem;
    justify-content: center;
    margin: 1.4rem 0 .5rem;
  }

  .pin-box {
    width: 56px;
    height: 62px;
    border: 2.5px solid var(--bd);
    border-radius: 14px;
    background: var(--inp);
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    color: var(--t1);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    caret-color: var(--bs);
    /* Start disabled */
  }

  .pin-box:disabled {
    background: #f8faff;
    color: var(--tm);
    cursor: not-allowed;
    opacity: .55;
  }

  .pin-box:focus {
    border-color: var(--bs);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
  }

  .pin-box.filled {
    border-color: var(--bs);
    background: #eff6ff;
    color: var(--bs);
  }

  .pin-box.error {
    border-color: var(--er);
    background: var(--er2);
    animation: pinShake .35s ease;
  }

  @keyframes pinShake {

    0%,
    100% {
      transform: translateX(0)
    }

    20% {
      transform: translateX(-6px)
    }

    40% {
      transform: translateX(6px)
    }

    60% {
      transform: translateX(-4px)
    }

    80% {
      transform: translateX(4px)
    }
  }

  .pin-dots {
    display: flex;
    gap: .65rem;
    justify-content: center;
    margin-bottom: 1.2rem;
  }

  .pin-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bd);
    background: transparent;
    transition: background .18s, border-color .18s, transform .15s;
  }

  .pin-dot.filled {
    background: var(--bs);
    border-color: var(--bs);
    transform: scale(1.15);
  }

  .pin-dot.error {
    background: var(--er);
    border-color: var(--er)
  }

  .pin-hint {
    font-size: .72rem;
    color: var(--tm);
    text-align: center;
    margin-bottom: 1rem
  }

  /* PIN keyboard (optional numpad display on mobile) */
  .pin-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: .5rem;
  }

  .pin-key {
    height: 52px;
    border-radius: 12px;
    background: var(--inp);
    border: 1px solid var(--bd);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .12s;
    font-family: 'Syne', sans-serif;
    color: var(--t1);
    user-select: none;
  }

  .pin-key:hover {
    background: #e2e8f0;
    transform: scale(.97)
  }

  .pin-key:active {
    transform: scale(.93)
  }

  .pin-key.del {
    background: var(--er2);
    color: var(--er);
    font-size: .95rem
  }

  .pin-key.empty {
    background: transparent;
    border: none;
    cursor: default
  }


  .pin-input {
    position: relative;
    z-index: 10;
    backdrop-filter: blur(12px);
    box-shadow:
      0 10px 25px rgba(15, 23, 42, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);

    width: 56px;
    height: 62px;
    border: 2.5px solid var(--bd);
    border-radius: 14px;
    background: var(--inp);
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    color: var(--t1);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    caret-color: var(--bs);
  }

  .pin-input:focus {

    border-color: #2563eb;

    background: #ffffff;

    transform: translateY(-3px) scale(1.02);

    box-shadow:
      0 0 0 6px rgba(37, 99, 235, 0.12),
      0 20px 35px rgba(37, 99, 235, 0.18);

  }

  .pin-input.filled {
    border-color: #2563eb;
    background: linear-gradient(180deg,
        #ffffff 0%,
        #eff6ff 100%);
    color: #2563eb;
  }

  .pin-glow {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at center,
        rgba(37, 99, 235, 0.15),
        transparent 70%);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .pin-input:focus+.pin-glow {
    opacity: 1;
  }

  .pin-input.error {
    border-color: #ef4444 !important;
    animation: shake .18s linear 3;
  }

  @keyframes shake {

    0% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-4px);
    }

    50% {
      transform: translateX(4px);
    }

    75% {
      transform: translateX(-4px);
    }

    100% {
      transform: translateX(0);
    }

  }

  @media (max-width: 480px) {

    .pin-input {

      width: 58px;
      height: 68px;

      font-size: 24px;

      border-radius: 20px;

    }

  }


  /* ── CARD INPUT ── */
  .c-inp {
    width: 100%;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text);
    font-size: .85rem;
    font-family: 'DM Sans', sans-serif;
    transition: border .22s;
  }

  .c-inp:focus {
    outline: none;
    border-color: var(--bp)
  }

  .c-inp::placeholder {
    color: var(--muted)
  }


  /* ── gateway Wrapper ── */
  .pg-wrap {
    padding: 8px 0 16px;
  }

  .pg-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
  }

  /* ── Scrollable row ── */
  .pg-scroll {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }

  .pg-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .pg-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .pg-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
  }

  /* ── Card base ── */
  .pg-card {
    flex: 0 0 200px;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 9px;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
    user-select: none;
  }

  .pg-card:hover {
    border-color: #c4b5fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
  }

  /* Active state — triggered by jQuery adding .active */
  .pg-card.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.04);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
  }

  /* ── Top row ── */
  .pg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* ── Avatar / logo box ── */
  .pg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 16px;
    color: #6b7280;
    flex-shrink: 0;
  }

  .pg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
  }

  /* ── Name + badge ── */
  .pg-name-wrap {
    flex: 1;
    min-width: 0;
  }

  .pg-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pg-cur {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: #f3f4f6;
    color: #6b7280;
    padding: 1px 5px;
    border-radius: 5px;
    border: 0.5px solid #e5e7eb;
    margin-left: 4px;
    vertical-align: middle;
  }

  .pg-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
    margin-top: 3px;
  }

  .pg-type.instant {
    background: #dcfce7;
    color: #166534;
  }

  .pg-type.manual {
    background: #fef9c3;
    color: #854d0e;
  }

  .pg-type-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
  }

  /* ── Status icon — styled by jQuery classes ── */
  .pg-status-icon {
    font-size: 16px;
    flex-shrink: 0;
    transition: color 0.18s ease;
  }

  /* Bootstrap text-warning override to match indigo theme (optional) */
  .pg-card.active .pg-status-icon {
    color: #6366f1 !important;
  }

  /* ── Footer stats ── */
  .pg-footer {
    border-top: 1px solid #f3f4f6;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    gap: 4px;
  }

  .pg-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
  }

  .pg-stat-label {
    font-size: 9px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .pg-stat-val {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
  }

  .pg-divider {
    width: 1px;
    background: #f3f4f6;
    align-self: stretch;
  }


  /* ================= INVALID INPUT ================= */

  .tw-invalid {

    border-color: #ef4444 !important;

    background: #fef2f2 !important;

    color: #991b1b !important;

    box-shadow:
      0 0 0 4px rgba(239, 68, 68, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.04);

    animation: inputShake .18s linear 2;

  }

  .tw-invalid:focus {

    border-color: #ef4444 !important;

    box-shadow:
      0 0 0 5px rgba(239, 68, 68, 0.12);

  }

  /* ================= ERROR TEXT ================= */

  .tw-error-message {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 8px;

    color: #dc2626;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.4;

  }

  .tw-error-message svg {

    width: 16px;
    height: 16px;

    flex-shrink: 0;

  }

  /* ================= SHAKE ================= */

  @keyframes inputShake {

    0% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-3px);
    }

    50% {
      transform: translateX(3px);
    }

    75% {
      transform: translateX(-3px);
    }

    100% {
      transform: translateX(0);
    }

  }


  /* ─── SUPPORT PAGE ─── */
  /* Support layout: fixed-height container so both panels fill screen */
  .sup-msgs-wrap {
    display: grid;
    gap: 1rem;
    /* subtract topbar + section padding + tabs row */
    height: calc(100vh - var(--tb) - 10.5rem);
    min-height: 460px;
  }

  /* Left panel — scrollable list */
  .chat-list-panel {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
    min-height: 0;
    /* important for nested flex scroll */
  }

  .chat-list-panel .cl-head {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bd);
    flex-shrink: 0;
  }

  .chat-list-panel .cl-head .cl-title {
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: .5rem
  }

  .cl-search {
    position: relative
  }

  .cl-search i {
    position: absolute;
    left: .72rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm);
    font-size: .74rem;
    pointer-events: none
  }

  .cl-search input {
    width: 100%;
    padding: .42rem .8rem .42rem 2.1rem;
    background: var(--inp);
    border: 1.5px solid var(--bd);
    border-radius: 50px;
    font-size: .78rem;
    font-family: 'DM Sans', sans-serif;
    outline: none
  }

  .cl-search input:focus {
    border-color: var(--ba)
  }

  .cl-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0
  }

  /* Chat list items */
  .cli {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--bd);
    cursor: pointer;
    transition: background .14s
  }

  .cli:last-child {
    border-bottom: none
  }

  .cli:hover {
    background: var(--inp)
  }

  .cli.active {
    background: #eff6ff;
    border-right: 3px solid var(--bs)
  }

  .cli img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--bd)
  }

  .cli-body {
    flex: 1;
    min-width: 0
  }

  .cli-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem
  }

  .cli-name {
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .cli-time {
    font-size: .63rem;
    color: var(--tm);
    flex-shrink: 0
  }

  .cli-preview {
    font-size: .72rem;
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px
  }

  .cli-badge {
    background: var(--bs);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    border-radius: 50%;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 2px
  }

  /* Right panel — chat window, strictly column flex */
  .chat-win-panel {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r);
    box-shadow: var(--sh);
    overflow: hidden;
    min-height: 0;
  }

  /* Placeholder when no chat selected */
  .chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--tm);
    padding: 2rem;
    text-align: center
  }

  /* Actual chat layout inside the panel */
  .chat-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0
  }

  /* Chat header bar */
  .chat-hdr {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--bd);
    background: var(--card);
    flex-shrink: 0;
  }

  .chat-hdr img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
  }

  .chat-hdr .ch-name {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2
  }

  .chat-hdr .ch-status {
    font-size: .68rem;
    color: var(--ok)
  }

  .chat-hdr .ch-role {
    font-size: .68rem;
    color: var(--tm)
  }

  /* Messages scroll area — this MUST have flex:1 and overflow-y:auto */
  .chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    background: #f0f4ff;
    min-height: 0;
    /* critical for flex scroll */
  }

  /* Bubbles */
  .msg-row {
    display: flex;
    gap: .55rem;
    align-items: flex-end;
    max-width: 75%
  }

  .msg-row.user {
    flex-direction: row-reverse;
    margin-left: auto
  }

  .msg-av {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
  }

  .msg-wrap {
    display: flex;
    flex-direction: column
  }

  .msg-name {
    font-size: .63rem;
    font-weight: 700;
    color: var(--t2);
    margin-bottom: 2px
  }

  .msg-row.user .msg-name {
    text-align: right;
    color: rgba(37, 99, 235, .7)
  }

  .msg-bubble {
    padding: .58rem .88rem;
    border-radius: 16px;
    font-size: .82rem;
    line-height: 1.52;
    word-break: break-word;
    position: relative
  }

  .msg-row.admin .msg-bubble {
    background: #fff;
    border: 1px solid var(--bd);
    border-bottom-left-radius: 4px;
    color: var(--t1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05)
  }

  .msg-row.user .msg-bubble {
    background: var(--bg);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .25)
  }

  .msg-time {
    font-size: .59rem;
    opacity: .58;
    margin-top: 3px;
    display: block
  }

  .msg-row.user .msg-time {
    text-align: right
  }

  .msg-img {
    width: 100%;
    max-width: 260px;
    max-height: 300px;
    object-fit: cover;
    border-radius: 14px;
    margin-top: .45rem;
    cursor: pointer;
    display: block;
  }

  @media(max-width:768px) {

    .msg-img {
      max-width: 100%;
      max-height: 220px;
      border-radius: 12px;
    }

  }

  .msg-file {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: rgba(0, 0, 0, .07);
    border-radius: 8px;
    padding: .4rem .65rem;
    font-size: .73rem;
    font-weight: 600;
    margin-top: 4px;
    cursor: pointer
  }

  .msg-file i {
    font-size: .85rem
  }

  /* Date divider */
  .msg-date-divider {
    text-align: center;
    font-size: .68rem;
    color: var(--tm);
    font-weight: 600;
    margin: .25rem 0;
    position: relative
  }

  .msg-date-divider::before,
  .msg-date-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--bd)
  }

  .msg-date-divider::before {
    left: 0
  }

  .msg-date-divider::after {
    right: 0
  }

  /* Typing indicator */
  .typing-dot {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    padding: .45rem .75rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--bd)
  }

  .typing-dot span {
    width: 6px;
    height: 6px;
    background: var(--tm);
    border-radius: 50%;
    animation: blink 1.2s infinite
  }

  .typing-dot span:nth-child(2) {
    animation-delay: .2s
  }

  .typing-dot span:nth-child(3) {
    animation-delay: .4s
  }

  @keyframes blink {

    0%,
    60%,
    100% {
      opacity: .25
    }

    30% {
      opacity: 1
    }
  }

  /* ── Image preview strip above input ── */
  .img-preview-strip {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem 1rem .0rem;
    background: var(--card);
    border-top: 1px dashed var(--bd);
  }

  .img-prev {
    position: relative;
    display: inline-block
  }

  .img-prev img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--bd);
    display: block
  }

  .img-prev .file-prev {
    width: 64px;
    height: 64px;
    background: var(--in2);
    border-radius: 8px;
    border: 2px solid var(--bd);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: .58rem;
    color: var(--in);
    font-weight: 700;
    text-align: center;
    padding: 4px;
    word-break: break-all
  }

  .img-prev .rm {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    background: var(--er);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: .55rem;
    border: 1.5px solid var(--card)
  }

  /* ── Chat input bar ── */
  .chat-input-bar {
    border-top: 1px solid var(--bd);
    background: var(--card);
    padding: .7rem .85rem .75rem;
    flex-shrink: 0;
  }

  .chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem
  }

  /* Attachment / image / emoji buttons */
  .cht-act {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--inp);
    border: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--t2);
    flex-shrink: 0;
    transition: background .18s, color .18s;
    font-size: .88rem;
  }

  .cht-act:hover {
    background: var(--in2);
    color: var(--bs)
  }

  .cht-act.img-btn {
    color: var(--bs);
    background: var(--in2);
    border-color: var(--ba)
  }

  /* Textarea */
  .chat-ta {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--bd);
    border-radius: 20px;
    padding: .52rem .95rem;
    font-size: .84rem;
    font-family: 'DM Sans', sans-serif;
    background: var(--inp);
    outline: none;
    min-height: 36px;
    max-height: 110px;
    overflow-y: auto;
    line-height: 1.45;
    transition: border-color .18s;
  }

  .chat-ta:focus {
    border-color: var(--bs);
    background: #fff
  }

  /* Send button */
  .chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .35);
    transition: opacity .18s, transform .14s;
    font-size: .85rem;
  }

  .chat-send-btn:hover {
    opacity: .88;
    transform: scale(1.06)
  }

  .chat-send-btn:active {
    transform: scale(.96)
  }

  /* Mobile: stack panels */
  @media(max-width:768px) {
    .sup-msgs-wrap {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 0;
    }

    .chat-list-panel {
      height: auto;
      max-height: none
    }

    .chat-list-panel.mob-hide {
      display: none
    }

    .chat-win-panel {
      height: calc(100vh - var(--tb) - var(--mb) - 3rem);
      min-height: 350px
    }

    .chat-win-panel.mob-hide {
      display: none
    }
  }

  /* New ticket form */
  .ticket-form {
    max-width: 600px
  }