/* ============ Design Tokens ============ */
    :root {
      --bg: #F5F6F8;
      --card: #FFFFFF;
      --line: #E7E9EE;
      --line2: #EFF1F5;
      --ink: #101828;
      --mut: #5D6B82;
      --faint: #98A2B3;
      --acc: #0E7A6E;
      --acc-d: #0A5F55;
      --acc-soft: #E7F3F1;
      --acc-ink: #0B4F47;
      --dark: #0B1524;
      --dark-2: #101E33;
      --dark-line: #1D2C44;
      --red: #D92D20;
      --ok: #12805C;
      --warn: #B25E09;
      --info: #2E6BE6;
      --orange: #C2410C;
      --r: 14px;
      --r-s: 9px;
      --sh: 0 1px 2px rgba(16, 24, 40, .05);
      --sbw: 246px;
    }

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

    html,
    body {
      height: 100%
    }

    body {
      font-family: 'Vazirmatn', Tahoma, sans-serif;
      background: var(--bg);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased
    }

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

    button {
      font-family: inherit;
      font-size: inherit;
      cursor: pointer;
      border: none;
      background: none;
      color: inherit
    }

    input,
    textarea,
    select {
      font-family: inherit;
      font-size: inherit;
      color: inherit
    }

    svg.lucide {
      width: 18px;
      height: 18px;
      stroke-width: 2;
      flex: none
    }

    svg.ic-s {
      width: 15px;
      height: 15px
    }

    svg.ic-lg {
      width: 24px;
      height: 24px
    }

    ::placeholder {
      color: var(--faint)
    }

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

    ::-webkit-scrollbar-thumb {
      background: #D3D8E0;
      border-radius: 8px
    }

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

    /* ============ Layout ============ */
    .app {
      display: grid;
      grid-template-columns: var(--sbw) 1fr;
      height: 100vh;
      transition: grid-template-columns .25s ease;
      overflow: hidden
    }

    .app.sb-c {
      grid-template-columns: 74px 1fr
    }

    .app-body {
      display: flex;
      flex-direction: column;
      min-width: 0;
      height: 100vh
    }

    .page {
      flex: 1;
      overflow-y: auto;
      padding: 26px 28px 90px
    }

    @media(max-width:900px) {
      .page {
        padding: 18px 16px 96px
      }
    }

    /* ============ Sidebar ============ */
    .sb {
      background: var(--dark);
      color: #93A1B8;
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    .sb-in {
      width: var(--sbw);
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: width .25s ease
    }

    .sb-c .sb-in {
      width: 74px
    }

    .sb-logo {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 18px 10px 16px;
      border-bottom: 1px solid var(--dark-line);
      margin-bottom: 12px
    }

    .sb-c .sb-logo {
      justify-content: center;
      padding-inline: 0
    }

    .logo-m {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      background: var(--acc);
      color: #fff;
      display: grid;
      place-items: center;
      flex: none;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset
    }

    .sb-c .logo-t {
      display: none
    }

    .logo-t b {
      color: #F2F6F9;
      font-size: 14.5px;
      font-weight: 800;
      display: block;
      line-height: 1.4
    }

    .logo-t span {
      font-size: 10.5px;
      color: #5F7292;
      letter-spacing: .4px;
      display: block
    }

    .sb-nav {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-bottom: 10px
    }

    .sb-nav::-webkit-scrollbar {
      width: 0
    }

    .sb-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9.5px 12px;
      border-radius: 10px;
      color: #93A1B8;
      position: relative;
      white-space: nowrap;
      transition: .15s
    }

    .sb-item:hover {
      color: #DCE4EE;
      background: rgba(255, 255, 255, .04)
    }

    .sb-item.active {
      color: #EAF2F0;
      background: rgba(14, 122, 110, .16)
    }

    .sb-item.active::before {
      content: "";
      position: absolute;
      inset-inline-start: -12px;
      top: 8px;
      bottom: 8px;
      width: 3px;
      border-radius: 3px;
      background: var(--acc)
    }

    .sb-c .sb-item {
      justify-content: center;
      padding-inline: 0
    }

    .sb-c .sb-t,
    .sb-c .sb-badge {
      display: none
    }

    .sb-badge {
      margin-inline-start: auto;
      background: var(--acc);
      color: #fff;
      font-size: 10.5px;
      font-weight: 700;
      min-width: 20px;
      height: 20px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      padding: 0 6px
    }

    .sb-sec {
      font-size: 10.5px;
      color: #4A5B77;
      padding: 14px 12px 5px;
      letter-spacing: .5px
    }

    .sb-c .sb-sec {
      text-align: center;
      padding-inline: 0
    }

    .sb-foot {
      border-top: 1px solid var(--dark-line);
      padding: 12px 6px 14px
    }

    .sb-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 8px;
      border-radius: 10px
    }

    .sb-user:hover {
      background: rgba(255, 255, 255, .04)
    }

    .sb-c .sb-user {
      justify-content: center;
      padding-inline: 0
    }

    .sb-u-t {
      min-width: 0;
      flex: 1
    }

    .sb-c .sb-u-t,
    .sb-c .sb-out {
      display: none
    }

    .sb-u-t b {
      display: block;
      color: #E5EBF3;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .sb-u-t span {
      font-size: 11px;
      color: #5F7292;
      display: block
    }

    .sb-out {
      color: #93A1B8;
      padding: 8px;
      border-radius: 8px
    }

    .sb-out:hover {
      color: #F8B4B4;
      background: rgba(217, 45, 32, .12)
    }

    .sb-c .sb-out {
      display: grid;
      place-items: center
    }

    /* ============ Topbar ============ */
    .top {
      height: 62px;
      background: var(--card);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 20px;
      flex: none;
      position: relative;
      z-index: 30
    }

    .ic-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: var(--mut);
      position: relative;
      transition: .15s
    }

    .ic-btn:hover {
      background: var(--line2);
      color: var(--ink)
    }

    .bell b {
      position: absolute;
      top: 4px;
      inset-inline-start: 4px;
      background: var(--red);
      color: #fff;
      font-size: 9.5px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      padding: 0 4px;
      border: 2px solid #fff
    }

    .bell b.pulse {
      animation: bpulse .6s ease
    }

    @keyframes bpulse {
      0% {
        transform: scale(.4)
      }

      60% {
        transform: scale(1.25)
      }

      100% {
        transform: scale(1)
      }
    }

    .search {
      flex: 1;
      max-width: 560px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 9px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 0 13px;
      height: 40px;
      color: var(--faint);
      transition: .15s
    }

    .search:focus-within {
      border-color: var(--acc);
      box-shadow: 0 0 0 3px var(--acc-soft);
      color: var(--acc)
    }

    .search input {
      flex: 1;
      border: none;
      outline: none;
      background: none;
      height: 100%
    }

    .search kbd {
      font-family: inherit;
      font-size: 10.5px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 1px 7px;
      color: var(--faint)
    }

    .pop {
      position: absolute;
      top: calc(100% + 8px);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--r);
      box-shadow: 0 12px 40px -8px rgba(16, 24, 40, .18);
      display: none;
      z-index: 60;
      overflow: hidden;
      animation: pin .16s ease
    }

    .pop.open {
      display: block
    }

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

      to {
        opacity: 1;
        transform: none
      }
    }

    .search-pop {
      inset-inline: 0;
      max-height: 420px;
      overflow-y: auto
    }

    .sp-g {
      font-size: 11px;
      color: var(--faint);
      padding: 10px 15px 4px;
      font-weight: 600
    }

    .sp-i {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 15px;
      transition: .12s
    }

    .sp-i:hover {
      background: var(--bg)
    }

    .sp-i small {
      color: var(--faint);
      margin-inline-start: auto;
      white-space: nowrap
    }

    .top-end {
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative
    }

    .pill {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 7px 12px;
      color: var(--mut);
      font-size: 12.5px;
      font-weight: 600;
      transition: .15s
    }

    .pill:hover {
      border-color: var(--acc);
      color: var(--acc)
    }

    .pill .bdot {
      margin: 0
    }

    .sub-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 16px;
      border-radius: 11px;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #0E7A6E 0%, #0d9488 50%, #10b981 100%);
      box-shadow: 0 8px 22px -10px rgba(14, 122, 110, .65);
      transition: transform .15s, box-shadow .15s;
    }

    .sub-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 26px -10px rgba(14, 122, 110, .8);
    }

    .sub-btn:active {
      transform: scale(.97);
    }

    .sub-btn::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
      transform: translateX(-100%);
      transition: transform .8s;
    }

    .sub-btn:hover::after {
      transform: translateX(100%);
    }

    .sub-btn svg {
      width: 15px;
      height: 15px;
    }

    .sub-btn .sub-t {
      display: inline;
    }

    @media (max-width: 900px) {
      .sub-btn {
        padding: 0 12px;
      }

      .sub-btn .sub-t {
        display: none;
      }
    }

    .me {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 5px 8px 5px 5px;
      border-radius: 10px;
      transition: .15s
    }

    .me:hover {
      background: var(--line2)
    }

    .me b {
      font-size: 13px;
      font-weight: 600
    }

    .me span {
      font-size: 11px;
      color: var(--faint);
      display: block;
      line-height: 1.3
    }

    .pop-role {
      inset-inline-end: 0;
      width: 230px;
      padding: 6px
    }

    .pop-notif {
      inset-inline-end: 0;
      width: 340px
    }

    .pn-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 15px;
      border-bottom: 1px solid var(--line2)
    }

    .pn-head b {
      font-size: 13.5px
    }

    .pn-head button {
      color: var(--acc);
      font-size: 12px;
      font-weight: 600
    }

    .pn-i {
      display: flex;
      gap: 11px;
      padding: 12px 15px;
      border-bottom: 1px solid var(--line2);
      cursor: pointer;
      transition: .12s
    }

    .pn-i:hover {
      background: var(--bg)
    }

    .pn-i:last-child {
      border-bottom: none
    }

    .pn-i.unread {
      background: #F4FAF9
    }

    .pn-ic {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      flex: none
    }

    .pn-t {
      min-width: 0
    }

    .pn-t b {
      font-size: 13px;
      display: block;
      line-height: 1.6
    }

    .pn-t span {
      font-size: 12px;
      color: var(--mut);
      display: block
    }

    .pn-t small {
      color: var(--faint);
      font-size: 11px
    }

    .pr-i {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 11px;
      border-radius: 9px;
      text-align: right;
      transition: .12s
    }

    .pr-i:hover {
      background: var(--bg)
    }

    .pr-i.on {
      background: var(--acc-soft)
    }

    .pr-i b {
      font-size: 13px;
      display: block;
      line-height: 1.4
    }

    .pr-i span {
      font-size: 11px;
      color: var(--faint)
    }

    .pr-i .chk {
      margin-inline-start: auto;
      color: var(--acc)
    }

    /* ============ Common ============ */
    .page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 20px;
      flex-wrap: wrap
    }

    .page-head h1 {
      font-size: 19px;
      font-weight: 800
    }

    .page-head p {
      color: var(--mut);
      font-size: 13px;
      margin-top: 2px
    }

    .ph-actions {
      display: flex;
      gap: 9px;
      flex-wrap: wrap
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 40px;
      padding: 0 17px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 13.5px;
      transition: .15s;
      white-space: nowrap
    }

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

    .btn-acc:hover {
      background: var(--acc-d)
    }

    .btn-line {
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink)
    }

    .btn-line:hover {
      border-color: var(--acc);
      color: var(--acc)
    }

    .btn-ghost {
      color: var(--mut)
    }

    .btn-ghost:hover {
      background: var(--line2);
      color: var(--ink)
    }

    .btn-danger {
      border: 1px solid #FEE4E2;
      color: var(--red);
      background: #FFF6F5
    }

    .btn-danger:hover {
      background: #FEE4E2
    }

    .btn-sm {
      height: 32px;
      padding: 0 12px;
      font-size: 12.5px;
      border-radius: 8px
    }

    .btn-ic {
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--mut);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: .15s
    }

    .btn-ic:hover {
      color: var(--acc);
      border-color: var(--acc)
    }

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

    .card-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 15px 18px;
      border-bottom: 1px solid var(--line2);
      flex-wrap: wrap
    }

    .card-h b {
      font-size: 14.5px;
      font-weight: 700
    }

    .card-h a,
    .card-h .lnk {
      font-size: 12.5px;
      color: var(--acc);
      font-weight: 600
    }

    .card-b {
      padding: 18px
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      white-space: nowrap
    }

    .bdot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex: none
    }

    .b-acc {
      background: var(--acc-soft);
      color: var(--acc-ink)
    }

    .b-ok {
      background: #E8F5EF;
      color: var(--ok)
    }

    .b-warn {
      background: #FCF2E4;
      color: var(--warn)
    }

    .b-info {
      background: #EAF0FE;
      color: var(--info)
    }

    .b-red {
      background: #FEECEB;
      color: var(--red)
    }

    .b-orange {
      background: #FCEDE4;
      color: var(--orange)
    }

    .b-mute {
      background: #F1F3F7;
      color: var(--mut)
    }

    .b-dark {
      background: var(--dark);
      color: #fff
    }

    .avatar {
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      color: #fff;
      font-weight: 700;
      background: var(--c, #35507C);
      flex: none;
      letter-spacing: 0
    }

    .plogo {
      border-radius: 11px;
      display: inline-grid;
      place-items: center;
      color: #fff;
      font-weight: 800;
      background: var(--c, #0E7A6E);
      flex: none
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      flex: none
    }

    .dot.on {
      background: #12B76A;
      box-shadow: 0 0 0 3px rgba(18, 183, 106, .18)
    }

    .dot.off {
      background: #C6CDD8
    }

    .tbl-w {
      overflow-x: auto
    }

    .tbl {
      width: 100%;
      border-collapse: collapse;
      min-width: 680px
    }

    .tbl th {
      font-size: 11.5px;
      color: var(--faint);
      font-weight: 600;
      text-align: right;
      padding: 11px 16px;
      border-bottom: 1px solid var(--line2);
      white-space: nowrap;
      background: #FAFBFC
    }

    .tbl td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--line2);
      font-size: 13px;
      vertical-align: middle
    }

    .tbl tr:last-child td {
      border-bottom: none
    }

    .tbl tbody tr {
      transition: .12s;
      cursor: default
    }

    .tbl tbody tr.click {
      cursor: pointer
    }

    .tbl tbody tr.click:hover {
      background: #F8FAFB
    }

    .cell-u {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0
    }

    .cell-u b {
      font-size: 13px;
      font-weight: 600;
      display: block;
      line-height: 1.5
    }

    .cell-u span {
      font-size: 11.5px;
      color: var(--faint);
      display: block;
      line-height: 1.4
    }

    .cell-p {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0
    }

    .cell-p b {
      font-size: 13.5px;
      font-weight: 700;
      display: block;
      line-height: 1.5;
      white-space: nowrap
    }

    .cell-p span {
      font-size: 11.5px;
      color: var(--faint);
      display: block;
      line-height: 1.4
    }

    .num {
      font-variant-numeric: tabular-nums
    }

    .field {
      margin-bottom: 15px
    }

    .lbl {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink);
      display: block;
      margin-bottom: 7px
    }

    .lbl i {
      color: var(--red);
      font-style: normal
    }

    .hint {
      font-size: 11.5px;
      color: var(--faint);
      margin-top: 5px
    }

    .field input[type=text],
    .field input[type=email],
    .field input[type=password],
    .field input[type=date],
    .field input[type=tel],
    .field textarea,
    .field select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      padding: 0 13px;
      height: 42px;
      outline: none;
      transition: .15s
    }

    .field textarea {
      height: auto;
      min-height: 96px;
      padding: 11px 13px;
      resize: vertical;
      line-height: 1.8
    }

    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: var(--acc);
      box-shadow: 0 0 0 3px var(--acc-soft)
    }

    .field select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: left 12px center
    }

    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px
    }

    .grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px
    }

    @media(max-width:760px) {

      .grid2,
      .grid3 {
        grid-template-columns: 1fr
      }
    }

    .chips {
      display: flex;
      gap: 7px;
      flex-wrap: wrap
    }

    .chip {
      border: 1px solid var(--line);
      background: var(--card);
      border-radius: 20px;
      padding: 5px 14px;
      font-size: 12.5px;
      color: var(--mut);
      font-weight: 500;
      transition: .15s;
      white-space: nowrap
    }

    .chip:hover {
      border-color: var(--acc);
      color: var(--acc)
    }

    .chip.on {
      background: var(--dark);
      border-color: var(--dark);
      color: #fff
    }

    .seg3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 4px;
      gap: 4px
    }

    .seg3 button {
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--mut);
      transition: .15s
    }

    .seg3 button.on {
      background: var(--card);
      color: var(--ink);
      box-shadow: var(--sh)
    }

    .empty {
      padding: 56px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px
    }

    .empty .e-ic {
      width: 64px;
      height: 64px;
      border-radius: 18px;
      background: var(--bg);
      display: grid;
      place-items: center;
      color: var(--faint);
      margin-bottom: 8px
    }

    .empty b {
      font-size: 15px
    }

    .empty p {
      color: var(--mut);
      font-size: 13px;
      max-width: 340px
    }

    .empty .btn {
      margin-top: 14px
    }

    .skel {
      background: linear-gradient(90deg, var(--line2) 25%, #F6F8FA 50%, var(--line2) 75%);
      background-size: 200% 100%;
      animation: shm 1.3s infinite;
      border-radius: 8px
    }

    @keyframes shm {
      from {
        background-position: 200% 0
      }

      to {
        background-position: -200% 0
      }
    }

    .sk-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 16px
    }

    .stat {
      padding: 19px;
      display: flex;
      gap: 15px;
      align-items: center
    }

    .stat .s-ic {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      flex: none
    }

    .stat b {
      font-size: 24px;
      font-weight: 800;
      display: block;
      line-height: 1.2
    }

    .stat span {
      font-size: 12.5px;
      color: var(--mut)
    }

    .mini-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-bottom: 20px
    }

    .mini {
      padding: 15px 19px;
      display: flex;
      align-items: center;
      gap: 11px;
      border-inline-start: 1px solid var(--line2)
    }

    .mini:first-child {
      border-inline-start: none
    }

    .mini b {
      font-size: 19px;
      font-weight: 800;
      display: block;
      line-height: 1.2
    }

    .mini span {
      font-size: 11.5px;
      color: var(--mut)
    }

    .stats {
      display: grid;
      gap: 10px;
      margin-bottom: 20px;
    }

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

    @media(max-width:1100px) {
      .stats,
      .stats.stats-3 {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:760px) {
      .stats,
      .stats.stats-3 {
        grid-template-columns: 1fr
      }

      .mini-stats {
        grid-template-columns: repeat(2, 1fr)
      }

      .mini:nth-child(3) {
        border-inline-start: none
      }

      .mini {
        border-top: 1px solid var(--line2)
      }
    }

    .hero {
      background: var(--dark);
      color: #E9EEF5;
      border-radius: 18px;
      padding: 26px 28px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 22px 22px
    }

    .hero h1 {
      font-size: 20px;
      font-weight: 800;
      color: #fff
    }

    .hero p {
      color: #9DAAC0;
      font-size: 13px;
      margin-top: 4px
    }

    .hero .qa {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap
    }

    .qcard {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 17px;
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: var(--card);
      transition: .18s;
      min-width: 200px
    }

    .qcard:hover {
      border-color: var(--acc);
      box-shadow: 0 6px 20px -8px rgba(14, 122, 110, .25);
      transform: translateY(-2px)
    }

    .qcard .q-ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--acc-soft);
      color: var(--acc-ink);
      display: grid;
      place-items: center;
      flex: none
    }

    .qcard b {
      font-size: 13.5px;
      display: block;
      line-height: 1.5
    }

    .qcard span {
      font-size: 11.5px;
      color: var(--faint)
    }

    .conv-mini {
      display: flex;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line2);
      cursor: pointer;
      transition: .12s
    }

    .conv-mini:last-child {
      border: none
    }

    .conv-mini:hover {
      background: #FAFBFC
    }

    .cm-msg {
      background: var(--line2);
      border-radius: 12px;
      border-bottom-right-radius: 4px;
      padding: 8px 13px;
      font-size: 12.5px;
      color: var(--ink);
      margin-top: 6px;
      display: inline-block;
      line-height: 1.7
    }

    /* ============ Chat ============ */
    .chat-page {
      display: grid;
      grid-template-columns: 296px 1fr 276px;
      height: 100%
    }

    .chat-page.no-list {
      grid-template-columns: 1fr 276px
    }

    .chat-page.no-info {
      grid-template-columns: 296px 1fr
    }

    .chat-page.no-list.no-info {
      grid-template-columns: 1fr
    }

    .chat-list {
      border-inline-end: 1px solid var(--line);
      background: var(--card);
      overflow-y: auto;
      min-height: 0
    }

    .cl-h {
      padding: 16px 16px 10px;
      position: sticky;
      top: 0;
      background: var(--card);
      z-index: 2
    }

    .cl-h b {
      font-size: 15.5px;
      font-weight: 800
    }

    .cl-h p {
      font-size: 11.5px;
      color: var(--faint)
    }

    .cl-item {
      display: flex;
      gap: 11px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--line2);
      cursor: pointer;
      transition: .12s;
      position: relative
    }

    .cl-item:hover {
      background: #FAFBFC
    }

    .cl-item.on {
      background: #F3FAF8;
      border-inline-end: 2px solid var(--acc)
    }

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

    .cl-top {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .cl-top b {
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .cl-top small {
      margin-inline-start: auto;
      color: var(--faint);
      font-size: 10.5px;
      white-space: nowrap
    }

    .cl-last {
      font-size: 12px;
      color: var(--mut);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 1px
    }

    .cl-last i {
      font-style: normal;
      color: var(--acc);
      font-weight: 600
    }

    .badge-un {
      background: var(--acc);
      color: #fff;
      font-size: 10.5px;
      font-weight: 700;
      min-width: 19px;
      height: 19px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      padding: 0 5px
    }

    .cl-foot {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 5px
    }

    .chat-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      background: var(--bg);
      position: relative
    }

    .chat-main.dropping::after {
      content: "فایل را اینجا رها کنید";
      position: absolute;
      inset: 14px;
      border: 2px dashed var(--acc);
      border-radius: 16px;
      background: rgba(232, 243, 241, .9);
      color: var(--acc-ink);
      font-weight: 700;
      display: grid;
      place-items: center;
      z-index: 5;
      pointer-events: none
    }

    .cm-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 20px;
      background: var(--card);
      border-bottom: 1px solid var(--line);
      flex: none;
      flex-wrap: wrap
    }

    .cm-h-t {
      min-width: 0;
      flex: 1
    }

    .cm-h-t b {
      font-size: 14.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap
    }

    .cm-h-t span {
      font-size: 12px;
      color: var(--mut);
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 1px;
      flex-wrap: wrap
    }

    .cm-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 22px 20px 12px;
      min-height: 0
    }

    .day-sep {
      text-align: center;
      margin: 14px 0
    }

    .day-sep span {
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--faint);
      font-size: 11px;
      padding: 3px 13px;
      border-radius: 20px
    }

    .msg {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
      animation: msgin .25s ease
    }

    @keyframes msgin {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .msg.me {
      flex-direction: row-reverse
    }

    .m-col {
      max-width: 74%;
      min-width: 0
    }

    .msg.me .m-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .m-name {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--mut);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .m-bubble {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      border-start-start-radius: 4px;
      padding: 10px 14px;
      font-size: 13.5px;
      line-height: 1.85;
      word-break: break-word;
      box-shadow: var(--sh)
    }

    .msg.me .m-bubble {
      background: var(--acc);
      border-color: var(--acc);
      color: #fff;
      border-radius: 14px;
      border-start-end-radius: 4px;
      border-start-start-radius: 14px
    }

    .m-meta {
      font-size: 10.5px;
      color: var(--faint);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .m-meta .ticks {
      color: var(--faint);
      display: inline-flex
    }

    .m-meta .ticks.seen {
      color: var(--acc)
    }

    .m-file {
      display: flex;
      align-items: center;
      gap: 9px;
      background: rgba(16, 24, 40, .05);
      border-radius: 9px;
      padding: 7px 11px;
      margin-top: 8px;
      font-size: 12.5px
    }

    .msg.me .m-file {
      background: rgba(255, 255, 255, .16)
    }

    .m-file span {
      opacity: .75;
      font-size: 11px
    }

    .m-img {
      max-width: 230px;
      border-radius: 10px;
      margin-top: 8px;
      display: block;
      border: 1px solid rgba(16, 24, 40, .08)
    }

    .typing {
      display: none;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px
    }

    .typing.on {
      display: flex
    }

    .typing .m-bubble {
      display: flex;
      gap: 5px;
      align-items: center;
      padding: 13px 16px
    }

    .t-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--faint);
      animation: tb 1.2s infinite
    }

    .t-dot:nth-child(2) {
      animation-delay: .15s
    }

    .t-dot:nth-child(3) {
      animation-delay: .3s
    }

    @keyframes tb {

      0%,
      60%,
      100% {
        transform: none;
        opacity: .4
      }

      30% {
        transform: translateY(-5px);
        opacity: 1
      }
    }

    .typing small {
      color: var(--faint);
      font-size: 11.5px
    }

    .composer {
      flex: none;
      background: var(--card);
      border-top: 1px solid var(--line);
      padding: 12px 16px;
      position: relative
    }

    .c-att {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 9px
    }

    .c-att:empty {
      display: none
    }

    .att-chip {
      display: flex;
      align-items: center;
      gap: 9px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 6px 11px;
      font-size: 12.5px;
      animation: msgin .2s ease
    }

    .att-chip img {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      object-fit: cover
    }

    .att-chip button {
      color: var(--faint);
      display: grid;
      place-items: center
    }

    .att-chip button:hover {
      color: var(--red)
    }

    .c-row {
      display: flex;
      align-items: flex-end;
      gap: 7px
    }

    .c-row .btn-ic {
      border: none;
      background: var(--bg);
      width: 40px;
      height: 40px;
      border-radius: 11px;
      flex: none
    }

    .c-row .btn-ic:hover {
      color: var(--acc);
      background: var(--acc-soft)
    }

    #composer-input {
      flex: 1;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--bg);
      padding: 10px 14px;
      outline: none;
      resize: none;
      max-height: 130px;
      line-height: 1.8;
      transition: .15s
    }

    #composer-input:focus {
      border-color: var(--acc);
      background: var(--card);
      box-shadow: 0 0 0 3px var(--acc-soft)
    }

    .send {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--acc);
      color: #fff;
      display: grid;
      place-items: center;
      flex: none;
      transition: .15s
    }

    .send:hover {
      background: var(--acc-d)
    }

    .emoji-pop {
      position: absolute;
      bottom: calc(100% + 8px);
      inset-inline-start: 0;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 12px 36px -8px rgba(16, 24, 40, .25);
      padding: 10px;
      display: none;
      grid-template-columns: repeat(8, 1fr);
      gap: 2px;
      z-index: 20;
      width: 288px
    }

    .emoji-pop.open {
      display: grid
    }

    .emoji-pop button {
      font-size: 19px;
      padding: 4px;
      border-radius: 8px;
      transition: .1s
    }

    .emoji-pop button:hover {
      background: var(--bg);
      transform: scale(1.15)
    }

    .chat-info {
      border-inline-start: 1px solid var(--line);
      background: var(--card);
      overflow-y: auto;
      min-height: 0
    }

    .ci-sec {
      padding: 16px;
      border-bottom: 1px solid var(--line2)
    }

    .ci-sec:last-child {
      border: none
    }

    .ci-sec h5 {
      font-size: 12px;
      color: var(--faint);
      font-weight: 600;
      margin-bottom: 12px
    }

    .kv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 5px 0;
      font-size: 12.5px
    }

    .kv span {
      color: var(--faint)
    }

    .kv b {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap
    }

    .ci-u {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 0
    }

    .ci-u b {
      font-size: 13px;
      display: block;
      line-height: 1.5
    }

    .ci-u span {
      font-size: 11px;
      color: var(--faint);
      display: block;
      line-height: 1.4
    }

    @media(max-width:1100px) {

      .chat-page,
      .chat-page.no-info {
        grid-template-columns: 280px 1fr
      }

      .chat-page.no-list,
      .chat-page.no-list.no-info {
        grid-template-columns: 1fr
      }

      .chat-info {
        display: none
      }

      .chat-page.info-open .chat-info {
        display: block;
        position: fixed;
        top: 62px;
        bottom: 0;
        inset-inline-end: 0;
        width: min(300px, 88vw);
        z-index: 45;
        box-shadow: 0 0 40px rgba(16, 24, 40, .2);
        animation: pin .2s ease
      }
    }

    @media(max-width:820px) {

      .chat-page,
      .chat-page.no-list,
      .chat-page.no-info,
      .chat-page.no-list.no-info {
        grid-template-columns: 1fr
      }

      .chat-list {
        display: block
      }

      .chat-main {
        display: none
      }

      .chat-page.conv-open .chat-list {
        display: none
      }

      .chat-page.conv-open .chat-main {
        display: flex
      }
    }

    /* Request page */
    .req-grid {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 18px;
      align-items: start
    }

    @media(max-width:1000px) {
      .req-grid {
        grid-template-columns: 1fr
      }
    }

    .req-head {
      padding: 20px 22px
    }

    .req-code {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .5px;
      background: var(--dark);
      color: #fff;
      padding: 3px 11px;
      border-radius: 8px
    }

    .rh-row {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      margin-top: 12px
    }

    .rh-row .sep {
      width: 1px;
      height: 16px;
      background: var(--line)
    }

    .pbar {
      height: 7px;
      border-radius: 7px;
      background: var(--line2);
      overflow: hidden;
      display: flex
    }

    .pbar i {
      height: 100%;
      display: block
    }

    .pleg {
      display: flex;
      gap: 16px;
      margin-top: 10px;
      flex-wrap: wrap
    }

    .pleg span {
      font-size: 11.5px;
      color: var(--mut);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .pleg .bdot {
      margin: 0
    }

    /* ============ Auth ============ */
    .auth {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(420px, 46%) 1fr
    }

    .a-brand {
      background: var(--dark);
      color: #DCE4EE;
      padding: 52px 56px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
      background-size: 24px 24px
    }

    .a-brand::after {
      content: "";
      position: absolute;
      inset-inline-start: -140px;
      bottom: -140px;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      border: 1px solid rgba(14, 122, 110, .35)
    }

    .a-b-logo {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .a-b-logo b {
      color: #fff;
      font-size: 16px;
      display: block;
      line-height: 1.4
    }

    .a-b-logo span {
      font-size: 11px;
      color: #5F7292;
      display: block;
      letter-spacing: .5px
    }

    .a-brand h2 {
      font-size: 25px;
      font-weight: 800;
      color: #fff;
      line-height: 1.7;
      margin-top: auto;
      margin-bottom: 14px;
      max-width: 420px
    }

    .a-brand>p {
      color: #9DAAC0;
      font-size: 13.5px;
      max-width: 400px;
      line-height: 2
    }

    .a-flow {
      margin: 34px 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      z-index: 2
    }

    .a-step {
      display: flex;
      gap: 15px;
      align-items: flex-start;
      position: relative;
      padding-bottom: 26px
    }

    .a-step:last-child {
      padding-bottom: 0
    }

    .a-step::before {
      content: "";
      position: absolute;
      inset-inline-start: 15px;
      top: 34px;
      bottom: 2px;
      width: 1.5px;
      background: var(--dark-line)
    }

    .a-step:last-child::before {
      display: none
    }

    .a-dot {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(14, 122, 110, .18);
      border: 1px solid rgba(14, 122, 110, .5);
      color: #5EEAD4;
      display: grid;
      place-items: center;
      flex: none;
      z-index: 1
    }

    .a-step b {
      color: #EDF2F8;
      font-size: 13.5px;
      display: block;
      line-height: 1.5
    }

    .a-step span {
      color: #8494AC;
      font-size: 12px;
      display: block;
      line-height: 1.7
    }

    .a-form {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 24px
    }

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

    .a-card h1 {
      font-size: 22px;
      font-weight: 800
    }

    .a-card>p {
      color: var(--mut);
      font-size: 13px;
      margin: 5px 0 26px
    }

    .demo-quick {
      margin-top: 26px;
      padding-top: 22px;
      border-top: 1px dashed var(--line)
    }

    .demo-quick p {
      font-size: 12px;
      color: var(--faint);
      margin-bottom: 11px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .dq {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px
    }

    .dq button {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 6px;
      text-align: center;
      transition: .15s;
      background: var(--card)
    }

    .dq button:hover {
      border-color: var(--acc);
      background: var(--acc-soft)
    }

    .dq b {
      font-size: 12px;
      display: block
    }

    .dq span {
      font-size: 10.5px;
      color: var(--faint)
    }

    .dq .avatar {
      margin-bottom: 7px
    }

    @media(max-width:880px) {
      .auth {
        grid-template-columns: 1fr
      }

      .a-brand {
        display: none
      }
    }

    .ok-msg {
      background: #E8F5EF;
      border: 1px solid #BCE3D3;
      color: var(--ok);
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 13px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-bottom: 18px
    }

    /* ============ Mobile ============ */
    .only-m {
      display: none
    }

    .backdrop {
      position: fixed;
      inset: 0;
      background: rgba(16, 24, 40, .45);
      z-index: 90;
      display: none
    }

    .backdrop.on {
      display: block;
      animation: fin .2s ease
    }

    @keyframes fin {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @media(max-width:900px) {
      .only-m {
        display: grid
      }

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

      .sb {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        width: min(280px, 84vw);
        z-index: 95;
        transform: translateX(-100%);
        transition: transform .25s ease
      }

      .sb.on {
        transform: none
      }

      .sb .sb-in {
        width: 100%
      }

      .sb-c .sb-t,
      .sb-c .sb-u-t,
      .sb-c .sb-badge,
      .sb-c .sb-sec {
        display: block
      }

      .sb-c .sb-item {
        justify-content: flex-start;
        padding-inline: 12px
      }

      .bnav {
        display: grid
      }

      .top {
        padding: 0 14px
      }

      .me .me-t {
        display: none
      }

      .pill {
        display: none
      }

      .search kbd {
        display: none
      }
    }

    .bnav {
      display: none;
      position: fixed;
      bottom: 0;
      inset-inline: 0;
      background: var(--card);
      border-top: 1px solid var(--line);
      z-index: 80;
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
      grid-template-columns: repeat(5, 1fr)
    }

    .bnav-i {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 7px 2px;
      border-radius: 10px;
      color: var(--faint);
      font-size: 10px;
      font-weight: 600
    }

    .bnav-i.on {
      color: var(--acc)
    }

    .bnav-i .nb {
      position: relative
    }

    .bnav-i .nb b {
      position: absolute;
      top: -5px;
      inset-inline-start: -9px;
      background: var(--acc);
      color: #fff;
      font-size: 9px;
      min-width: 15px;
      height: 15px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      padding: 0 3px
    }

    @media(max-width:560px) {
      .stats {
        grid-template-columns: 1fr
      }

      .mini-stats {
        grid-template-columns: 1fr 1fr
      }

      .page-head h1 {
        font-size: 17px
      }
    }

    .fade-in {
      animation: fdin .3s ease
    }

    @keyframes fdin {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* Timeline */
    .tl {
      position: relative;
      padding-inline-start: 22px
    }

    .tl::before {
      content: "";
      position: absolute;
      inset-inline-start: 7px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: var(--line);
      border-radius: 2px
    }

    .tl-i {
      position: relative;
      padding-bottom: 20px
    }

    .tl-i:last-child {
      padding-bottom: 2px
    }

    .tl-dot {
      position: absolute;
      inset-inline-start: -22px;
      top: 5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 3px solid var(--card);
      background: var(--faint);
      box-shadow: 0 0 0 2px var(--line)
    }

    .tl-i.hot .tl-dot {
      background: var(--acc);
      box-shadow: 0 0 0 2px var(--acc)
    }

    .tl-i b {
      font-size: 13px;
      font-weight: 600;
      display: block;
      line-height: 1.6
    }

    .tl-i span {
      font-size: 11.5px;
      color: var(--faint)
    }

    /* Files */
    .f-row {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--line2);
      transition: .12s;
      flex-wrap: wrap
    }

    .f-row:last-child {
      border: none
    }

    .f-row:hover {
      background: #FAFBFC
    }

    .f-ic {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      flex: none
    }

    .f-m b {
      font-size: 13px;
      font-weight: 600;
      display: block
    }

    .f-m span {
      font-size: 11.5px;
      color: var(--faint)
    }

    /* UserSelector */
    .usel {
      position: relative
    }

    .usel-btn {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      transition: .15s
    }

    .usel-btn:hover {
      border-color: var(--acc)
    }

    .usel-btn .ph {
      color: var(--faint)
    }

    .usel-pop {
      position: absolute;
      top: calc(100% + 6px);
      inset-inline: 0;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 12px 36px -8px rgba(16, 24, 40, .2);
      z-index: 40;
      max-height: 240px;
      overflow-y: auto;
      padding: 5px;
      display: none;
      animation: pin .15s ease
    }

    .usel-pop.open {
      display: block
    }

    .usel-i {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 10px;
      border-radius: 9px;
      text-align: right
    }

    .usel-i:hover {
      background: var(--bg)
    }

    .usel-i b {
      font-size: 13px;
      display: block;
      line-height: 1.5
    }

    .usel-i span {
      font-size: 11px;
      color: var(--faint);
      display: block;
      line-height: 1.3
    }

    /* Modal */
    .modal-back {
      position: fixed;
      inset: 0;
      background: rgba(16, 24, 40, .45);
      z-index: 150;
      display: grid;
      place-items: center;
      padding: 18px;
      animation: fin .2s ease;
      backdrop-filter: blur(2px)
    }

    .modal {
      background: var(--card);
      border-radius: 18px;
      width: 100%;
      max-width: 560px;
      max-height: 92vh;
      overflow-y: auto;
      animation: min .25s cubic-bezier(.2, .9, .3, 1.1)
    }

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

      to {
        opacity: 1;
        transform: none
      }
    }

    .modal-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px 0
    }

    .modal-h b {
      font-size: 16px;
      font-weight: 800
    }

    .modal-b {
      padding: 16px 22px 22px
    }

    /* Toast */
    #toast-root {
      position: fixed;
      bottom: 22px;
      inset-inline-start: 22px;
      z-index: 200;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 11px;
      background: var(--dark);
      color: #E8EDF4;
      padding: 13px 17px;
      border-radius: 13px;
      box-shadow: 0 10px 32px -6px rgba(16, 24, 40, .35);
      font-size: 13px;
      font-weight: 500;
      max-width: 360px;
      animation: tin .3s cubic-bezier(.2, .9, .3, 1.2)
    }

    .toast.out {
      animation: tout .3s ease forwards
    }

    .toast .t-ic {
      color: #5EEAD4;
      flex: none;
      display: grid;
      place-items: center
    }

    .toast.warn .t-ic {
      color: #FBBF24
    }

    @keyframes tin {
      from {
        opacity: 0;
        transform: translateY(16px) scale(.95)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes tout {
      to {
        opacity: 0;
        transform: translateY(10px)
      }
    }

    .tabs {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 22px;
      overflow-x: auto
    }

    .tab {
      padding: 11px 18px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--mut);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: .15s
    }

    .tab:hover {
      color: var(--ink)
    }

    .tab.on {
      color: var(--acc);
      border-color: var(--acc)
    }

    .tab .sb-badge {
      background: var(--line);
      color: var(--mut)
    }

    /* ============ Subscription Page ============ */
    .sub-page {
      max-width: 1180px;
      margin: 0 auto;
      padding-bottom: 40px;
    }

    /* هدر صفحه */
    .sub-hero {
      position: relative;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: var(--card);
      overflow: hidden;
      margin-bottom: 28px;
      padding: 42px 28px 36px;
      text-align: center;
    }

    .sub-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(14, 122, 110, .08) 0%, transparent 65%);
      pointer-events: none;
    }

    .sub-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(14, 122, 110, .14) 1px, transparent 1.2px);
      background-size: 26px 26px;
      -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%);
      mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%);
      pointer-events: none;
    }

    .sub-hero-in {
      position: relative;
      z-index: 1;
    }

    .sub-hero .sh-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 13px;
      border-radius: 999px;
      border: 1px solid rgba(14, 122, 110, .3);
      background: var(--acc-soft);
      color: var(--acc-ink);
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .sub-hero .sh-badge i {
      width: 12px;
      height: 12px;
    }

    .sub-hero .sh-badge .pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acc);
      position: relative;
    }

    .sub-hero .sh-badge .pulse::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--acc);
      animation: shPulse 1.6s ease-out infinite;
    }

    @keyframes shPulse {
      0% {
        transform: scale(1);
        opacity: .8;
      }

      100% {
        transform: scale(2.4);
        opacity: 0;
      }
    }

    .sub-hero h1 {
      font-size: 30px;
      font-weight: 800;
      line-height: 1.4;
      color: var(--ink);
      letter-spacing: -.3px;
    }

    .sub-hero h1 mark {
      background: linear-gradient(180deg, transparent 62%, rgba(14, 122, 110, .28) 62%);
      color: var(--acc);
      padding: 0 4px;
    }

    .sub-hero>p {
      color: var(--mut);
      font-size: 13.5px;
      margin-top: 10px;
      line-height: 1.9;
      max-width: 480px;
      margin-inline: auto;
    }

    .sub-hero .sh-trust {
      display: flex;
      gap: 22px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 22px;
      color: var(--faint);
      font-size: 12px;
    }

    .sub-hero .sh-trust span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sub-hero .sh-trust i {
      width: 13px;
      height: 13px;
      color: var(--acc);
    }

    /* سوییچ ماهانه / سالانه */
    .sub-toggle {
      display: flex;
      justify-content: center;
      margin-bottom: 32px;
    }

    .sub-toggle-in {
      display: inline-flex;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 5px;
      position: relative;
      box-shadow: 0 4px 14px -6px rgba(16, 24, 40, .08);
    }

    .sub-toggle-in button {
      position: relative;
      z-index: 1;
      padding: 9px 22px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--mut);
      transition: color .25s;
      white-space: nowrap;
    }

    .sub-toggle-in button.on {
      color: #fff;
    }

    .sub-toggle-slider {
      position: absolute;
      top: 5px;
      bottom: 5px;
      background: linear-gradient(135deg, #0E7A6E, #10b981);
      border-radius: 10px;
      transition: all .35s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 0 6px 18px -8px rgba(14, 122, 110, .7);
      z-index: 0;
    }

    .sub-toggle-in .save-tag {
      position: absolute;
      top: -10px;
      inset-inline-start: -18px;
      background: #FCF2E4;
      color: var(--warn);
      font-size: 9.5px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid #F5D5A6;
      white-space: nowrap;
    }

    /* گرید پلن‌ها */
    .sub-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      align-items: stretch;
      padding-top: 12px;
    }

    /* کارت پلن */
    .plan-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      perspective: 1200px;
      animation: planIn .55s cubic-bezier(.22, .9, .3, 1.05) both;
    }

    .plan-wrap:nth-child(1) {
      animation-delay: .04s;
    }

    .plan-wrap:nth-child(2) {
      animation-delay: .12s;
    }

    .plan-wrap:nth-child(3) {
      animation-delay: .2s;
    }

    @keyframes planIn {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* قاب گرادیانی چرخان (برای پلن محبوب) */
    .plan-wrap.popular::before {
      content: "";
      position: absolute;
      inset: -1.5px;
      border-radius: 17px;
      background: conic-gradient(from var(--shAngle, 0deg),
          #0E7A6E, #22d3ee, #0E7A6E, #10b981, #0E7A6E);
      animation: shSpin 4s linear infinite;
      z-index: 0;
    }

    @property --shAngle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes shSpin {
      to {
        --shAngle: 360deg;
      }
    }

    /* گلوی نورانی پشت کارت */
    .plan-wrap .plan-glow {
      position: absolute;
      inset: -14px;
      border-radius: 24px;
      opacity: 0;
      transition: opacity .5s;
      filter: blur(22px);
      pointer-events: none;
      z-index: 0;
    }

    .plan-wrap:hover .plan-glow {
      opacity: 1;
    }

    .plan-card {
      position: relative;
      z-index: 1;
      border-radius: 16px;
      background: var(--card);
      border: 1px solid var(--line);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: transform .35s cubic-bezier(.22, .9, .3, 1.1), box-shadow .35s;
      will-change: transform;
    }

    .plan-wrap.popular .plan-card {
      border-color: transparent;
    }

    .plan-wrap:hover .plan-card {
      transform: translateY(-6px);
      box-shadow: 0 30px 60px -32px rgba(14, 122, 110, .55);
    }

    .plan-wrap.popular:hover .plan-card {
      transform: translateY(-8px);
    }

    /* dotgrid ملایم داخل کارت */
    .plan-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(14, 122, 110, .08) 1px, transparent 1.2px);
      background-size: 22px 22px;
      opacity: .5;
      pointer-events: none;
    }

    /* گرادیان نرم در هاور */
    .plan-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% -20%, rgba(14, 122, 110, .1), transparent 60%);
      opacity: 0;
      transition: opacity .5s;
      pointer-events: none;
    }

    .plan-wrap:hover .plan-card::after {
      opacity: 1;
    }

    /* Badge شناور برای پلن محبوب */
    .plan-flag {
      position: absolute;
      top: -11px;
      inset-inline-start: 50%;
      transform: translateX(-50%);
      z-index: 3;
      background: linear-gradient(135deg, #0E7A6E, #10b981);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      padding: 5px 14px;
      border-radius: 999px;
      box-shadow: 0 10px 24px -10px rgba(14, 122, 110, .9);
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      overflow: hidden;
    }

    .plan-flag i {
      width: 10px;
      height: 10px;
    }

    .plan-flag::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
      transform: translateX(-100%);
      animation: flagShine 3s ease-in-out infinite;
    }

    @keyframes flagShine {

      0%,
      60% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    /* بدنه کارت */
    .plan-body {
      position: relative;
      z-index: 2;
      padding: 26px 22px 22px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    /* آیکون */
    .plan-ic {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      position: relative;
      transition: transform .5s cubic-bezier(.22, .9, .3, 1.1);
    }

    .plan-wrap:hover .plan-ic {
      transform: scale(1.12) rotate(-6deg);
    }

    .plan-ic::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 14px;
      filter: blur(12px);
      opacity: 0;
      transition: opacity .4s;
      z-index: -1;
    }

    .plan-wrap:hover .plan-ic::after {
      opacity: .8;
    }

    .plan-ic i {
      width: 22px;
      height: 22px;
    }

    /* تیتر */
    .plan-title {
      font-size: 17px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.3;
    }

    .plan-sub {
      font-size: 11.5px;
      color: var(--faint);
      margin-top: 4px;
      display: block;
      min-height: 32px;
      line-height: 1.7;
    }

    /* قیمت */
    .plan-price {
      margin-top: 10px;
      padding-bottom: 18px;
      border-bottom: 1px dashed var(--line);
      position: relative;
    }

    .plan-price-num {
      font-size: 28px;
      font-weight: 900;
      color: var(--ink);
      line-height: 1;
      letter-spacing: -.8px;
      font-variant-numeric: tabular-nums;
      background: linear-gradient(135deg, var(--ink) 0%, var(--ink) 60%, var(--pc, #0E7A6E) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: background .3s;
    }

    .plan-price-unit {
      font-size: 11.5px;
      color: var(--faint);
      font-weight: 700;
      margin-inline-start: 5px;
      margin-bottom: 4px;
    }

    .plan-price-per {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10.5px;
      color: var(--faint);
      margin-top: 8px;
    }

    .plan-price-per .dot-live {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--pc, #0E7A6E);
    }

    .plan-price-old {
      font-size: 12px;
      color: var(--faint);
      text-decoration: line-through;
      margin-inline-start: 6px;
      font-weight: 500;
    }

    /* لیست ویژگی‌ها */
    .plan-feats {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
      flex: 1;
      margin: 20px 0 22px;
    }

    .plan-feats li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 12.5px;
      color: var(--mut);
      line-height: 1.7;
      transition: transform .3s;
    }

    .plan-wrap:hover .plan-feats li {
      transform: translateX(-2px);
    }

    .plan-feats li:nth-child(1) {
      transition-delay: .02s;
    }

    .plan-feats li:nth-child(2) {
      transition-delay: .04s;
    }

    .plan-feats li:nth-child(3) {
      transition-delay: .06s;
    }

    .plan-feats li:nth-child(4) {
      transition-delay: .08s;
    }

    .plan-feats li:nth-child(5) {
      transition-delay: .1s;
    }

    .plan-feats li:nth-child(6) {
      transition-delay: .12s;
    }

    .feat-chk {
      flex: none;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      margin-top: 1px;
      transition: transform .3s;
    }

    .plan-wrap:hover .feat-chk {
      transform: scale(1.1);
    }

    .feat-chk i {
      width: 11px;
      height: 11px;
    }

    /* دکمه CTA */
    .plan-cta {
      position: relative;
      width: 100%;
      height: 44px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      overflow: hidden;
      transition: transform .15s, box-shadow .25s, background .25s;
    }

    .plan-cta:active {
      transform: scale(.97);
    }

    .plan-cta i {
      width: 14px;
      height: 14px;
      transition: transform .3s;
    }

    .plan-cta:hover i {
      transform: translateX(-3px);
    }

    /* دکمه معمولی */
    .plan-cta.line {
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--ink);
    }

    .plan-cta.line:hover {
      background: var(--panel2);
      border-color: var(--acc);
      color: var(--acc);
    }

    /* دکمه محبوب */
    .plan-cta.primary {
      color: #fff;
      background: linear-gradient(135deg, #0E7A6E, #10b981);
      box-shadow: 0 12px 26px -12px rgba(14, 122, 110, .85);
    }

    .plan-cta.primary:hover {
      box-shadow: 0 16px 32px -12px rgba(14, 122, 110, .95);
    }

    .plan-cta.primary::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
      transform: translateX(-100%);
      transition: transform .9s;
    }

    .plan-cta.primary:hover::after {
      transform: translateX(100%);
    }

    /* سوالات متداول */
    .sub-faq {
      margin-top: 34px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--card);
      padding: 22px;
    }

    .sub-faq-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14.5px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 14px;
    }

    .sub-faq-title i {
      width: 30px;
      height: 30px;
      padding: 8px;
      border-radius: 10px;
      background: var(--acc-soft);
      color: var(--acc);
    }

    .sub-faq-item {
      border-bottom: 1px solid var(--line2);
      padding: 14px 0;
    }

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

    .sub-faq-item summary {
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      list-style: none;
      transition: color .2s;
    }

    .sub-faq-item summary::-webkit-details-marker {
      display: none;
    }

    .sub-faq-item summary:hover {
      color: var(--acc);
    }

    .sub-faq-item summary i {
      width: 16px;
      height: 16px;
      color: var(--faint);
      transition: transform .3s;
    }

    .sub-faq-item[open] summary i {
      transform: rotate(180deg);
      color: var(--acc);
    }

    .sub-faq-item p {
      font-size: 12.5px;
      color: var(--mut);
      line-height: 1.9;
      padding-top: 9px;
    }

    /* ریسپانسیو */
    @media (max-width: 980px) {
      .sub-grid {
        grid-template-columns: 1fr 1fr;
      }

      .plan-wrap.popular {
        grid-column: span 2;
      }
    }

    @media (max-width: 720px) {
      .sub-hero {
        padding: 32px 18px 26px;
      }

      .sub-hero h1 {
        font-size: 22px;
      }

      .sub-hero .sh-trust {
        gap: 14px;
        font-size: 11px;
      }

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

      .plan-wrap.popular {
        grid-column: span 1;
      }

      .sub-toggle-in button {
        padding: 8px 16px;
        font-size: 12px;
      }

      .plan-price-num {
        font-size: 28px;
      }
    }


/* Profile photos */
.avatar { overflow: hidden; position: relative; }
.avatar-photo { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }

/* Request conversation and admin plan management */
.request-chat {
  height: min(76vh, 780px);
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--sh);
}
.request-chat .chat-main { display: flex; }
.plans-admin-layout {
  display: grid;
  grid-template-columns: minmax(270px, .78fr) minmax(0, 1.7fr);
  gap: 16px;
  align-items: start;
}
.plan-create { position: sticky; top: 16px; }
.plan-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.plan-admin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(14,122,110,.10), transparent 44%),
    var(--card);
  box-shadow: var(--sh);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.plan-admin-card:hover {
  transform: translateY(-3px);
  border-color: rgba(14,122,110,.35);
  box-shadow: 0 18px 36px -25px rgba(14,122,110,.48);
}
.plan-admin-card.paused { background: var(--bg); }
.pa-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-admin-card h3 { font-size: 16px; margin: 2px 0 0; }
.plan-admin-card p { min-height: 38px; color: var(--mut); font-size: 12px; line-height: 1.7; margin: 0; }
.pa-price { font-size: 21px; font-weight: 800; color: var(--acc-ink, var(--acc)); }
.pa-price small { color: var(--faint); font-size: 11px; font-weight: 500; }
.pa-feature { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-block: 1px solid var(--line2); color: var(--mut); font-size: 12px; }
.pa-feature i { width: 16px; height: 16px; color: var(--acc); }

@media(max-width:1000px) {
  .plans-admin-layout { grid-template-columns: 1fr; }
  .plan-create { position: static; }
}
@media(max-width:820px) {
  .request-chat { height: min(72vh, 760px); min-height: 460px; }
  .request-chat .chat-main { display: flex; }
}