@font-face{font-family:'Vazirmatn';src:url('../fonts/vazirmatn-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}

    :root {
      --bg: #090f28;
      --bg2: #0d1430;
      --card: #111a3a;
      --line: #22305f;
      --line2: #2e4078;
      --tx: #eef3ff;
      --mut: #8b91ab;
      --gold: #07d2f8;
      --gold2: #0160ea;
      --gs: rgba(7,210,248,.12);
      --teal: #07d2f8;
      --rose: #ff7a8a;
      --ong: #06132c;
      --font: 'Vazirmatn', Tahoma, system-ui, sans-serif;
      --sb-w: 72px;
      --sb-w-open: 288px;
      --scroll-thumb: rgba(139, 145, 171, .28);
      --scroll-thumb-hover: rgba(7,210,248,.75);
    }

    [data-theme=light] {
      --bg: #f4f7fe;
      --bg2: #fff;
      --card: #fff;
      --line: #dee6f6;
      --line2: #c7d4ee;
      --tx: #1b1d2a;
      --gs: rgba(11, 99, 246, .1);
      --teal: #0160ea;
      --rose: #d6455a;
      --ong: #fff;
      --scroll-thumb: rgba(108, 112, 133, .28);
      --scroll-thumb-hover: rgba(11, 99, 246, .7);
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--scroll-thumb) transparent
    }

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

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

    *::-webkit-scrollbar-thumb {
      background: var(--scroll-thumb);
      border: 2px solid transparent;
      background-clip: padding-box;
      border-radius: 99px;
      transition: background .2s
    }

    *::-webkit-scrollbar-thumb:hover {
      background: var(--scroll-thumb-hover);
      background-clip: padding-box
    }

    html {
      scroll-behavior: smooth
    }

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

    [hidden] {
      display: none !important
    }

    body {
      background: var(--bg);
      color: var(--tx);
      font: 14px/1.8 var(--font);
      overflow: hidden
    }

    button,
    textarea,
    input {
      font: inherit;
      color: inherit
    }

    button {
      cursor: pointer;
      background: none;
      border: 0
    }

    svg.i {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none
    }

    svg.i.f {
      fill: currentColor;
      stroke: none
    }

    .flip {
      transform: rotate(180deg)
    }

    /* ============ APP LAYOUT ============ */
    .app {
      display: grid;
      grid-template-columns: var(--sb-w) 1fr;
      height: 100dvh;
      transition: grid-template-columns .35s cubic-bezier(.2, .8, .2, 1);
    }

    .app[data-sidebar="open"] {
      --sb-w: var(--sb-w-open)
    }

    /* ============ SIDEBAR ============ */
    .sidebar {
      background: var(--bg2);
      border-inline-end: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }

    .sb-head {
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
      min-height: 58px;
      flex: none;
    }

    .sb-toggle {
      display: grid;
      place-items: center;
      color: var(--mut);
      flex: none;
    }

    .sb-toggle:hover {
      background: var(--gs);
      color: var(--gold)
    }

    .sb-brand {
      align-items: center;
      gap: 9px;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity .2s;
    }

    .sb-logo {
      background: conic-gradient(from 200deg, var(--gold), var(--gold2), var(--gold));
      display: grid;
      place-items: center;
      color: var(--ong);
      font-weight: 900;
      box-shadow: 0 0 0 3px var(--gs);
      flex: none;
    }

    .sb-name {
      font-size: 13.5px;
      font-weight: 800
    }

    .app[data-sidebar="collapsed"] .sb-brand {
      display: none
    }

    .app[data-sidebar="collapsed"] .sb-toggle {
      margin: 0 auto
    }

    .app[data-sidebar="collapsed"] .sb-head {
      justify-content: center;
      padding: 12px 8px
    }

    .sb-new {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 12px 10px 6px;
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      color: var(--ong);
      font-weight: 800;
      box-shadow: 0 6px 16px -10px var(--gold);
      transition: .2s;
      flex: none;
      overflow: hidden;
      white-space: nowrap;
    }

    .sb-new:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px -10px var(--gold)
    }

    .sb-new svg {
      width: 15px;
      height: 15px;
      flex: none;
      transition: transform .3s
    }

    .sb-new:hover svg {
      transform: rotate(90deg)
    }

    .app[data-sidebar="collapsed"] .sb-new {
      padding: 10px;
      justify-content: center;
      margin: 8px
    }

    .app[data-sidebar="collapsed"] .sb-new span {
      display: none
    }

    .sb-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 6px 8px 8px;
      min-height: 0;
      scrollbar-gutter: stable;
    }

    .sb-section {
      margin-bottom: 12px
    }

    .sb-section-title {
      padding: 4px 10px 5px;
      font-size: 11px;
      font-weight: 700;
      color: var(--mut);
      text-transform: uppercase;
      letter-spacing: .4px;
      opacity: .85;
    }

    .app[data-sidebar="collapsed"] .sb-section-title {
      display: none
    }

    .sb-item {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      color: var(--mut);
      font-size: 12px;
      text-align: right;
      transition: .15s;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
    }

    .sb-item:hover {
      background: var(--gs);
      color: var(--tx)
    }

    .sb-item.active {
      background: var(--gs);
      color: var(--gold)
    }

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

    .sb-item-icon {
      display: grid;
      place-items: center;
      background: var(--gs);
      color: var(--gold);
      flex: none;
    }

    .sb-item-icon svg {
      width: 12px;
      height: 12px
    }

    .sb-item-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
      overflow: hidden
    }

    .sb-item-title {
      font-size: 12px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .sb-item-sub {
      font-size: 11px;
      color: var(--mut);
      opacity: .75
    }

    .app[data-sidebar="collapsed"] .sb-item {
      padding: 7px;
      justify-content: center
    }

    .app[data-sidebar="collapsed"] .sb-item-body {
      display: none
    }

    .app[data-sidebar="collapsed"] .sb-item::after {
      content: attr(data-tip);
      position: absolute;
      inset-inline-start: calc(100% + 6px);
      top: 50%;
      transform: translateY(-50%);
      padding: 5px 10px;
      background: var(--tx);
      color: var(--bg);
      border-radius: 8px;
      font-size: 12px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: .15s;
      z-index: 5;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .app[data-sidebar="collapsed"] .sb-item:hover::after {
      opacity: 1
    }

    .sb-tools {
      border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
      display: flex;
      flex-direction: column;
      flex: none;
    }

    .sb-tool {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--mut);
      transition: .15s;
      white-space: nowrap;
      position: relative;
    }

    .sb-tool:hover {
      background: var(--gs);
      color: var(--tx)
    }

    .sb-tool.on {
      background: var(--gs);
      color: var(--gold);
      font-weight: 600
    }

    .sb-tool svg {
      flex: none
    }

    .app[data-sidebar="collapsed"] .sb-tool {
      padding: 8px;
      justify-content: center
    }

    .app[data-sidebar="collapsed"] .sb-tool span {
      display: none
    }

    .app[data-sidebar="collapsed"] .sb-tool::after {
      content: attr(data-tip);
      position: absolute;
      inset-inline-start: calc(100% + 6px);
      top: 50%;
      transform: translateY(-50%);
      padding: 5px 10px;
      background: var(--tx);
      color: var(--bg);
      border-radius: 8px;
      font-size: 12px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: .15s;
      z-index: 5;
    }

    .app[data-sidebar="collapsed"] .sb-tool:hover::after {
      opacity: 1
    }

    .sb-foot {
      border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent)
    }

    .sb-user {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px;
      border-radius: 12px;
      transition: .15s;
      width: 100%;
      text-align: right;
      overflow: hidden;
    }

    .sb-user:hover {
      background: var(--gs)
    }

    .sb-av {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--gold), var(--teal));
      display: grid;
      place-items: center;
      color: var(--ong);
      font-weight: 800;
      font-size: 12px;
      flex: none;
    }

    .sb-user-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden
    }

    .sb-user-name {
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .sb-user-plan {
      font-size: 11px;
      color: var(--mut)
    }

    .app[data-sidebar="collapsed"] .sb-user-info {
      display: none
    }

    .app[data-sidebar="collapsed"] .sb-user {
      justify-content: center;
      padding: 8px
    }

    /* ============ MAIN ============ */
    .main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      position: relative;
      overflow: hidden;
      background: var(--bg);
    }

    /* ============ HEADER (absolute inside .main) ============ */
    .hd {
      position: absolute;
      display: flex;
      align-items: center;
      border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
      background: color-mix(in srgb, var(--bg2) 68%, transparent);
      backdrop-filter: blur(22px) saturate(1.4);
      -webkit-backdrop-filter: blur(22px) saturate(1.4);
      transition: border-color .3s, box-shadow .3s;
    }

    .hd:hover {
      border-color: color-mix(in srgb, var(--gold) 25%, var(--line));
    }

    .hd-hamburger {
      display: none !important
    }

    .hd-search {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      padding: 6px 12px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--card) 60%, transparent);
      border: 1px solid var(--line);
      color: var(--mut);
      font-size: 12px;
      transition: .2s;
    }

    .hd-search:hover {
      border-color: var(--line2)
    }

    .hd-search:focus-within {
      border-color: var(--gold);
      color: var(--tx)
    }

    .hd-search svg {
      width: 14px;
      height: 14px;
      flex: none
    }

    .hd-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: none;
      font-size: 12px;
      color: var(--tx)
    }

    .hd-search input::placeholder {
      color: var(--mut)
    }

    .hd-search kbd {
      font-size: 11px;
      font-family: inherit;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid var(--line);
      background: var(--bg2);
      color: var(--mut)
    }

    .hd-spacer {
      flex: 1
    }

    .hd-actions {
      display: flex;
      align-items: center;
      flex: none
    }

    .hd-icon {
      display: grid;
      place-items: center;
      color: var(--mut);
      transition: .15s;
      position: relative;
    }

    .hd-icon:hover {
      background: var(--gs);
      color: var(--tx)
    }

    .hd-icon.on {
      background: var(--gs);
      color: var(--gold)
    }

    .hd-icon .badge {
      position: absolute;
      border-radius: 99px;
      background: var(--rose);
      color: #fff;
      font-weight: 800;
      display: grid;
      place-items: center;
      padding: 0 3px;
    }

    .hd-divider {
      width: 1px;
      background: var(--line);
      opacity: .6
    }

    .hd-coin {
      display: flex;
      align-items: center;
      background: var(--gs);
      color: var(--gold);
      border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
      font-weight: 700;
      white-space: nowrap;
    }

    .hd-coin svg {
      width: 12px;
      height: 12px
    }

    .hd-new {
      display: inline-flex;
      align-items: center;
      border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
      background: var(--gs);
      color: var(--gold);
      font-weight: 700;
      white-space: nowrap;
      transition: .2s;
    }

    .hd-new:hover {
      background: var(--gold);
      color: var(--ong);
      transform: translateY(-1px);
      box-shadow: 0 6px 14px -8px var(--gold)
    }

    .hd-user {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 3px 3px 3px 10px;
      border-radius: 99px;
      border: 1px solid transparent;
      transition: .15s;
      cursor: pointer;
    }

    .hd-user:hover {
      background: var(--gs);
      border-color: var(--line)
    }

    .hd-user b {
      font-size: 12px;
      font-weight: 700
    }

    .hd-user .av2 {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--teal));
      display: grid;
      place-items: center;
      color: var(--ong);
      font-weight: 800;
      font-size: 12px;
      border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
      flex: none;
    }

    /* ============ HEADER MENU ============ */
    .hd-menu {
      min-width: 230px;
      background: var(--card);
      border: 1px solid var(--line2);
      border-radius: 16px;
      padding: 6px;
      box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .5);
      display: none;
      animation: menuRise .16s ease-out both;
    }

    .hd-menu.on {
      display: block
    }

    @keyframes menuRise {
      from {
        opacity: 0;
        transform: translateY(-4px) scale(.98)
      }

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

    .hd-menu-head {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 4px
    }

    .hd-menu-head b {
      font-size: 12px;
      display: block
    }

    .hd-menu-head small {
      font-size: 12px;
      color: var(--mut)
    }

    .hd-menu-item {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 8px 10px;
      border-radius: 8px;
      color: var(--mut);
      font-size: 12px;
      text-align: right;
      transition: .15s;
    }

    .hd-menu-item:hover {
      background: var(--gs);
      color: var(--tx)
    }

    .hd-menu-item svg {
      width: 14px;
      height: 14px;
      color: var(--gold)
    }

    .hd-menu-sep {
      height: 1px;
      background: var(--line);
      margin: 4px 0
    }

    /* ============ CHAT VIEW ============ */
    #vChat {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    #vOver {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 92px clamp(16px, 2.5vw, 40px) 50px;
    }

    .feed {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 92px clamp(16px, 2.5vw, 32px) 8px;
      min-height: 0;
      overscroll-behavior: contain;
      scroll-behavior: smooth;
      scroll-padding-block: 20px;
      scrollbar-gutter: stable;
    }

    .col {
      max-width: 840px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding-bottom: 12px;
      min-height: 0
    }

    .m {
      display: flex;
      gap: 12px;
      animation: in .3s both
    }

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

    .m.u {
      justify-content: flex-start
    }

    .m.u .bub {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px 18px 18px 6px;
      padding: 10px 16px;
      max-width: 85%;
      line-height: 2;
    }

    .av {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color: var(--ong);
      display: grid;
      place-items: center;
      font-weight: 800;
      flex: none
    }

    .body {
      flex: 1;
      min-width: 0;
      line-height: 2
    }

    .th {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 8px
    }

    .th div {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--mut);
      font-size: 12px
    }

    .th .sp2 {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid var(--line2);
      border-top-color: var(--gold);
      animation: rot .8s linear infinite;
      flex: none
    }

    .th .done .sp2 {
      animation: none;
      border-color: var(--teal);
      background: var(--teal)
    }

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

    .dots {
      display: inline-flex;
      gap: 4px;
      padding: 8px 0
    }

    .dots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      animation: bn 1s infinite
    }

    .dots i:nth-child(2) {
      animation-delay: .15s
    }

    .dots i:nth-child(3) {
      animation-delay: .3s
    }

    @keyframes bn {
      30% {
        transform: translateY(-5px);
        opacity: .5
      }
    }

    .body .li {
      padding-inline-start: 18px;
      position: relative
    }

    .body .li::before {
      content: "";
      position: absolute;
      inset-inline-start: 4px;
      top: .85em;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold)
    }

    .body code {
      background: var(--gs);
      color: var(--gold);
      padding: 0 6px;
      border-radius: 6px;
      font-size: 12.5px
    }

    .code {
      margin: 10px 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: var(--bg2);
      box-shadow: 0 10px 28px -24px #000
    }

    .ch {
      display: flex;
      justify-content: space-between;
      padding: 3px 12px;
      background: var(--card);
      border-bottom: 1px solid var(--line);
      color: var(--mut);
      font-size: 12px;
      direction: ltr
    }

    .cp {
      display: flex;
      gap: 6px;
      align-items: center;
      color: var(--mut);
      transition: .15s
    }

    .cp:hover {
      color: var(--gold)
    }

    .cp svg {
      width: 13px;
      height: 13px
    }

    pre {
      padding: 12px 14px;
      overflow: auto;
      font: 12.5px/1.7 ui-monospace, Menlo, Consolas, monospace;
      text-align: left;
      direction: ltr;
      max-height: 360px
    }

    .cur {
      display: inline-block;
      width: 8px;
      height: 16px;
      background: var(--gold);
      border-radius: 2px;
      vertical-align: -3px;
      margin-inline-start: 3px;
      animation: bl 1s steps(2) infinite
    }

    @keyframes bl {
      50% {
        opacity: .2
      }
    }

    .acts {
      display: flex;
      gap: 2px;
      margin-top: 6px;
      opacity: .72;
      transition: opacity .2s
    }

    .m:hover .body .acts {
      opacity: 1
    }

    .acts .ib {
      width: 30px;
      height: 30px
    }

    .acts .ib svg {
      width: 15px;
      height: 15px
    }

    .ib {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--mut);
      transition: .15s;
      flex: none
    }

    .ib:hover {
      background: var(--gs);
      color: var(--tx)
    }

    .ib.on {
      color: var(--gold)
    }

    /* Result media */
    .res {
      width: min(380px, 100%);
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      margin: 8px 0;
    }

    .res.load {
      background: linear-gradient(110deg, var(--card) 30%, var(--line) 50%, var(--card) 70%) 0 0/200% 100%;
      animation: sh 1.4s linear infinite;
      aspect-ratio: 1;
      min-height: 200px;
    }

    .res.load.v {
      aspect-ratio: 16/9;
      min-height: 180px
    }

    .res.load.a {
      aspect-ratio: auto;
      height: 84px
    }

    @keyframes sh {
      to {
        background-position: -200% 0
      }
    }

    .res .pc {
      font-weight: 800;
      font-size: 26px;
      color: var(--gold)
    }

    /* Composer */
    .cwrap {
      flex: none;
      padding: 10px clamp(16px, 2.5vw, 32px) calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 75%, transparent), var(--bg) 30%);
      backdrop-filter: blur(16px);
      position: relative;
      z-index: 20;
      overflow: visible;
    }

    .cwrap>* {
      max-width: 840px;
      margin-inline: auto
    }

    .cmp {
      position: relative;
      background: color-mix(in srgb, var(--card) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--line2) 78%, transparent);
      border-radius: 22px;
      z-index: 12;
      box-shadow: 0 14px 44px -30px rgba(0, 0, 0, .7), 0 1px 4px -4px rgba(0, 0, 0, .4);
      transition: box-shadow .25s, border-color .25s, background .25s;
      overflow: visible;
    }

    .cmp:focus-within {
      border-color: color-mix(in srgb, var(--gold) 65%, var(--line2));
      box-shadow: 0 0 0 3px var(--gs), 0 18px 48px -30px rgba(0, 0, 0, .75)
    }

    .cmp[data-mode="image"] {
      border-color: color-mix(in srgb, var(--gold) 38%, var(--line2))
    }

    .cmp[data-mode="video"] {
      border-color: color-mix(in srgb, var(--teal) 32%, var(--line2))
    }

    .cmp[data-mode="voice"] {
      border-color: color-mix(in srgb, #b188d4 35%, var(--line2))
    }

    .cmp .top2 {
      padding: 11px 13px 2px;
      gap: 8px;
      display: flex;
      align-items: center;
      flex-wrap: wrap
    }

    .modes {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, auto);
      background: color-mix(in srgb, var(--bg2) 88%, transparent);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 3px;
      isolation: isolate
    }

    .modes::before {
      content: "";
      position: absolute;
      inset-block: 3px;
      inset-inline-start: 3px;
      width: calc((100% - 6px)/4);
      border-radius: 8px;
      background: var(--gold);
      transform: translateX(calc(var(--i, 0)*-100%));
      transition: transform .3s cubic-bezier(.3, 1.3, .5, 1);
      z-index: -1
    }

    .modes button {
      display: flex;
      gap: 5px;
      align-items: center;
      justify-content: center;
      padding: 4px 12px;
      color: var(--mut);
      font-size: 12px;
      transition: .2s;
      min-height: 29px;
      border-radius: 8px
    }

    .modes button.on {
      color: var(--ong);
      font-weight: 700
    }

    .modes svg {
      width: 14px;
      height: 14px
    }

    textarea {
      display: block;
      width: 100%;
      min-height: 58px;
      max-height: 190px;
      background: none;
      border: 0;
      outline: 0;
      resize: none;
      padding: 11px 17px 5px;
      font-size: 14px;
      line-height: 1.9
    }

    textarea::placeholder {
      color: var(--mut);
      opacity: .75
    }

    .row {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 4px 11px 11px
    }

    .grow {
      flex: 1
    }

    .cnt {
      font-size: 12px;
      color: var(--mut);
      min-width: 50px;
      text-align: center;
      font-variant-numeric: tabular-nums
    }

    .send {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 96px;
      height: 39px;
      padding: 0 15px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      color: var(--ong);
      font-weight: 800;
      transition: .2s;
      box-shadow: 0 6px 16px -12px var(--gold)
    }

    .send:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 7px 18px -7px var(--gold)
    }

    .send:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    .send.stop {
      background: var(--tx);
      color: var(--bg)
    }

    .send .c {
      font-size: 12px;
      background: rgba(0, 0, 0, .2);
      padding: 0 6px;
      border-radius: 6px;
      display: none;
      gap: 4px;
      align-items: center
    }

    .send .c svg {
      width: 11px;
      height: 11px
    }

    .rbtn {
      width: 37px;
      height: 37px;
      border-radius: 12px;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--mut);
      transition: .15s;
      background: color-mix(in srgb, var(--bg2) 82%, transparent)
    }

    .rbtn:hover {
      color: var(--gold);
      border-color: var(--gold);
      background: var(--gs);
      transform: translateY(-1px)
    }

    .dz {
      position: absolute;
      inset: 0;
      border: 2px dashed var(--gold);
      border-radius: 23px;
      background: color-mix(in srgb, var(--card) 92%, transparent);
      display: none;
      place-items: center;
      text-align: center;
      color: var(--gold);
      font-weight: 700;
      z-index: 5
    }

    .dz.on {
      display: grid
    }

    .dz small {
      display: block;
      color: var(--mut);
      font-weight: 400
    }

    .tray {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 9px 13px 2px
    }

    .fc {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--bg2);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 5px 8px;
      width: 240px;
      overflow: hidden;
      animation: in .25s both
    }

    .fc .th2 {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: var(--gs) center/cover;
      display: grid;
      place-items: center;
      color: var(--gold);
      flex: none;
      font-size: 12px;
      font-weight: 800
    }

    .th2.pv {
      cursor: zoom-in
    }

    .th2.k-pdf {
      background-color: color-mix(in srgb, var(--rose) 18%, transparent);
      color: var(--rose)
    }

    .th2.k-doc {
      background-color: color-mix(in srgb, var(--teal) 18%, transparent);
      color: var(--teal)
    }

    .fc .nm {
      min-width: 0;
      flex: 1;
      line-height: 1.5
    }

    .fc .nm b {
      display: block;
      font-weight: 500;
      font-size: 12.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .fc .nm small {
      color: var(--mut);
      font-size: 12px
    }

    .fc .x {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--mut);
      flex: none
    }

    .fc .x:hover {
      background: var(--line);
      color: var(--rose)
    }

    .fc .x svg {
      width: 13px;
      height: 13px
    }

    .fc .pr {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 2px;
      background: var(--gold);
      transform-origin: right;
      transition: transform .15s
    }

    /* Selects */
    .sel {
      position: relative;
      z-index: 25;
      max-width: 100%
    }

    .st {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 32px;
      padding: 0 9px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg2) 90%, transparent);
      font-size: 12px
    }

    .st:hover {
      border-color: var(--line2)
    }

    .st .sl {
      color: var(--mut);
      font-size: 12px
    }

    .st b {
      font-weight: 600
    }

    .st .sel-badge {
      flex: 0 0 auto;
      font-size: 12px;
      line-height: 1.65;
      color: var(--gold);
      background: var(--gs);
      border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
      padding: 0 7px;
      border-radius: 99px;
      white-space: nowrap
    }

    .st .sel-badge[hidden] {
      display: none
    }

    .st svg {
      width: 12px;
      height: 12px;
      color: var(--mut)
    }

    .menu {
      position: absolute;
      inset-inline-start: 0;
      top: auto !important;
      bottom: calc(100% + 6px) !important;
      min-width: 240px;
      max-height: 240px;
      overflow: auto;
      background: var(--card);
      border: 1px solid var(--line2);
      border-radius: 16px;
      padding: 6px;
      list-style: none;
      display: none;
      z-index: 90;
      transform-origin: bottom center;
      box-shadow: 0 16px 44px -14px rgba(0, 0, 0, .6)
    }

    .menu.on {
      display: block;
      animation: menuRise .16s ease-out both
    }

    .opt {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 9px;
      border-radius: 8px;
      cursor: pointer;
      min-height: 38px
    }

    .opt.act {
      background: var(--gs)
    }

    .opt .tt {
      flex: 1;
      line-height: 1.5
    }

    .opt .tt small {
      display: none;
      color: var(--mut);
      font-size: 12px
    }

    .opt .bd {
      font-size: 12px;
      color: var(--gold);
      background: var(--gs);
      padding: 0 7px;
      border-radius: 99px
    }

    .opt .ck {
      color: var(--gold);
      opacity: 0
    }

    .opt[aria-selected=true] .ck {
      opacity: 1
    }

    /* scroll down */
    .scroll-down {
      position: absolute;
      z-index: 40;
      bottom: 170px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border: 1px solid var(--line2);
      border-radius: 99px;
      background: color-mix(in srgb, var(--card) 92%, transparent);
      color: var(--tx);
      box-shadow: 0 8px 24px -14px #000;
      backdrop-filter: blur(12px);
      font-size: 12px;
      animation: in .18s both
    }

    .scroll-down svg {
      width: 14px;
      height: 14px;
      color: var(--gold)
    }

    .scroll-down:hover {
      border-color: var(--gold)
    }

    /* Voice bar */
    .vbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px;
      flex-wrap: wrap
    }

    .vbar .rd {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--rose);
      animation: bl 1s steps(2) infinite
    }

    .vbar .rd.ps {
      animation: none;
      background: var(--mut)
    }

    .vbar canvas {
      flex: 1;
      min-width: 120px;
      height: 38px
    }

    .vbar small {
      width: 100%;
      color: var(--mut);
      font-size: 12px
    }

    .vbar b {
      min-width: 46px
    }

    .cns {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      margin: 7px 13px 0;
      padding: 7px 11px;
      border: 1px dashed var(--gold);
      border-radius: 12px;
      color: var(--mut);
      font-size: 12px
    }

    .cns input {
      accent-color: var(--gold);
      margin-top: 4px
    }

    /* ============ AUTH ============ */
    .auth-screen {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      place-items: center;
      overflow-y: auto;
      padding: 24px;
      animation: authAppear .4s ease-out both;
    }

    .auth-screen[hidden] {
      display: none !important
    }

    .auth-screen.auth-closing {
      animation: authDisappear .35s ease-in both
    }

    @keyframes authAppear {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes authDisappear {
      to {
        opacity: 0;
        visibility: hidden
      }
    }

    .auth-backdrop {
      position: fixed;
      inset: 0;
      opacity: .16;
      pointer-events: none;
      background-image: radial-gradient(rgba(255, 255, 255, .22) .6px, transparent .6px);
      background-size: 24px 24px;
      mask-image: linear-gradient(to bottom, #000, transparent 88%);
    }

    .auth-card {
      position: relative;
      grid-template-columns: minmax(0, .85fr) minmax(400px, 1.15fr);
      overflow: hidden;
      backdrop-filter: blur(24px) saturate(1.3);
      -webkit-backdrop-filter: blur(24px) saturate(1.3);
      color: #eef3ff;
    }

    .auth-aside {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      overflow: hidden;
      padding: 32px;
      background:
        radial-gradient(85% 70% at 20% 80%, rgba(79, 209, 181, .20), transparent 65%),
        linear-gradient(155deg, #1a1f30 0%, #131828 55%, #171509 100%);
      border-inline-end: 1px solid rgba(255, 255, 255, .06);
    }

    .auth-aside::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .12;
      background-image: linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: linear-gradient(140deg, #000, transparent 70%);
    }

    .auth-aside-brand,
    .auth-aside-copy,
    .auth-aside-foot {
      position: relative;
      z-index: 1
    }

    .auth-aside-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 800
    }

    .auth-mark {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border-radius: 12px;
      background: linear-gradient(145deg, #12c9f2, #0160ea);
      color: #06132c;
      font-size: 21px;
      font-weight: 900;
      box-shadow: 0 0 0 5px rgba(7,210,248,.10)
    }

    .auth-aside-copy {
      margin-top: auto;
      margin-bottom: 8px
    }

    .auth-kicker,
    .auth-step-kicker {
      color: #07d2f8;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.4px
    }

    .auth-aside-copy h2 {
      max-width: 340px;
      margin-top: 12px;
      font-size: 27px;
      line-height: 1.65;
      font-weight: 800
    }

    .auth-aside-copy p {
      max-width: 330px;
      margin-top: 9px;
      color: #a9b7d8;
      font-size: 12px;
      line-height: 2
    }

    .auth-art {
      position: relative;
      height: 175px;
      margin: 12px 0 8px
    }

    .auth-art-orbit {
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(7,210,248,.30);
      border-radius: 50%;
      transform: translate(-50%, -50%) rotate(-18deg)
    }

    .orbit-one {
      width: 195px;
      height: 105px
    }

    .orbit-two {
      width: 250px;
      height: 138px;
      transform: translate(-50%, -50%) rotate(28deg);
      border-color: rgba(79, 209, 181, .28)
    }

    .auth-art-core {
      position: absolute;
      left: 50%;
      top: 50%;
      display: grid;
      width: 68px;
      height: 68px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .20);
      border-radius: 22px;
      background: linear-gradient(145deg, #07d2f8, #a97520);
      color: #211707;
      font-size: 34px;
      font-weight: 900;
      box-shadow: 0 0 42px rgba(7,210,248,.20);
      transform: translate(-50%, -50%)
    }

    .auth-art-node {
      position: absolute;
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 12px;
      background: rgba(25, 30, 45, .90);
      color: #07d2f8;
      font-size: 11px;
      font-weight: 800;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .20)
    }

    .node-one {
      top: 8px;
      left: 20%
    }

    .node-two {
      top: 15px;
      right: 16%;
      color: #07d2f8;
      font-size: 17px
    }

    .node-three {
      bottom: 5px;
      left: 26%
    }

    .auth-aside-foot {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #a9b7d8;
      font-size: 11px
    }

    .auth-secure-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #07d2f8;
      box-shadow: 0 0 0 3px rgba(79, 209, 181, .12)
    }

    .auth-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0
    }

    .auth-content-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px
    }

    .auth-mobile-brand {
      align-items: center;
      gap: 8px;
      font-size: 13.5px
    }

    .auth-mobile-brand .auth-mark {
      width: 32px;
      height: 32px;
      font-size: 17px
    }

    .auth-demo-badge {
      padding: 4px 9px;
      border: 1px solid rgba(7,210,248,.22);
      border-radius: 99px;
      background: rgba(7,210,248,.07);
      color: #07d2f8;
      font-size: 11px
    }

    .auth-top-actions {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .auth-dismiss {
      font-size: 11px;
      transition: .2s
    }

    .auth-dismiss:hover {
      color: #07d2f8;
      border-color: rgba(7,210,248,.30)
    }

    .auth-progress {
      display: flex;
      gap: 5px;
      margin-bottom: 24px
    }

    .auth-progress span {
      height: 3px;
      flex: 1;
      border-radius: 8px;
      background: #2a3041;
      transition: .25s
    }

    .auth-progress span.active {
      background: linear-gradient(90deg, #0160ea, #07d2f8)
    }

    .auth-step[hidden] {
      display: none !important
    }

    .auth-step-kicker {
      display: block;
      margin-bottom: 6px
    }

    .auth-step h1 {
      line-height: 1.55;
      font-weight: 800
    }

    .auth-lead {
      color: #9aa8cc;
      line-height: 2
    }

    .auth-lead b {
      color: #07d2f8;
      font-weight: 700
    }

    .auth-label {
      display: block;
      margin-bottom: 7px;
      color: #d0dcf3;
      font-weight: 600
    }

    .auth-phone-field {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 0 13px;
      border: 1px solid #22305f;
      background: #070b1f;
      direction: ltr;
      transition: .2s;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02)
    }

    .auth-phone-field:focus-within {
      border-color: #07d2f8;
      box-shadow: 0 0 0 3px rgba(7,210,248,.10)
    }

    .auth-prefix {
      padding-inline-end: 10px;
      border-inline-end: 1px solid #22305f;
      color: #07d2f8;
      font-size: 12.5px;
      font-weight: 700
    }

    .auth-phone-field input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #edf2fc;
      font: 500 14.5px var(--font);
      letter-spacing: 1px
    }

    .auth-phone-field input::placeholder {
      color: #636b80
    }

    .auth-phone-icon {
      color: #7283ad
    }

    .auth-phone-icon svg {
      width: 16px;
      height: 16px
    }

    .auth-field-hint {
      display: block;
      margin-top: 6px;
      color: #7283ad;
      font-size: 11px
    }

    .auth-primary {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      border: 1px solid rgba(255, 255, 255, .10);
      background: linear-gradient(135deg, #12c9f2, #0160ea);
      color: #06132c;
      font-weight: 800;
      box-shadow: 0 10px 26px -16px rgba(7,210,248,.80);
      transition: .2s;
      overflow: hidden
    }

    .auth-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .24) 48%, transparent 76%);
      transform: translateX(-130%);
      transition: transform .7s ease
    }

    .auth-primary:hover::before {
      transform: translateX(130%)
    }

    .auth-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 13px 28px -14px rgba(7,210,248,.70)
    }

    .auth-primary svg {
      width: 15px;
      height: 15px
    }

    .auth-message {
      margin-top: 8px;
      color: #07d2f8
    }

    .auth-message.error {
      color: #ff7a8a
    }

    .auth-security-note {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 10px;
      padding: 9px 11px;
      border: 1px solid #262d40;
      border-radius: 12px;
      color: #8c95ab;
      font-size: 11px
    }

    .auth-security-note svg {
      width: 13px;
      height: 13px;
      color: #07d2f8
    }

    .auth-back {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #aeb5c8;
      font-size: 12px
    }

    .auth-back:hover {
      color: #07d2f8
    }

    .auth-back svg {
      width: 12px;
      height: 12px;
      transform: rotate(90deg)
    }

    .otp-boxes {
      display: flex;
      direction: ltr;
      margin-top: 4px;
      justify-content: center
    }

    .otp-digit {
      text-align: center;
      font: 700 22px/1 var(--font);
      color: #7fdcf5;
      background: #070b1f;
      border: 1px solid #22305f;
      outline: 0;
      transition: .2s;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02)
    }

    .otp-digit:focus {
      border-color: #07d2f8;
      box-shadow: 0 0 0 3px rgba(7,210,248,.12)
    }

    .otp-digit.err {
      border-color: #ff7a8a;
      animation: shake .3s
    }

    @keyframes shake {

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

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

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

    .auth-demo-code {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px dashed rgba(7,210,248,.32);
      color: #9aa8cc
    }

    .auth-demo-code b {
      color: #07d2f8;
      letter-spacing: 2px
    }

    .auth-demo-code button {
      color: #c7cedd;
      font-size: 11px
    }

    .auth-demo-code button:hover {
      color: #07d2f8
    }

    .auth-resend {
      display: block;
      margin: 11px auto 0;
      color: #9aa8cc;
      text-align: center
    }

    .auth-resend:hover {
      color: #07d2f8
    }

    .auth-content-foot {
      margin-top: 22px;
      padding-top: 12px;
      border-top: 1px solid #23293a
    }

    .auth-lock {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #9aa8cc;
      font-size: 11px
    }

    .auth-lock svg {
      width: 12px;
      height: 12px;
      color: #07d2f8
    }

    .auth-content-foot p {
      margin-top: 5px;
      color: #6c768c;
      font-size: 11px;
      line-height: 1.8
    }

    /* ============ LANDING ============ */
    .empty-state .feed {
      padding: 92px clamp(16px, 2.5vw, 34px) 28px;
      scroll-behavior: smooth
    }

    .empty-state .col {
      width: 100%;
      gap: 0;
      padding: 0 0 40px;
      justify-content: flex-start !important
    }

    .empty-state .cwrap {
      padding: 0 !important;
      margin: 0 !important;
      max-width: 100% !important;
      width: 100%;
      flex: 0 0 auto !important;
      overflow: visible;
      border: 0 !important;
      backdrop-filter: none !important;
      box-shadow: none !important
    }

    .empty-state .cwrap>* {
      max-width: none
    }

    .landing-wrap {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      padding: 8px 0 20px
    }

    .landing-hero {
      text-align: center;
      padding: clamp(16px, 3.5vh, 38px) 0 4px;
      animation: welcomeFade .7s both
    }

    .landing-hero h2 {
      font-size: clamp(22px, 2.8vw, 32px);
      font-weight: 800;
      letter-spacing: -.5px;
      line-height: 1.5
    }

    .landing-hero p {
      color: var(--mut);
      font-size: 12px;
      margin-top: 6px
    }

    .quick-chips {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 760px;
      margin: 0 auto;
      animation: welcomeFade .6s .08s both
    }

    .quick-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: var(--card);
      color: var(--mut);
      font-size: 12px;
      transition: transform .2s, border-color .2s, color .2s, box-shadow .2s
    }

    .quick-chip:hover {
      transform: translateY(-2px);
      border-color: var(--gold);
      color: var(--gold);
      box-shadow: 0 8px 16px -12px var(--gold)
    }

    .quick-chip svg {
      width: 12px;
      height: 12px
    }

    .landing-composer {
      width: 100%;
      max-width: 880px;
      margin: 0 auto
    }

    .landing-composer .cwrap>* {
      max-width: none
    }

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

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

    @keyframes galleryReveal {
      from {
        opacity: 0;
        transform: translateY(13px)
      }

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

    .composer-drop-in {
      animation: composerDropIn .9s cubic-bezier(.2, .85, .25, 1) both
    }

    @keyframes composerDropIn {
      0% {
        transform: translateY(-13vh) scale(.985);
        opacity: .78
      }

      72% {
        transform: translateY(7px) scale(1.003);
        opacity: 1
      }

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

    .sample-gallery {
      width: 100%;
      max-width: 1040px;
      margin: 10px auto 0;
      animation: galleryReveal .5s .15s both
    }

    .sample-gallery-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap
    }

    .sample-gallery-head .title {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .sample-gallery-head h3 {
      font-size: 14px;
      font-weight: 850
    }

    .sample-gallery-head small {
      color: var(--mut);
      font-size: 12px
    }

    .sample-filters {
      display: flex;
      gap: 4px;
      flex-wrap: wrap
    }

    .sample-filters button {
      padding: 5px 12px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: var(--card);
      color: var(--mut);
      font-size: 12px;
      transition: .2s
    }

    .sample-filters button:hover {
      border-color: var(--line2);
      color: var(--tx)
    }

    .sample-filters button.active {
      border-color: var(--gold);
      color: var(--gold);
      background: var(--gs);
      font-weight: 700
    }

    .img-masonry {
      columns: 3 200px;
      column-gap: 10px
    }

    @media(max-width:640px) {
      .img-masonry {
        columns: 2 140px
      }
    }

    .img-masonry .media-card {
      break-inside: avoid;
      margin-bottom: 10px
    }

    .media-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--line);
      transition: transform .3s, border-color .3s, box-shadow .3s;
      animation: cardIn .45s both;
      animation-delay: var(--d, 0ms)
    }

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

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

    .media-card:hover {
      transform: translateY(-4px);
      border-color: var(--gold);
      box-shadow: 0 18px 34px -26px #000
    }

    .media-card .thumb {
      position: relative;
      display: block;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-color: var(--line);
      overflow: hidden;
      border: 0;
      padding: 0
    }

    .media-card .thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7));
      opacity: 0;
      transition: .3s;
      pointer-events: none
    }

    .media-card:hover .thumb::after {
      opacity: 1
    }

    .media-card .thumb-info {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px 12px;
      color: #fff;
      transform: translateY(8px);
      opacity: 0;
      transition: .3s;
      z-index: 2;
      text-align: right
    }

    .media-card:hover .thumb-info {
      transform: translateY(0);
      opacity: 1
    }

    .media-card .thumb-info b {
      display: block;
      font-size: 12px;
      font-weight: 750
    }

    .media-card .thumb-info small {
      font-size: 11px;
      opacity: .8
    }

    .play-fab {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .94);
      color: #000;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
      transition: transform .25s, background .25s, color .25s;
      z-index: 2
    }

    .media-card:hover .play-fab {
      transform: translate(-50%, -50%) scale(1.12);
      background: var(--gold);
      color: #fff
    }

    .play-fab svg {
      width: 18px;
      height: 18px
    }

    .duration-badge {
      position: absolute;
      bottom: 8px;
      right: 8px;
      padding: 2px 7px;
      border-radius: 6px;
      background: rgba(0, 0, 0, .72);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      direction: ltr;
      z-index: 2;
      backdrop-filter: blur(4px)
    }

    .audio-card {
      padding: 13px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      cursor: pointer
    }

    .audio-card-top {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .audio-card-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      flex: none;
      background: linear-gradient(135deg, #2a2561, #d339fb);
      color: #fff;
      display: grid;
      place-items: center
    }

    .audio-card-icon svg {
      width: 17px;
      height: 17px
    }

    .audio-card-info {
      flex: 1;
      min-width: 0;
      text-align: right
    }

    .audio-card-info b {
      display: block;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .audio-card-info small {
      display: block;
      color: var(--mut);
      font-size: 12px;
      margin-top: 2px
    }

    .audio-card-play {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex: none;
      background: var(--gs);
      color: var(--gold);
      display: grid;
      place-items: center;
      transition: .2s
    }

    .audio-card.playing .audio-card-play {
      background: var(--gold);
      color: var(--ong)
    }

    .audio-card-play svg {
      width: 14px;
      height: 14px
    }

    .audio-wave {
      display: flex;
      align-items: center;
      gap: 2px;
      height: 34px;
      cursor: pointer;
      padding: 0 2px;
      user-select: none
    }

    .audio-wave i {
      flex: 1;
      background: var(--line2);
      border-radius: 2px;
      min-height: 3px;
      height: var(--h, 40%);
      transition: background .15s, height .15s
    }

    .audio-card.playing .audio-wave i.played {
      background: var(--gold)
    }

    .audio-card-time {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--mut);
      direction: ltr;
      padding: 0 2px
    }

    .video-card .thumb {
      aspect-ratio: 16/9
    }

    .skeleton-card {
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--card)
    }

    .skeleton-thumb {
      width: 100%;
      aspect-ratio: 4/3;
      background: linear-gradient(90deg, var(--line) 25%, var(--bg2) 50%, var(--line) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite
    }

    .skeleton-line {
      height: 10px;
      margin: 10px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--line) 25%, var(--bg2) 50%, var(--line) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite
    }

    .skeleton-line.short {
      width: 60%
    }

    @keyframes shimmer {
      to {
        background-position: -200% 0
      }
    }

    /* ============ SAMPLE PREVIEW MODAL ============ */
    .sp-modal {
      position: fixed;
      inset: 0;
      z-index: 250;
      display: grid;
      place-items: center;
      background: rgba(5, 6, 10, .85);
      backdrop-filter: blur(9px);
      animation: authAppear .25s both
    }

    .sp-modal[hidden] {
      display: none !important
    }

    .sp-card {
      position: relative;
      display: grid;
      max-height: calc(100dvh - 40px);
      background: var(--card);
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid var(--line2);
      box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
      animation: workspaceCardIn .35s both
    }

    @keyframes workspaceCardIn {
      0% {
        opacity: 0;
        transform: translateY(26px) scale(.955);
        filter: blur(5px)
      }

      65% {
        opacity: 1;
        transform: translateY(-3px) scale(1.006);
        filter: blur(0)
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0)
      }
    }

    .sp-media {
      position: relative;
      background: #0a0c12;
      display: grid;
      place-items: center;
      overflow: hidden
    }

    .sp-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .sp-media video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
      display: block;
      max-height: 70vh
    }

    .sp-media .audio-large {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 40px 30px;
      width: 100%
    }

    .sp-media .audio-large .audio-orb {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2a2561, #d339fb);
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 0 60px rgba(211,57,251,.4), inset 0 2px 0 rgba(255, 255, 255, .15)
    }

    .sp-media .audio-large .audio-orb svg {
      width: 48px;
      height: 48px
    }

    .sp-media .audio-large .audio-wave-large {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 70px;
      width: 100%;
      max-width: 420px
    }

    .sp-media .audio-large .audio-wave-large i {
      flex: 1;
      background: rgba(255, 255, 255, .4);
      border-radius: 2px;
      min-height: 3px;
      height: var(--h, 40%);
      transition: background .15s, height .15s
    }

    .sp-media .audio-large.playing .audio-wave-large i.played {
      background: var(--gold)
    }

    .sp-media .audio-large .audio-controls-large {
      display: flex;
      align-items: center;
      gap: 14px;
      color: #fff
    }

    .sp-media .audio-large .audio-controls-large button {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      display: grid;
      place-items: center;
      transition: .2s
    }

    .sp-media .audio-large .audio-controls-large button:hover {
      background: rgba(255, 255, 255, .25)
    }

    .sp-media .audio-large .audio-controls-large button svg {
      width: 18px;
      height: 18px
    }

    .sp-media .audio-large .audio-controls-large .time {
      font-size: 12px;
      direction: ltr;
      color: rgba(255, 255, 255, .85);
      min-width: 80px;
      text-align: center;
      font-variant-numeric: tabular-nums
    }

    .sp-media .chat-mock {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 40px;
      color: #fff;
      text-align: center
    }

    .sp-media .chat-mock .bubble {
      background: rgba(255, 255, 255, .12);
      padding: 14px 18px;
      border-radius: 16px;
      border-top-right-radius: 4px;
      font-size: 13px;
      line-height: 1.9;
      max-width: 340px;
      border: 1px solid rgba(255, 255, 255, .15);
      text-align: right
    }

    .sp-media .chat-mock svg {
      width: 44px;
      height: 44px;
      color: var(--gold)
    }

    .sp-body {
      display: flex;
      flex-direction: column;
      max-height: calc(100dvh - 40px)
    }

    .sp-kind {
      padding: 4px 10px;
      border-radius: 99px;
      background: var(--gs);
      color: var(--gold);
      font-size: 11px;
      font-weight: 800;
      display: inline-block;
      margin-bottom: 10px;
      align-self: flex-start
    }

    .sp-title {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 8px;
      line-height: 1.4
    }

    .sp-desc {
      font-size: 12.5px;
      color: var(--mut);
      line-height: 2;
      margin-bottom: 18px
    }

    .sp-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: color-mix(in srgb, var(--bg2) 50%, transparent)
    }

    .sp-meta-item {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .sp-meta-item small {
      font-size: 11px;
      color: var(--mut)
    }

    .sp-meta-item b {
      font-size: 12px;
      font-weight: 700
    }

    .sp-prompt {
      padding: 12px 14px;
      border: 1px dashed var(--line2);
      border-radius: 12px;
      background: color-mix(in srgb, var(--bg2) 50%, transparent);
      font-size: 12px;
      color: var(--mut);
      line-height: 1.9;
      margin-bottom: 20px;
      max-height: 120px;
      overflow-y: auto
    }

    .sp-actions {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .sp-use {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      color: var(--ong);
      font-size: 12.5px;
      font-weight: 800;
      box-shadow: 0 8px 20px -12px var(--gold);
      transition: .2s
    }

    .sp-use:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px -10px var(--gold)
    }

    .sp-use svg {
      width: 15px;
      height: 15px
    }

    .sp-secondary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      min-height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line2);
      background: transparent;
      color: var(--mut);
      font-size: 12px;
      transition: .2s
    }

    .sp-secondary:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    .sp-close {
      position: absolute;
      top: 14px;
      left: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      z-index: 5;
      font-size: 20px;
      line-height: 1;
      backdrop-filter: blur(6px);
      display: grid;
      place-items: center
    }

    .sp-close:hover {
      background: rgba(0, 0, 0, .8)
    }

    @media(max-width:760px) {
      .sp-card {
        max-height: calc(100dvh - 24px)
      }

      .sp-body {
        padding: 18px 20px
      }
    }

    /* toast, lb */
    .lb {
      position: fixed;
      inset: 0;
      background: rgba(5, 6, 10, .8);
      backdrop-filter: blur(6px);
      display: none;
      place-items: center;
      z-index: 70;
      padding: 20px
    }

    .lb.on {
      display: grid
    }

    .lb img {
      max-width: 92vw;
      max-height: 86vh;
      border-radius: 16px
    }

    .toast {
      position: fixed;
      bottom: 26px;
      left: 50%;
      transform: translate(-50%, 20px);
      background: var(--tx);
      color: var(--bg);
      padding: 9px 18px;
      border-radius: 12px;
      opacity: 0;
      transition: .25s;
      z-index: 80;
      pointer-events: none;
      max-width: 90vw;
      box-shadow: 0 12px 32px -16px #000;
      font-size: 12px
    }

    .toast.on {
      opacity: 1;
      transform: translate(-50%, 0)
    }

    /* ============ OVERVIEW ============ */
    .ov-h {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 1100px;
      margin: 0 auto 20px
    }

    .ov-h h1 {
      font-size: 20px;
      font-weight: 800;
      flex: 1
    }

    .ov-h h1 small {
      display: block;
      font-size: 12.5px;
      font-weight: 400;
      color: var(--mut)
    }

    .ov {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px
    }

    .w {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 18px;
      box-shadow: 0 12px 32px -28px #000;
      transition: border-color .2s
    }

    .w:hover {
      border-color: var(--line2)
    }

    .w h3 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between
    }

    .w h3 a {
      font-size: 12px;
      color: var(--gold);
      font-weight: 400
    }

    .ring {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .ring svg {
      width: 92px;
      height: 92px;
      transform: rotate(-90deg)
    }

    .ring circle {
      fill: none;
      stroke-width: 9
    }

    .ring .bgc {
      stroke: var(--line)
    }

    .ring .fg {
      stroke: var(--gold);
      stroke-linecap: round;
      stroke-dasharray: 264;
      transition: stroke-dashoffset 1s
    }

    .ring b {
      font-size: 22px;
      display: block;
      line-height: 1.3
    }

    .ring small {
      color: var(--mut)
    }

    .spark {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 84px
    }

    .spark i {
      flex: 1;
      background: var(--line2);
      border-radius: 5px 5px 2px 2px;
      height: var(--h)
    }

    .spark i:last-child {
      background: var(--gold)
    }

    .spark i:hover {
      background: var(--teal)
    }

    .api {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

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

    .api .s {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent)
    }

    .api .s.sl {
      background: var(--gold);
      box-shadow: 0 0 0 3px var(--gs)
    }

    .api em {
      margin-inline-start: auto;
      font-style: normal;
      color: var(--mut);
      font-size: 12px;
      direction: ltr
    }

    .sec {
      max-width: 1100px;
      margin: 26px auto 0
    }

    .sec-h {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px
    }

    .sec-h h2 {
      font-size: 16px;
      font-weight: 800
    }

    .flt {
      display: flex;
      gap: 4px;
      margin-inline-start: auto
    }

    .flt button {
      padding: 3px 12px;
      border-radius: 99px;
      color: var(--mut);
      border: 1px solid transparent;
      font-size: 13px
    }

    .flt button.on {
      border-color: var(--gold);
      color: var(--gold)
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px
    }

    .item {
      border: 1px solid var(--line);
      background: var(--card);
      border-radius: 16px;
      overflow: hidden;
      animation: in .4s both;
      box-shadow: 0 12px 32px -28px #000;
      transition: border-color .2s, transform .2s
    }

    .item:hover {
      border-color: var(--gold);
      transform: translateY(-2px)
    }

    .thumb2 {
      aspect-ratio: 4/3;
      display: grid;
      place-items: center;
      color: rgba(255, 255, 255, .9)
    }

    .meta {
      padding: 8px 12px
    }

    .meta p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500
    }

    .meta small {
      color: var(--mut)
    }

    /* ============ MOBILE ============ */
    @media(max-width:900px) {
      .ov {
        grid-template-columns: 1fr
      }

      .auth-card {
        grid-template-columns: minmax(0, .75fr) minmax(360px, 1.25fr)
      }

      .auth-aside {
        padding: 24px
      }

      .auth-aside-copy h2 {
        font-size: 22px
      }

      .auth-art {
        height: 150px
      }
    }

    @media(max-width:760px) {

      .sidebar {
        border-inline-end: 0;
        border-top: 1px solid var(--line);
      }

      .app[data-sidebar="open"] .sidebar {
        max-height: 72dvh;
        overflow-y: auto;
      }

      .sb-scroll {
        max-height: 42dvh
      }

      .hd-search {
        display: none !important
      }

      .hd-coin {
        display: none !important
      }

      #hdNotif {
        display: none !important
      }

      .hd-divider {
        display: none !important
      }

      .hd-user b {
        display: none
      }

      .hd-user {
        padding: 3px
      }

      .feed {
        padding: 72px 12px 10px
      }

      .empty-state .feed {
        padding: 72px 12px 22px
      }

      .m.u .bub {
        max-width: 92%
      }

      .cwrap {
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom))
      }

      .modes button {
        padding-inline: 4px
      }

      .tray {
        padding-inline: 8px
      }

      .fc {
        width: 100%
      }

      textarea {
        padding-inline: 12px
      }

      .row .cnt {
        display: none
      }

      .scroll-down {
        bottom: 170px
      }

      .auth-screen {
        padding: 12px
      }

      .auth-card {
        display: block;
        min-height: 0
      }

      .auth-aside {
        display: none
      }

      .auth-content {
        min-height: min(680px, calc(100dvh - 24px))
      }

      .auth-mobile-brand {
        display: flex
      }

      .auth-content-top {
        margin-bottom: 24px
      }

      .auth-step h1 {
        font-size: 21px
      }

      .auth-lead {
        margin-bottom: 20px
      }

      #vOver {
        padding: 72px 12px 40px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }
    }

    /* Workspace components */
    /* Sidebar */

    .sb-head {
      justify-content: space-between;
      padding: 14px 12px 8px;
      border: 0
    }

    .sb-brand {
      display: flex;
      flex: 1
    }

    .sb-brand-t {
      display: flex;
      flex-direction: column;
      line-height: 1.35
    }

    .sb-brand-t small {
      font-size: 11px;
      color: var(--mut)
    }

    .sb-logo {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      font-size: 17px
    }

    .sb-toggle {
      border: 1px solid var(--line);
      background: var(--card)
    }

    .sb-new {
      border-radius: 12px;
      padding: 11px 13px;
      font-size: 12.5px
    }

    .sb-tools {
      border: 0;
      padding: 6px 10px 4px;
      gap: 3px
    }

    .sb-tool {
      overflow: visible;
      padding: 9px 11px;
      border-radius: 12px;
      font-size: 12.5px
    }

    .sb-tool svg {
      width: 17px;
      height: 17px
    }

    .sb-tool.on {
      background: var(--gs);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent)
    }

    .sb-scroll {
      border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
      margin-top: 8px;
      padding-top: 10px
    }

    .sb-item {
      border-radius: 12px;
      padding: 8px 9px
    }

    .sb-item-icon {
      width: 26px;
      height: 26px;
      border-radius: 8px
    }

    .sb-foot {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .sb-credit {
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(145deg, var(--gs), transparent)
    }

    .sb-credit-top {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--mut)
    }

    .sb-credit-top b {
      color: var(--gold)
    }

    .sb-bar {
      height: 5px;
      border-radius: 8px;
      background: var(--line);
      margin: 8px 0 9px;
      overflow: hidden
    }

    .sb-bar i {
      display: block;
      height: 100%;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--gold2), var(--gold));
      transition: width .6s
    }

    .sb-upgrade {
      display: block;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--gold)
    }

    .sb-user {
      border: 1px solid var(--line);
      background: var(--card)
    }

    .sb-user-chv {
      width: 14px;
      height: 14px;
      color: var(--mut)
    }

    @media(min-width:761px) {
      .sidebar {
        overflow: visible
      }

      .app[data-sidebar=collapsed] .sb-head {
        flex-direction: column;
        gap: 10px
      }

      .app[data-sidebar=collapsed] .sb-brand {
        display: flex;
        flex: none
      }

      .app[data-sidebar=collapsed] .sb-brand-t,
      .app[data-sidebar=collapsed] .sb-credit,
      .app[data-sidebar=collapsed] .sb-user-chv {
        display: none
      }

      .app[data-sidebar=collapsed] .sb-toggle {
        margin: 0
      }

      .app[data-sidebar=collapsed] .sb-scroll {
        display: none
      }

      .app[data-sidebar=collapsed] .sb-user {
        border-color: transparent;
        background: none
      }
    }

    @media(max-width:760px) {
      .app[data-sidebar=open] .sb-backdrop {
        backdrop-filter: blur(3px)
      }

      .hd-up,
      .hd-title small {
        display: none
      }
    }

    .audio-wave {
      direction: ltr
    }

    /* Header */

    .hd-title {
      display: flex;
      align-items: center;
      min-width: 0
    }

    .hd-ti {
      display: grid;
      place-items: center;
      color: #fff;
      flex: none;
      box-shadow: 0 6px 14px -8px #000
    }

    .hd-title b {
      display: block;
      line-height: 1.35;
      white-space: nowrap
    }

    .hd-title small {
      display: block;
      font-size: 12px;
      color: var(--mut);
      line-height: 1.35;
      white-space: nowrap
    }

    .hd-title small::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      margin-inline-end: 5px;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent)
    }

    .hd-search {
      max-width: 380px;
      background: color-mix(in srgb, var(--bg) 55%, transparent)
    }

    .hd-coin {
      gap: 7px
    }

    .hd-coin i {
      height: 4px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--gold) 22%, transparent);
      overflow: hidden
    }

    .hd-coin i b {
      display: block;
      height: 100%;
      background: var(--gold);
      border-radius: 8px;
      transition: width .6s
    }

    .hd-up {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color: var(--ong);
      font-size: 12px;
      font-weight: 800;
      transition: .2s
    }

    .hd-up:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px -8px var(--gold)
    }

    .hd-up svg {
      width: 12px;
      height: 12px
    }

    /* Viewer / players */
    @media(min-width:761px) {
      .sp-card {
        grid-template-columns: 1.5fr 1fr
      }

      .sp-media {
        min-height: 440px
      }
    }

    @media(max-width:760px) {
      .sp-media[data-k=voice] {
        max-height: none
      }

      .sp-media[data-k=image],
      .sp-media[data-k=video] {
        height: 240px
      }

      .pv-nav {
        opacity: 1 !important
      }
    }

    .pv-nav {
      position: absolute;
      top: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5);
      color: #fff;
      display: grid;
      place-items: center;
      backdrop-filter: blur(8px);
      z-index: 6;
      transition: .2s;
      opacity: 0
    }

    .sp-media:hover .pv-nav {
      opacity: 1
    }

    .pv-nav:hover {
      background: var(--gold);
      color: #06132c
    }

    .pv-nav.prev {
      right: 12px
    }

    .pv-nav.prev svg {
      transform: rotate(-90deg)
    }

    .pv-nav.next {
      left: 12px
    }

    .pv-nav.next svg {
      transform: rotate(90deg)
    }

    .pv-count {
      position: absolute;
      top: 16px;
      right: 16px;
      padding: 3px 10px;
      border-radius: 99px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-size: 12px;
      z-index: 6;
      backdrop-filter: blur(6px)
    }

    .pv-stage {
      position: absolute;
      inset: 0;
      overflow: hidden;
      display: grid;
      place-items: center;
      touch-action: none
    }

    .pv-stage img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform .12s;
      user-select: none
    }

    .pv-stage.zoomed {
      cursor: grab
    }

    .pv-bar {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 5px;
      border-radius: 16px;
      background: rgba(14, 16, 24, .72);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, .1);
      color: #fff;
      z-index: 6;
      direction: ltr
    }

    .pv-bar button {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #e3eafa
    }

    .pv-bar button:hover {
      background: rgba(255, 255, 255, .14)
    }

    .pv-bar .lbl {
      min-width: 48px;
      text-align: center;
      font-size: 12px
    }

    .pv-bar svg {
      width: 16px;
      height: 16px
    }

    .pv-video {
      position: absolute;
      inset: 0;
      background: #000;
      display: flex;
      direction: ltr
    }

    .sp-media .pv-video video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      cursor: pointer
    }

    .pv-ctrl {
      position: absolute;
      inset: auto 0 0 0;
      padding: 28px 14px 10px;
      background: linear-gradient(transparent, rgba(0, 0, 0, .88));
      color: #fff;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: opacity .25s
    }

    .pv-video:not(.paused):not(:hover) .pv-ctrl {
      opacity: 0
    }

    .pv-bigplay {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 68px;
      height: 68px;
      margin: -34px 0 0 -34px;
      border-radius: 50%;
      background: rgba(7,210,248,.94);
      color: #06132c;
      display: grid;
      place-items: center;
      box-shadow: 0 10px 36px rgba(0, 0, 0, .5);
      pointer-events: none;
      opacity: 0;
      transition: .2s
    }

    .pv-bigplay svg {
      width: 26px;
      height: 26px
    }

    .pv-video.paused .pv-bigplay {
      opacity: 1
    }

    .pv-row {
      display: flex;
      align-items: center;
      gap: 4px
    }

    .pv-row button {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      flex: none
    }

    .pv-row button:hover {
      background: rgba(255, 255, 255, .16)
    }

    .pv-row svg {
      width: 18px;
      height: 18px
    }

    .pv-row .t {
      font-size: 12px;
      margin: 0 6px;
      white-space: nowrap
    }

    .pv-row .sp {
      flex: 1
    }

    .pv-row .spd,
    .pv-aud-ctrl .spd {
      width: auto;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700
    }

    .pv-vol {
      width: 72px !important
    }

    input.rg {
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 8px;
      outline: 0;
      cursor: pointer;
      width: 100%;
      background: linear-gradient(90deg, var(--gold) var(--p, 0%), rgba(255, 255, 255, .25) var(--p, 0%))
    }

    .rg::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(7,210,248,.35)
    }

    .rg::-moz-range-thumb {
      width: 13px;
      height: 13px;
      border: 0;
      border-radius: 50%;
      background: #fff
    }

    .pv-audio {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 34px 28px;
      width: 100%;
      color: #fff;
      direction: ltr
    }

    .pv-orb {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2a2561, #d339fb);
      display: grid;
      place-items: center;
      box-shadow: 0 0 70px rgba(211,57,251,.4)
    }

    .pv-orb svg {
      width: 52px;
      height: 52px
    }

    .pv-audio.playing .pv-orb {
      animation: orb 1.6s ease-in-out infinite
    }

    @keyframes orb {
      50% {
        transform: scale(1.07);
        box-shadow: 0 0 95px rgba(211,57,251,.62)
      }
    }

    .pv-wave {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 76px;
      width: 100%;
      max-width: 460px;
      cursor: pointer
    }

    .pv-wave i {
      flex: 1;
      background: rgba(255, 255, 255, .28);
      border-radius: 3px;
      height: var(--h);
      min-height: 3px;
      transition: background .15s
    }

    .pv-wave i.played {
      background: var(--gold)
    }

    .pv-tm {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 460px;
      font-size: 12px;
      opacity: .85
    }

    .pv-aud-ctrl {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .pv-aud-ctrl button {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      display: grid;
      place-items: center;
      color: #fff
    }

    .pv-aud-ctrl button:hover {
      background: rgba(255, 255, 255, .22)
    }

    .pv-aud-ctrl .main {
      width: 62px;
      height: 62px;
      background: var(--gold);
      color: #06132c
    }

    .pv-aud-ctrl .on {
      color: var(--gold)
    }

    .pv-aud-ctrl .spd {
      border-radius: 99px
    }

    .pv-aud-ctrl svg {
      width: 18px;
      height: 18px
    }

    /* Workspace layout */

    .sidebar {
      height: 100%;
      min-height: 0
    }

    .main {
      height: 100%;
      min-height: 0
    }

    /* header: slim flush bar */
    .hd {
      border-width: 0 0 1px;
      background: color-mix(in srgb, var(--bg2) 82%, transparent)
    }

    .hd:hover {
      border-color: var(--line)
    }

    .hd-icon svg {
      stroke-width: 1.5
    }

    .hd-icon .badge {
      top: 3px;
      right: 3px;
      min-width: 12px;
      height: 12px;
      font-size: 11px
    }

    .hd-menu {
      position: fixed;
      top: auto;
      bottom: 14px;
      inset-inline-start: calc(var(--sb-w) + 10px);
      inset-inline-end: auto;
      transform-origin: bottom right
    }

    @media(max-width:760px) {

      .hd-menu {
        bottom: 76px
      }
    }

    /* sidebar */
    .sb-search {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 12px 6px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: color-mix(in srgb, var(--card) 70%, transparent);
      color: var(--mut);
      font-size: 12px;
      transition: .2s;
      flex: none
    }

    .sb-search:focus-within {
      border-color: var(--gold);
      color: var(--tx)
    }

    .sb-search svg {
      width: 14px;
      height: 14px
    }

    .sb-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: none;
      font-size: 12px;
      color: var(--tx)
    }

    .sb-search kbd {
      font: 600 9px var(--font);
      padding: 0 5px;
      border: 1px solid var(--line);
      border-radius: 4px
    }

    .sb-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 4px 10px;
      flex: none
    }

    .sb-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 11px;
      border-radius: 12px;
      color: var(--mut);
      font-size: 12.5px;
      position: relative;
      transition: .15s;
      text-align: right;
      white-space: nowrap
    }

    .sb-nav-item svg {
      width: 17px;
      height: 17px;
      flex: none
    }

    .sb-nav-item:hover {
      background: var(--gs);
      color: var(--tx)
    }

    .sb-nav-item.on {
      background: var(--gs);
      color: var(--gold);
      font-weight: 700
    }

    .sb-nav-item.on::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 9px;
      bottom: 9px;
      width: 3px;
      border-radius: 3px;
      background: var(--gold)
    }

    .sb-pro {
      color: var(--gold)
    }

    .sb-pro em {
      margin-inline-start: auto;
      font: 800 8.5px var(--font);
      padding: 1px 7px;
      border-radius: 99px;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      color: var(--ong)
    }

    @media(min-width:761px) {
      .app[data-sidebar=collapsed] .sb-search {
        display: none
      }

      .app[data-sidebar=collapsed] .sb-nav-item {
        justify-content: center;
        padding: 10px
      }

      .app[data-sidebar=collapsed] .sb-nav-item span,
      .app[data-sidebar=collapsed] .sb-nav-item em {
        display: none
      }

      .app[data-sidebar=collapsed] .sb-nav-item::after {
        content: attr(data-tip);
        position: absolute;
        inset-inline-start: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        padding: 5px 10px;
        background: var(--tx);
        color: var(--bg);
        border-radius: 8px;
        font-size: 12px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: .15s;
        z-index: 5
      }

      .app[data-sidebar=collapsed] .sb-nav-item:hover::after {
        opacity: 1
      }
    }

    /* viewer: other samples strip */
    .sp-more {
      margin-bottom: 16px
    }

    .sp-more b {
      font-size: 12px;
      color: var(--mut);
      display: block;
      margin-bottom: 8px
    }

    .sp-more>div {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .sp-th {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      border: 2px solid transparent;
      display: grid;
      place-items: center;
      color: #fff;
      opacity: .75;
      transition: .2s
    }

    .sp-th:hover {
      opacity: 1
    }

    .sp-th.on {
      border-color: var(--gold);
      opacity: 1
    }

    .sp-th svg {
      width: 16px;
      height: 16px
    }

    /* login: glass over the workspace */
    .auth-screen {
      background: radial-gradient(55% 45% at 50% 38%, rgba(7,210,248,.16), transparent 70%), rgba(8, 10, 18, .42);
      backdrop-filter: blur(16px) saturate(1.25);
      -webkit-backdrop-filter: blur(16px) saturate(1.25)
    }

    .auth-backdrop,
    .auth-aside {
      display: none
    }

    .auth-card {
      display: block;
      min-height: 0;
      background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
      border: 1px solid rgba(255, 255, 255, .2);
      backdrop-filter: blur(34px) saturate(1.7);
      -webkit-backdrop-filter: blur(34px) saturate(1.7);
      box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
      animation: authPop .45s cubic-bezier(.2, .9, .3, 1) both
    }

    @keyframes authPop {
      from {
        opacity: 0;
        transform: translateY(18px) scale(.96)
      }
    }

    .auth-content {
      background: none;
      min-height: 0
    }

    .auth-mobile-brand {
      display: flex
    }

    .auth-content-top {
      margin-bottom: 20px
    }

    .auth-phone-field,
    .otp-digit {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .18)
    }

    .otp-digit:focus {
      background: rgba(255, 255, 255, .12)
    }

    .auth-security-note {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .12)
    }

    .auth-demo-code {
      background: rgba(7,210,248,.09)
    }

    .auth-content-foot {
      border-top-color: rgba(255, 255, 255, .12)
    }

    .auth-lead,
    .auth-field-hint {
      color: #b6c3e2
    }

    /* Surface styling */
    /* Header: slim floating glass */
    .hd {
      inset-inline: 0;
      margin-inline: auto;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 16px;
      background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)), color-mix(in srgb, var(--bg2) 38%, transparent);
      backdrop-filter: blur(26px) saturate(1.9);
      -webkit-backdrop-filter: blur(26px) saturate(1.9);
      box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .14)
    }

    .hd:hover {
      border-color: rgba(255, 255, 255, .22);
      box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18)
    }

    [data-theme=light] .hd {
      background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .4));
      border-color: rgba(255, 255, 255, .8);
      box-shadow: 0 10px 30px -16px rgba(60, 45, 10, .35), inset 0 1px 0 #fff
    }

    .hd-coin {
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 8px
    }

    .hd-coin i {
      width: 26px
    }

    .hd-new {
      border-radius: 8px
    }

    .hd-divider {
      height: 14px;
      margin: 0 2px
    }

    @media(max-width:760px) {

      .feed,
      .empty-state .feed,
      #vOver {
        padding-top: 58px
      }
    }

    /* Sidebar: floating compact panel + edge toggle */
    .sidebar {
      position: relative;
      z-index: 60
    }

    .sb-toggle {
      position: absolute;
      inset-inline-end: -12px;
      top: 28px;
      width: 24px;
      height: 24px;
      margin: 0 !important;
      border-radius: 50%;
      border: 1px solid var(--line2);
      background: var(--card);
      color: var(--mut);
      z-index: 70;
      box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
      transition: .2s
    }

    .sb-toggle:hover {
      background: var(--gold);
      color: var(--ong);
      border-color: var(--gold)
    }

    .sb-toggle svg {
      width: 12px;
      height: 12px;
      transition: transform .3s
    }

    .app[data-sidebar=open] .sb-toggle svg {
      transform: rotate(-90deg)
    }

    .app[data-sidebar=collapsed] .sb-toggle svg {
      transform: rotate(90deg)
    }

    @media(min-width:761px) {

      .sidebar {
        margin: 10px 0;
        margin-inline-start: 10px;
        height: calc(100% - 20px);
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg2) 88%, transparent);
        backdrop-filter: blur(20px);
        box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6)
      }

      .sb-search {
        margin: 4px 10px 6px;
        padding: 6px 9px;
        font-size: 12px
      }

      .sb-credit {
        padding: 9px 10px;
        border-radius: 12px
      }

      .sb-user {
        border-radius: 12px
      }

      .app[data-sidebar=collapsed] .sb-head {
        padding: 12px 0 6px
      }
    }

    /* Login: compact glass */
    .auth-card {
      width: min(390px, 100%) !important;
      border-radius: 26px
    }

    .auth-content {
      padding: 34px 30px 26px !important;
      text-align: center;
      position: relative
    }

    .auth-content .auth-mark {
      margin: 0 auto 18px;
      width: 46px;
      height: 46px;
      border-radius: 16px;
      font-size: 23px
    }

    .auth-dismiss {
      position: absolute;
      top: 14px;
      inset-inline-start: 14px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .14);
      color: #b6c3e2
    }

    .auth-dismiss svg {
      width: 13px;
      height: 13px
    }

    .auth-progress {
      margin: 0 auto 22px;
      width: 56px
    }

    .auth-step h1 {
      font-size: 20px
    }

    .auth-lead {
      margin: 6px 0 22px;
      font-size: 12px
    }

    .auth-label {
      text-align: start;
      font-size: 12px
    }

    .auth-phone-field {
      min-height: 50px;
      border-radius: 16px
    }

    .auth-primary {
      min-height: 46px;
      border-radius: 12px;
      font-size: 12.5px;
      margin-top: 16px
    }

    .auth-primary.loading {
      pointer-events: none;
      opacity: .75
    }

    .auth-primary.loading::after {
      content: "";
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(36, 26, 8, .3);
      border-top-color: #06132c;
      animation: rot .7s linear infinite
    }

    .auth-message {
      min-height: 16px;
      font-size: 12px
    }

    .auth-back {
      margin: 0 0 16px;
      position: absolute;
      top: 18px;
      inset-inline-end: 18px
    }

    .otp-boxes {
      gap: 7px;
      margin: 4px 0 2px
    }

    .otp-digit {
      width: 46px;
      height: 54px;
      border-radius: 12px;
      font-size: 22px;
      caret-color: transparent
    }

    .otp-digit.filled {
      border-color: rgba(7,210,248,.6);
      background: rgba(7,210,248,.08)
    }

    .auth-demo-code {
      justify-content: center;
      margin-top: 12px;
      font-size: 12px;
      border-radius: 8px
    }

    .auth-demo-code b {
      margin-inline-start: 0;
      font-size: 12px
    }

    .auth-resend {
      font-size: 12px;
      margin-top: 12px
    }

    .auth-resend:disabled {
      opacity: .55;
      cursor: default
    }

    .auth-resend:disabled:hover {
      color: #9aa8cc
    }

    .auth-resend b {
      color: #07d2f8;
      font-variant-numeric: tabular-nums
    }

    /* ===== Retained visual refinements (without viewport scaling) ===== */
    .sp-media .pv-video video {
      max-height: none
    }

    .sb-item-sub,
    .sb-section-title {
      font-size: 12px
    }

    body {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility
    }

    @media(min-width:761px) {

      .hd {
        width: min(680px, calc(100% - 28px))
      }
    }

    /* ===== Composer surface refinement ===== */
    .cwrap {
      border-top: 0 !important;
      background: linear-gradient(to top, var(--bg) 60%, transparent) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      padding-top: 16px
    }

    .empty-state .cwrap {
      background: transparent !important
    }

    /* ======================================================================
   RESPONSIVE CORE — consolidated layout corrections
   Keeps the existing application logic and visual identity intact.
   ====================================================================== */
    html,
    body {
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden
    }

    html {
      scrollbar-gutter: auto
    }

    body {
      zoom: 1 !important
    }

    .app {
      width: 100%;
      height: 100dvh;
      min-height: 0;
      min-width: 0;
      grid-template-rows: minmax(0, 1fr)
    }

    .main,
    #vChat,
    .feed,
    .col {
      min-width: 0;
      min-height: 0
    }

    #vChat {
      --composer-height: 160px
    }

    .scroll-down {
      bottom: calc(var(--composer-height, 160px) + 12px);
      inset-inline-end: clamp(12px, 2vw, 24px)
    }

    /* Menus and layers: the drawer must sit above its own backdrop. */
    .sb-backdrop {
      display: none
    }

    .hd {
      z-index: 70
    }

    .hd-menu {
      z-index: 130
    }

    @media(min-width:761px) {
      .sidebar {
        z-index: 60
      }

      .sb-backdrop {
        display: none !important
      }
    }

    /* Tablet: reserve a compact rail by default; do not let the sidebar consume
   the main workspace width on 7–10 inch screens. */
    @media (min-width:761px) and (max-width:1024px) {

      .hd {
        gap: 6px
      }

      .hd-coin,
      #hdNotif {
        display: none !important
      }

      .hd-new {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center
      }

      .hd-new span {
        display: none
      }

      .ov {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    /* Mobile: a true bottom drawer, with a separate backdrop and safe-area inset. */
    @media(max-width:760px) {
      .app {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr);
        height: 100dvh
      }

      .main {
        width: 100%;
        height: 100%;
        min-height: 0
      }

      .hd {
        z-index: 70
      }

      .hd-hamburger {
        display: grid !important
      }

      .hd-title {
        flex: 0 1 auto;
        min-width: 0
      }

      .hd-ti {
        border-radius: 8px
      }

      .hd-title b {
        overflow: hidden;
        text-overflow: ellipsis
      }

      .hd-actions {
        margin-inline-start: auto
      }

      .hd-coin,
      #hdNotif,
      .hd-divider {
        display: none !important
      }

      .hd-new {
        justify-content: center
      }

      .hd-new span {
        display: none
      }

      .feed,
      .empty-state .feed {
        padding: 64px 12px 16px;
        scroll-padding-bottom: 20px
      }

      #vOver {
        padding: 66px 12px calc(24px + env(safe-area-inset-bottom))
      }

      .cwrap {
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
        padding-top: 12px
      }

      .empty-state .cwrap {
        padding: 0 !important
      }

      .cmp {
        border-radius: 18px
      }

      .top2 {
        padding: 8px 8px 3px;
        gap: 6px
      }

      .modes {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-width: 0
      }

      .modes button {
        min-width: 0;
        padding: 4px 2px;
        gap: 3px;
        font-size: clamp(9px, 2.9vw, 10.5px);
        white-space: nowrap
      }

      .modes button svg {
        width: 13px;
        height: 13px
      }

      #sels {
        display: contents
      }

      .sel {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        max-width: none
      }

      .st {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        gap: 5px;
        padding-inline: 7px;
        font-size: 12px
      }

      .st b {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }

      .menu {
        min-width: min(230px, calc(100vw - 28px));
        max-width: calc(100vw - 28px)
      }

      textarea {
        min-height: 52px;
        max-height: 160px;
        padding: 9px 12px 5px;
        font-size: 14px
      }

      .row {
        gap: 5px;
        padding: 3px 8px 8px
      }

      .rbtn {
        width: 36px;
        height: 36px
      }

      .send {
        min-width: 76px;
        height: 36px;
        padding-inline: 10px
      }

      .scroll-down {
        inset-inline-end: 12px;
        bottom: calc(var(--composer-height, 160px) + 10px);
        padding: 6px 10px
      }

      .sidebar {
        position: fixed !important;
        inset: auto 0 0 0;
        width: 100%;
        min-height: 0;
        margin: 0;
        border: 1px solid var(--line);
        border-inline: 0;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        z-index: 110 !important;
        visibility: hidden;
        padding-bottom: env(safe-area-inset-bottom);
        transition: max-height .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s;
        box-shadow: 0 -14px 36px -18px rgba(0, 0, 0, .45);
      }

      .app[data-sidebar=open] .sidebar {
        max-height: min(76dvh, 680px);
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        visibility: visible;
        transition: max-height .32s cubic-bezier(.2, .8, .2, 1), visibility 0s;
      }

      .app[data-sidebar=open] .sb-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100;
        background: rgba(5, 7, 12, .52);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
      }

      .sb-toggle {
        display: none !important
      }

      .sb-search {
        margin: 4px 12px 8px
      }

      .sb-scroll {
        flex: 1 1 auto;
        max-height: 34dvh;
        overflow-y: auto;
        min-height: 80px
      }

      .sb-foot {
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
        gap: 7px
      }

      .hd-menu {
        position: fixed;
        inset-inline: 10px;
        top: auto;
        bottom: calc(72px + env(safe-area-inset-bottom));
        min-width: 0;
        z-index: 130
      }

      .landing-wrap {
        gap: 12px;
        padding: 4px 0 12px
      }

      .landing-hero {
        padding: 12px 0 2px
      }

      .landing-hero h2 {
        font-size: clamp(20px, 5.8vw, 24px);
        line-height: 1.55
      }

      .landing-hero p {
        font-size: 12px
      }

      .quick-chips {
        gap: 5px
      }

      .quick-chip {
        padding: 5px 9px;
        font-size: 12px
      }

      .sample-gallery {
        margin-top: 4px
      }

      .sample-gallery-head {
        gap: 8px;
        margin-bottom: 10px
      }

      .sample-gallery-head h3 {
        font-size: 13px
      }

      .sample-gallery-head small {
        font-size: 11px
      }

      .sample-filters {
        width: 100%;
        justify-content: flex-start
      }

      .sample-filters button {
        padding: 5px 10px;
        font-size: 12px
      }

      .img-masonry {
        columns: 2 132px;
        column-gap: 8px
      }

      .img-masonry .media-card {
        margin-bottom: 8px
      }

      .media-card {
        border-radius: 12px
      }

      .media-card .thumb-info {
        padding: 8px 9px
      }

      .media-card .thumb-info b {
        font-size: 12px
      }

      .media-card .thumb-info small {
        font-size: 11px
      }

      .play-fab {
        width: 38px;
        height: 38px
      }

      .auth-screen {
        padding: 12px;
        align-items: center
      }

      .auth-card {
        width: min(390px, calc(100vw - 24px)) !important;
        max-height: calc(100dvh - 24px);
        overflow: auto;
        border-radius: 22px
      }

      .auth-content {
        padding: 28px 20px 20px !important;
        min-height: 0;
        text-align: center
      }

      .auth-phone-field input {
        font-size: 16px
      }

      .otp-boxes {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(4px, 1.7vw, 7px);
        width: 100%;
        max-width: 300px;
        margin: 4px auto 2px
      }

      .otp-digit {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 54px;
        aspect-ratio: .82;
        border-radius: 12px
      }
    }

    /* Touch screens do not have hover: keep sample names discoverable. */
    @media(hover:none), (pointer:coarse) {
      .media-card .thumb::after {
        opacity: 1
      }

      .media-card .thumb-info {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* Preview dialog: both grid tracks are shrinkable, so controls never get cut
   off by the card. The details pane owns its own scroll area. */
    .sp-modal {
      padding: clamp(10px, 2vw, 24px);
      overflow: auto
    }

    .sp-card {
      width: min(1040px, 100%);
      height: min(780px, calc(100dvh - 40px));
      max-height: calc(100dvh - 40px);
      grid-template-columns: minmax(0, 1.2fr) minmax(300px, .9fr);
      grid-template-rows: minmax(0, 1fr);
      min-height: 0;
    }

    .sp-media,
    .sp-body {
      min-width: 0;
      min-height: 0;
      max-height: none
    }

    .sp-media {
      height: 100%;
      min-height: 0
    }

    .sp-body {
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 24px clamp(18px, 2.4vw, 30px)
    }

    .sp-actions {
      margin-top: 16px
    }

    @media(max-width:760px) {
      .sp-modal {
        padding: 10px;
        place-items: center
      }

      .sp-card {
        width: 100%;
        max-width: 560px;
        height: min(760px, calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(150px, 30dvh) minmax(0, 1fr);
        border-radius: 18px;
      }

      .sp-media {
        height: auto;
        min-height: 0;
        max-height: none
      }

      .sp-body {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom))
      }

      .sp-title {
        font-size: 17px;
        margin-bottom: 6px
      }

      .sp-desc {
        font-size: 12px;
        margin-bottom: 12px
      }

      .sp-meta {
        gap: 7px;
        padding: 10px;
        margin-bottom: 12px
      }

      .sp-prompt {
        margin-bottom: 12px;
        max-height: 100px
      }

      .sp-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        gap: 7px;
        margin-top: 12px;
        padding: 12px 0 4px;
        background: linear-gradient(180deg, transparent 0, var(--card) 14px)
      }

      .sp-use {
        min-height: 43px
      }

      .sp-secondary {
        min-height: 39px
      }

      .pv-audio {
        padding: 10px 12px;
        gap: 9px
      }

      .pv-orb {
        width: 76px;
        height: 76px
      }

      .pv-orb svg {
        width: 34px;
        height: 34px
      }

      .pv-wave {
        height: 44px;
        gap: 2px
      }

      .pv-aud-ctrl {
        gap: 6px
      }

      .pv-aud-ctrl button {
        width: 34px;
        height: 34px
      }

      .pv-aud-ctrl .main {
        width: 48px;
        height: 48px
      }

      .pv-aud-ctrl .spd {
        width: auto;
        padding: 0 8px
      }

      .pv-row {
        gap: 2px
      }

      .pv-row button {
        width: 29px;
        height: 30px
      }

      .pv-row .t {
        font-size: 12px;
        margin: 0 3px
      }

      .pv-vol {
        display: none !important
      }
    }

    @media(max-width:360px) {

      .modes button {
        font-size: 11px
      }

      .modes button svg {
        width: 12px;
        height: 12px
      }

      .auth-content {
        padding-inline: 16px !important
      }

      .sp-body {
        padding-inline: 13px
      }
    }

    /* Keyboard focus and high-contrast text in the light theme. */
    :where(button, a, input, [tabindex]):focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px
    }

    [data-theme=light] {
      --mut: #626579;
      --gold: #94610f;
      --gold2: #80520f
    }

    /* ===== SIDEBAR HISTORY SUBVIEW + SLIGHTLY LARGER CHROME ===== */
    @media (min-width:761px) {
      .app {
        --sb-w: 80px;
        --sb-w-open: 260px
      }

      .sidebar {
        border-radius: 20px
      }

      .sb-head {
        min-height: 66px;
        padding: 14px 14px 10px;
        gap: 10px
      }

      .sb-logo {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 18px
      }

      .sb-name {
        font-size: 14px
      }

      .sb-brand-t small {
        font-size: 12px
      }

      .sb-nav {
        padding: 7px 10px;
        gap: 4px
      }

      .sb-nav-item {
        min-height: 44px;
        padding: 10px 12px;
        gap: 11px;
        font-size: 13.25px;
        border-radius: 12px
      }

      .sb-nav-item svg {
        width: 18px;
        height: 18px
      }

      .sb-nav-sep {
        height: 1px;
        margin: 5px 7px;
        background: var(--line);
        opacity: .8
      }

      .sb-history-head {
        padding: 14px 14px 10px
      }

      .sb-history-back {
        width: 38px;
        height: 38px
      }

      .sb-history-heading b {
        font-size: 14px
      }

      .sb-history-heading small {
        font-size: 12px
      }

      .sb-history-view .sb-search {
        margin: 5px 12px 10px;
        padding: 8px 11px
      }

      .sb-history-view .sb-search input {
        font-size: 12.5px
      }

      .sb-history-view .sb-scroll {
        padding: 8px 10px 14px
      }

      .sb-item {
        min-height: 43px;
        padding: 9px 10px;
        gap: 10px
      }

      .sb-item-icon {
        width: 29px;
        height: 29px
      }

      .sb-item-title {
        font-size: 12px
      }

      .sb-item-sub {
        font-size: 11px
      }

      .sb-foot {
        padding: 12px
      }

      .sb-user {
        padding: 8px;
        gap: 10px
      }

      .sb-av {
        width: 34px;
        height: 34px;
        font-size: 13px
      }

      .sb-user-name {
        font-size: 12px
      }

      .sb-user-plan {
        font-size: 12px
      }

      .app[data-sidebar=collapsed] .sb-history-view {
        display: none !important
      }

      .app[data-sidebar=collapsed] .sb-nav {
        padding-inline: 8px
      }

      .app[data-sidebar=collapsed] .sb-nav-item {
        min-height: 44px
      }
    }

    .sb-main-view {
      min-width: 0
    }

    .sb-history-view {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      overflow: hidden
    }

    .sb-history-view[hidden],
    .sb-main-view[hidden] {
      display: none !important
    }

    .sb-history-head {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px 12px 8px;
      flex: none
    }

    .sb-history-back {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      flex: none;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      color: var(--mut);
      transition: background .18s, color .18s, border-color .18s
    }

    .sb-history-back:hover {
      background: var(--gs);
      color: var(--gold);
      border-color: color-mix(in srgb, var(--gold) 35%, var(--line))
    }

    .sb-history-back svg {
      width: 18px;
      height: 18px;
      transform: rotate(-90deg)
    }

    .sb-history-heading {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0
    }

    .sb-history-heading b {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5
    }

    .sb-history-heading small {
      font-size: 11px;
      color: var(--mut)
    }

    .sb-history-view .sb-search {
      margin: 4px 10px 8px;
      padding: 8px 10px;
      flex: none
    }

    .sb-history-view .sb-search input {
      font-size: 12px
    }

    .sb-history-view .sb-scroll {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      overflow-x: hidden;
      margin: 0;
      padding: 7px 9px 12px;
      border-top: 0;
      scrollbar-gutter: stable
    }

    .sb-history-view .sb-section {
      margin-bottom: 13px
    }

    .sb-history-view .sb-section-title {
      padding: 6px 10px 7px;
      font-size: 12px
    }

    .sb-history-view .sb-item[hidden],
    .sb-history-view .sb-section[hidden] {
      display: none !important
    }

    .sb-history-empty {
      padding: 18px 14px;
      text-align: center;
      color: var(--mut);
      font-size: 12px
    }

    .sb-history-empty[hidden] {
      display: none !important
    }

    .sb-foot {
      margin-top: auto;
      flex: none
    }

    .sb-credit {
      display: none !important
    }

    .sb-user {
      min-height: 48px
    }

    /* Slightly increase header height, controls and title without changing its visual language. */
    .hd {
      top: 12px;
      width: min(760px, calc(100% - 32px));
      height: 48px;
      min-height: 48px;
      padding: 0 12px 0 14px;
      gap: 9px
    }

    .hd-title {
      gap: 9px
    }

    .hd-ti {
      width: 30px;
      height: 30px;
      border-radius: 8px
    }

    .hd-ti svg {
      width: 15px;
      height: 15px
    }

    .hd-title b {
      font-size: 13.5px
    }

    .hd-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px
    }

    .hd-icon svg {
      width: 17px;
      height: 17px
    }

    .hd-new {
      min-height: 36px;
      padding: 6px 12px;
      font-size: 12px;
      gap: 7px
    }

    .hd-new svg {
      width: 14px;
      height: 14px
    }

    .hd-actions {
      gap: 6px
    }

    .feed,
    .empty-state .feed {
      padding-top: 100px
    }

    #vOver {
      padding-top: 100px
    }

    @media (min-width:761px) and (max-width:1024px) {
      .app {
        --sb-w: 80px;
        --sb-w-open: 252px
      }

      .hd {
        width: calc(100% - 24px);
        inset-inline: 12px;
        height: 46px;
        min-height: 46px
      }

      .feed,
      .empty-state .feed {
        padding-top: 68px
      }

      #vOver {
        padding-top: 72px
      }
    }

    @media (max-width:760px) {
      .sidebar {
        display: flex;
        flex-direction: column;
        height: 0;
        max-height: 0;
        overflow: hidden
      }

      .app[data-sidebar=open] .sidebar {
        height: min(78dvh, 720px);
        max-height: min(78dvh, 720px);
        overflow: hidden
      }

      .sb-head {
        min-height: 62px;
        padding: 12px 16px 8px
      }

      .sb-logo {
        width: 38px;
        height: 38px;
        font-size: 18px
      }

      .sb-name {
        font-size: 14px
      }

      .sb-brand-t small {
        font-size: 12px
      }

      .sb-nav {
        padding: 6px 12px;
        gap: 4px
      }

      .sb-nav-item {
        min-height: 46px;
        padding: 10px 12px;
        font-size: 13px;
        gap: 11px
      }

      .sb-nav-item svg {
        width: 19px;
        height: 19px
      }

      .sb-nav-sep {
        height: 1px;
        margin: 5px 8px;
        background: var(--line)
      }

      .sb-history-head {
        padding: 12px 14px 9px
      }

      .sb-history-back {
        width: 38px;
        height: 38px
      }

      .sb-history-heading b {
        font-size: 14px
      }

      .sb-history-heading small {
        font-size: 12px
      }

      .sb-history-view .sb-search {
        margin: 4px 14px 8px;
        padding: 9px 11px
      }

      .sb-history-view .sb-scroll {
        flex: 1;
        max-height: none;
        min-height: 0;
        padding: 7px 12px calc(12px + env(safe-area-inset-bottom))
      }

      .sb-history-view .sb-item {
        min-height: 48px;
        padding: 9px 10px;
        gap: 11px
      }

      .sb-history-view .sb-item-icon {
        width: 30px;
        height: 30px
      }

      .sb-history-view .sb-item-title {
        font-size: 12.5px
      }

      .sb-history-view .sb-item-sub {
        font-size: 12px
      }

      .sb-history-empty {
        padding: 22px 14px
      }

      .sb-foot {
        padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
        margin-top: auto
      }

      .sb-user {
        min-height: 50px;
        padding: 8px 9px
      }

      .sb-av {
        width: 34px;
        height: 34px;
        font-size: 13px
      }

      .hd {
        top: 8px;
        inset-inline: 8px;
        width: auto;
        height: 46px;
        min-height: 46px;
        padding: 4px 9px;
        gap: 7px;
        border-radius: 16px
      }

      .app[data-sidebar=open] .hd {
        z-index: 105
      }

      .hd-hamburger {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 12px
      }

      .hd-hamburger svg {
        width: 19px;
        height: 19px
      }

      .hd-title {
        gap: 7px
      }

      .hd-ti {
        width: 29px;
        height: 29px
      }

      .hd-title b {
        font-size: 12px;
        max-width: 35vw
      }

      .hd-actions {
        gap: 3px
      }

      .hd-icon {
        width: 35px;
        height: 35px
      }

      .hd-new {
        width: 35px;
        height: 35px;
        min-width: 35px;
        min-height: 35px;
        padding: 0
      }

      .feed,
      .empty-state .feed {
        padding-top: 66px
      }

      #vOver {
        padding-top: 68px
      }
    }

    @media(max-width:360px) {
      .hd {
        gap: 5px;
        padding-inline: 7px
      }

      .hd-hamburger {
        width: 36px;
        height: 36px;
        min-width: 36px
      }

      .hd-ti {
        width: 26px;
        height: 26px
      }

      .hd-title b {
        font-size: 12px;
        max-width: 29vw
      }

      .hd-actions {
        gap: 1px
      }

      .hd-icon,
      .hd-new {
        width: 33px;
        height: 33px;
        min-width: 33px;
        min-height: 33px
      }
    }
      /* Responsive layout and shared interaction surfaces. */
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
    .message-file { display:flex; margin-bottom:6px; width:100%; max-width:300px; text-align:start; }
    .message-status, .conversation-note { color:var(--mut); font-size:12px; padding:8px 0; }
    .message-billing { display:flex; align-items:center; gap:6px; color:var(--mut); font-size:12px; margin:8px 0 0; padding:6px 9px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:8px; direction:rtl; }.billing-icon{display:inline-flex;align-items:center;flex:none;color:var(--gold)}.billing-icon svg{width:13px;height:13px}
    .message-billing.pending { color:var(--gold); border-color:var(--gold-line, var(--line)); }
    .message-billing.failed { color:var(--danger, #b45309); }
    .conversation-note { text-align:center; }
    .demo-output-label { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.7); color:white; font-size:12px; }
    .demo-auth-note { color:var(--gold); font-size:12px; margin-block:8px; }
    .credit-upgrade { font-size:12px; color:var(--gold); }
    .acts button[aria-pressed=true] { color:var(--gold); background:var(--gs); }
    .sb-main-view { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
    .sb-nav { min-height:0; }
    .sb-history-view .sb-scroll { overscroll-behavior:contain; }
    #composerPanel { min-width:0; }
    .sb-backdrop { touch-action:none; }
    .sp-modal { overscroll-behavior:contain; }
    .hd-menu { max-width:calc(100vw - 20px); }
    @media (min-width:761px) and (max-width:1024px) {
      .app[data-sidebar=open] { --sb-w:var(--sb-w-open); }
      .app[data-sidebar=collapsed] { --sb-w:80px; }
    }
    @media (max-width:760px) {
      .app { height:var(--visible-height,100dvh); }
      .sb-main-view { flex:1 1 auto; min-height:0; overflow-y:auto; }
      .app[data-sidebar=open] .sidebar { height:min(78dvh,720px); max-height:min(78dvh,720px); }
      .auth-screen { padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
      .otp-digit { font-size:20px; }
      .sp-card audio { min-width:0; }
      input[type=tel], input[type=search], textarea { font-size:16px; }
    }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

  
    /* =====================================================================
       PRO REFRESH — هدر، آیکن‌های تم، دکمه‌ی سایدبار و سایدبار
       ===================================================================== */

    /* ---------- HEADER ---------- */
    @media (min-width:761px) {
      .hd {
        top: 12px;
        width: min(940px, calc(100% - 28px));
        height: 60px;
        min-height: 60px;
        padding: 0 12px 0 10px;
        gap: 12px;
        border-radius: 20px;
        border: 1px solid color-mix(in srgb, var(--gold) 16%, var(--line));
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--tx) 5%, transparent), transparent 70%),
          color-mix(in srgb, var(--bg2) 80%, transparent);
        backdrop-filter: blur(26px) saturate(1.7);
        -webkit-backdrop-filter: blur(26px) saturate(1.7);
        box-shadow: 0 16px 38px -22px rgba(0, 0, 0, .7), inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
      }
    }

    .hd::after {
      content: "";
      position: absolute;
      inset-inline: 28px;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: .5;
      pointer-events: none;
    }

    [data-theme=light] .hd {
      background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .88));
      border-color: color-mix(in srgb, var(--gold) 24%, var(--line));
      box-shadow: 0 16px 34px -22px rgba(1,96,234,.45), inset 0 1px 0 #fff;
    }

    .hd:hover {
      border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
    }

    /* title block */
    .hd-title {
      gap: 12px
    }

    .hd-ti {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      position: relative;
      box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .38);
    }

    .hd-ti::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
      pointer-events: none;
    }

    .hd-ti svg {
      width: 19px;
      height: 19px;
      stroke-width: 1.8
    }

    .hd-ttl {
      display: flex;
      flex-direction: column;
      line-height: 1.35;
      min-width: 0
    }

    .hd-title b {
      font-size: 14px;
      font-weight: 800;
    }

    .hd-sub {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--mut);
      white-space: nowrap;
    }

    .hd-live {
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      animation: hdPulse 2.4s ease-out infinite;
    }

    @keyframes hdPulse {
      0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 55%, transparent)
      }

      70%,
      100% {
        box-shadow: 0 0 0 6px transparent
      }
    }

    /* credit pill */
    .hd-actions {
      gap: 8px
    }

    .hd-coin {
      display: flex;
      align-items: center;
      gap: 9px;
      height: 40px;
      padding: 0 11px 0 12px;
      border-radius: 12px;
      font-size: 12px;
      border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
      background: linear-gradient(135deg, var(--gs), transparent 85%);
    }

    .hd-coin-ic {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, var(--gold), var(--gold2));
      color: var(--ong);
      flex: none;
      box-shadow: 0 4px 10px -4px var(--gold);
    }

    .hd-coin-ic svg {
      width: 14px;
      height: 14px;
      stroke-width: 2
    }

    .hd-coin-tx {
      display: flex;
      flex-direction: column;
      line-height: 1.15
    }

    .hd-coin-tx small {
      font-size: 11px;
      font-weight: 600;
      color: var(--mut)
    }

    .hd-coin-tx span {
      font-size: 12.5px;
      font-weight: 800;
      color: var(--gold)
    }

    .hd-coin i {
      width: 38px;
      height: 5px;
      border-radius: 8px
    }

    /* icon buttons */
    .hd-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid transparent;
      transition: .18s;
    }

    .hd-icon:hover {
      background: var(--gs);
      border-color: color-mix(in srgb, var(--gold) 30%, var(--line));
      color: var(--gold);
    }

    .hd-icon svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.6
    }

    .hd-icon .badge {
      top: 5px;
      right: 6px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      font-size: 11px;
      border: 2px solid var(--bg2);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose) 60%, transparent);
      animation: hdBadge 2.6s ease-out infinite;
    }

    @keyframes hdBadge {
      0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--rose) 55%, transparent)
      }

      60%,
      100% {
        box-shadow: 0 0 0 7px transparent
      }
    }

    /* theme switch: sun | moon */
    .hd-theme {
      position: relative;
      display: flex;
      align-items: center;
      width: 68px;
      height: 38px;
      padding: 3px;
      border-radius: 99px;
      flex: none;
      border: 1px solid var(--line2);
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22);
      transition: border-color .2s, background .3s;
    }

    .hd-theme:hover {
      border-color: var(--gold)
    }

    .hd-theme:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px
    }

    .ht-thumb {
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--gold), var(--gold2));
      box-shadow: 0 5px 12px -4px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .4);
      transition: inset-inline-start .32s cubic-bezier(.3, 1.35, .5, 1);
    }

    [data-theme=dark] .ht-thumb {
      inset-inline-start: calc(100% - 33px)
    }

    .hd-theme svg {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 30px;
      padding: 6.5px;
      stroke-width: 1.9;
      color: var(--mut);
      transition: color .25s, transform .45s cubic-bezier(.3, 1.35, .5, 1);
    }

    [data-theme=light] .ht-sun {
      color: var(--ong);
      transform: rotate(90deg)
    }

    [data-theme=dark] .ht-moon {
      color: var(--ong);
      transform: rotate(-12deg)
    }

    .hd-divider {
      height: 24px;
      margin: 0 2px;
      opacity: .8
    }

    /* new chat */
    .hd-new {
      height: 40px;
      padding: 0 16px 0 18px;
      gap: 8px;
      border-radius: 12px;
      border: 0;
      font-size: 12.5px;
      font-weight: 800;
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      color: var(--ong);
      box-shadow: 0 10px 22px -12px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .35);
    }

    .hd-new:hover {
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      color: var(--ong);
      filter: brightness(1.07);
      transform: translateY(-1px);
      box-shadow: 0 14px 26px -12px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    .hd-new svg {
      width: 15px;
      height: 15px;
      stroke-width: 2.3;
      transition: transform .3s
    }

    .hd-new:hover svg {
      transform: rotate(90deg)
    }

    .hd-menu {
      border-radius: 16px;
      padding: 8px
    }

    .hd-menu-item {
      padding: 9px 10px;
      border-radius: 12px
    }

    @media (min-width:761px) and (max-width:1024px) {
      .hd-new {
        width: 40px;
        padding: 0;
        justify-content: center
      }

      .hd-sub {
        display: none
      }
    }

    @media (max-width:760px) {
      .hd {
        top: 8px;
        inset-inline: 8px;
        width: auto;
        height: 56px;
        min-height: 56px;
        padding: 0 8px;
        gap: 8px;
        border-radius: 18px;
      }

      .hd-ti {
        width: 36px;
        height: 36px;
        border-radius: 12px
      }

      .hd-title {
        gap: 10px
      }

      .hd-hamburger {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg) 55%, transparent)
      }

      .hd-actions {
        gap: 7px
      }

      .hd-theme {
        width: 62px;
        height: 36px
      }

      .ht-thumb {
        width: 28px;
        height: 28px
      }

      [data-theme=dark] .ht-thumb {
        inset-inline-start: calc(100% - 31px)
      }

      .hd-theme svg {
        width: 28px;
        height: 28px;
        padding: 6px
      }

      .hd-new {
        width: 40px;
        padding: 0;
        justify-content: center
      }
    }

    @media (max-width:420px) {
      .hd-sub {
        display: none
      }

      .hd-title b {
        font-size: 13px
      }
    }

    /* ---------- SIDEBAR TOGGLE ---------- */
    .sb-toggle {
      position: relative;
      inset: auto;
      width: 38px;
      height: 38px;
      margin: 0 !important;
      display: grid;
      place-items: center;
      flex: none;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 55%, transparent);
      color: var(--mut);
      box-shadow: none;
      transition: .2s;
    }

    .sb-toggle:hover {
      background: var(--gs);
      color: var(--gold);
      border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
    }

    .sb-toggle:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px
    }

    .sb-toggle svg.sbt {
      width: 21px;
      height: 21px;
      transform: none !important;
      overflow: visible;
    }

    .sbt .sbt-fill {
      fill: currentColor;
      stroke: none;
      opacity: .3;
      transition: opacity .25s
    }

    .sbt .sbt-chev {
      stroke-width: 2;
      transform-origin: 9.5px 12px;
      transition: transform .35s cubic-bezier(.3, 1.35, .5, 1);
    }

    .app[data-sidebar=open] .sbt .sbt-chev {
      transform: none
    }

    .app[data-sidebar=collapsed] .sbt .sbt-chev {
      transform: rotate(180deg)
    }

    .app[data-sidebar=collapsed] .sbt .sbt-fill {
      opacity: 0
    }

    .sb-toggle:hover .sbt .sbt-fill {
      opacity: .55
    }

    /* ---------- SIDEBAR ---------- */
    .sidebar {
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 94%, transparent), var(--bg2));
    }

    @media (min-width:761px) {
      .sidebar {
        border-radius: 22px;
        border-color: color-mix(in srgb, var(--gold) 12%, var(--line));
        box-shadow: 0 26px 54px -30px rgba(0, 0, 0, .7), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
      }

      .app[data-sidebar=collapsed] .sb-head {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding: 16px 0 12px;
      }

      .app[data-sidebar=collapsed] .sb-brand {
        display: flex;
        flex: none
      }

      .app[data-sidebar=collapsed] .sb-brand-t {
        display: none
      }
    }

    .sb-head {
      position: relative;
      gap: 10px;
      padding: 16px 14px 14px;
      min-height: 74px;
      border: 0;
    }

    .sb-head::after {
      content: "";
      position: absolute;
      inset-inline: 14px;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line2), transparent);
    }

    .sb-brand {
      gap: 11px
    }

    .sb-logo {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      font-size: 19px;
      background: linear-gradient(145deg, var(--gold), var(--gold2));
      box-shadow: 0 10px 20px -10px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
    }

    .sb-name {
      font-size: 14.5px;
      font-weight: 800
    }

    .sb-brand-t small {
      font-size: 12px
    }

    /* nav */
    .sb-nav {
      padding: 12px 12px 6px;
      gap: 4px
    }

    .sb-nav .sb-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 8px 8px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .2px;
      text-transform: none;
      color: var(--mut);
    }

    .sb-nav .sb-section-title::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
      opacity: .8
    }

    .sb-nav-item {
      min-height: 48px;
      padding: 7px 8px;
      gap: 12px;
      border-radius: 16px;
      border: 1px solid transparent;
      font-size: 13px;
      font-weight: 600;
    }

    .sb-nav-item svg {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 12px;
      stroke-width: 1.7;
      background: color-mix(in srgb, var(--tx) 5%, transparent);
      transition: background .2s, color .2s, box-shadow .2s;
    }

    .sb-nav-item:hover {
      background: color-mix(in srgb, var(--tx) 4%, transparent);
      color: var(--tx);
    }

    .sb-nav-item:hover svg {
      background: var(--gs);
      color: var(--gold)
    }

    .sb-nav-item.on {
      color: var(--tx);
      font-weight: 800;
      background: linear-gradient(to left, var(--gs), transparent 95%);
      border-color: color-mix(in srgb, var(--gold) 24%, transparent);
    }

    .sb-nav-item.on svg {
      background: linear-gradient(145deg, var(--gold), var(--gold2));
      color: var(--ong);
      box-shadow: 0 8px 16px -9px var(--gold);
    }

    .sb-nav-item.on::before {
      top: 13px;
      bottom: 13px;
      inset-inline-start: -1px;
      width: 3px;
    }

    .sb-nav-sep {
      height: 1px;
      margin: 8px 6px;
      opacity: 1;
      background: linear-gradient(90deg, transparent, var(--line2), transparent);
    }

    .sb-nav-item.sb-pro {
      margin-top: 6px;
      color: var(--gold);
      background: linear-gradient(to left, color-mix(in srgb, var(--gold) 16%, transparent), transparent 90%);
      border-color: color-mix(in srgb, var(--gold) 30%, transparent);
    }

    .sb-nav-item.sb-pro svg {
      background: linear-gradient(145deg, var(--gold), var(--gold2));
      color: var(--ong);
      box-shadow: 0 8px 16px -9px var(--gold);
    }

    .sb-nav-item.sb-pro:hover {
      color: var(--gold);
      background: linear-gradient(to left, color-mix(in srgb, var(--gold) 24%, transparent), transparent 90%);
    }

    .sb-pro em {
      font-size: 11px;
      padding: 2px 8px;
      letter-spacing: .5px
    }

    .app[data-sidebar=collapsed] .sb-nav-item {
      padding: 6px;
      min-height: 48px
    }

    /* history */
    .sb-search {
      border-radius: 12px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 60%, transparent);
      transition: .2s;
    }

    .sb-search:focus-within {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gs)
    }

    .sb-item {
      border-radius: 12px
    }

    /* user card */
    .sb-foot {
      position: relative;
      padding: 12px;
      border-top: 0;
    }

    .sb-foot::before {
      content: "";
      position: absolute;
      inset-inline: 14px;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line2), transparent);
    }

    .sb-user {
      padding: 9px 10px;
      gap: 11px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, var(--gs), transparent 70%), var(--card);
      transition: .2s;
    }

    .sb-user:hover {
      border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
      transform: translateY(-1px);
      box-shadow: 0 12px 24px -16px var(--gold);
    }

    .sb-av {
      position: relative;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      font-size: 14px;
      box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px color-mix(in srgb, var(--gold) 55%, transparent);
    }

    .sb-av::after {
      content: "";
      position: absolute;
      bottom: -3px;
      inset-inline-end: -3px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--teal);
      border: 2px solid var(--card);
    }

    .sb-user-name {
      font-size: 12.5px;
      font-weight: 800
    }

    .sb-user-plan {
      font-size: 12px
    }

    .sb-user-chv {
      transform: rotate(180deg)
    }

    /* mobile bottom sheet grabber */
    @media (max-width:760px) {
      .sidebar::before {
        content: "";
        display: block;
        flex: none;
        width: 42px;
        height: 4px;
        border-radius: 8px;
        background: var(--line2);
        margin: 9px auto 0;
      }

      .sb-head {
        min-height: 64px;
        padding-top: 10px
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .hd-live,
      .hd-icon .badge {
        animation: none
      }
    }

  
    /* =====================================================================
       LOGIN — ورود با شماره موبایل و کد تأیید ۶ رقمی
       ===================================================================== */
    .lg-screen {
      position: fixed;
      inset: 0;
      z-index: 400;
      display: grid;
      place-items: center;
      padding: 16px;
      background:
        radial-gradient(900px 500px at 85% 10%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%),
        radial-gradient(700px 480px at 10% 95%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 60%),
        color-mix(in srgb, var(--bg) 82%, transparent);
      backdrop-filter: blur(18px) saturate(1.3);
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      overflow-y: auto;
      animation: lgFade .25s ease-out both;
    }

    .lg-screen[hidden] {
      display: none !important
    }

    @keyframes lgFade {
      from {
        opacity: 0
      }
    }

    @keyframes lgRise {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.985)
      }
    }

    .lg-card {
      width: min(900px, 100%);
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
      background: var(--bg2);
      box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
      animation: lgRise .4s cubic-bezier(.2, .8, .2, 1) both;
    }

    /* brand panel (always dark) */
    .lg-aside {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 28px;
      padding: 32px 30px;
      color: #eef3ff;
      background: linear-gradient(160deg, #101a3a 0%, #101a3a 55%, #090f28 100%);
    }

    .lg-orb {
      position: absolute;
      z-index: -1;
      border-radius: 50%;
      filter: blur(8px)
    }

    .lg-orb1 {
      width: 280px;
      height: 280px;
      top: -90px;
      inset-inline-end: -90px;
      background: radial-gradient(circle, rgba(7,210,248,.55), transparent 68%)
    }

    .lg-orb2 {
      width: 240px;
      height: 240px;
      bottom: -100px;
      inset-inline-start: -80px;
      background: radial-gradient(circle, rgba(79, 209, 181, .3), transparent 68%)
    }

    .lg-grid {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .5;
      background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 34px 34px;
      -webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 70%);
      mask-image: radial-gradient(circle at 70% 20%, #000, transparent 70%);
    }

    .lg-brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .lg-mark {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 20px;
      color: #06132c;
      flex: none;
      background: linear-gradient(145deg, #07d2f8, #0160ea);
      box-shadow: 0 12px 24px -12px #07d2f8, inset 0 1px 0 rgba(255, 255, 255, .5);
    }

    .lg-brand-t {
      display: flex;
      flex-direction: column;
      line-height: 1.35
    }

    .lg-brand-t b {
      font-size: 15px;
      font-weight: 800
    }

    .lg-brand-t small {
      font-size: 12px;
      opacity: .6
    }

    .lg-aside-copy h2 {
      font-size: 24px;
      line-height: 1.6;
      font-weight: 900
    }

    .lg-aside-copy h2 em {
      font-style: normal;
      background: linear-gradient(90deg, #07d2f8, #07d2f8 60%, #07d2f8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .lg-aside-copy p {
      margin-top: 8px;
      font-size: 12.5px;
      line-height: 1.9;
      opacity: .68
    }

    .lg-feats {
      list-style: none;
      padding: 0;
      margin-top: 22px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .lg-feats li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      font-weight: 600;
      padding: 9px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .lg-feats li span {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      flex: none;
      color: #07d2f8;
      background: rgba(7,210,248,.14)
    }

    .lg-feats svg {
      width: 15px;
      height: 15px
    }

    .lg-aside-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      opacity: .7
    }

    .lg-aside-foot svg {
      width: 15px;
      height: 15px;
      color: #07d2f8
    }

    /* form panel */
    .lg-main {
      position: relative;
      padding: 34px 40px 30px;
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .lg-close {
      position: absolute;
      top: 14px;
      inset-inline-start: 14px;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--mut);
      border: 1px solid var(--line);
      transition: .2s
    }

    .lg-close:hover {
      color: var(--gold);
      border-color: var(--gold);
      background: var(--gs)
    }

    .lg-close svg {
      width: 16px;
      height: 16px
    }

    .lg-mbrand {
      display: none
    }

    .lg-steps {
      display: flex;
      gap: 6px;
      margin-top: 22px;
      width: 100%
    }

    .lg-steps span {
      flex: 1;
      height: 4px;
      border-radius: 8px;
      background: var(--line);
      transition: background .3s
    }

    .lg-steps span.active {
      background: linear-gradient(90deg, var(--gold2), var(--gold))
    }

    .lg-stepno {
      margin-top: 8px;
      font-size: 12px;
      color: var(--mut)
    }

    .lg-stepno b {
      color: var(--gold)
    }

    .lg-step {
      display: flex;
      flex-direction: column;
      margin-top: 18px;
      animation: lgRise .35s cubic-bezier(.2, .8, .2, 1) both
    }

    .lg-step[hidden] {
      display: none
    }

    .lg-badge {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: var(--ong);
      background: linear-gradient(145deg, var(--gold), var(--gold2));
      box-shadow: 0 16px 30px -16px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    .lg-badge svg {
      width: 24px;
      height: 24px;
      stroke-width: 1.8
    }

    .lg-step h1 {
      margin-top: 16px;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.5
    }

    .lg-lead {
      margin-top: 4px;
      font-size: 12.5px;
      line-height: 1.9;
      color: var(--mut)
    }

    .lg-lead b {
      color: var(--tx);
      font-weight: 800;
      unicode-bidi: isolate
    }

    .lg-label {
      margin-top: 22px;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700
    }

    .lg-field {
      position: relative;
      display: flex;
      align-items: center;
      height: 56px;
      border-radius: 16px;
      border: 1.5px solid var(--line2);
      background: color-mix(in srgb, var(--bg) 60%, transparent);
      transition: .2s;
      direction: ltr;
    }

    .lg-field:focus-within {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px var(--gs)
    }

    .lg-field input {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: 0;
      outline: 0;
      background: none;
      padding: 0 16px;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-align: left
    }

    .lg-field input::placeholder {
      color: color-mix(in srgb, var(--mut) 55%, transparent);
      font-weight: 500;
      letter-spacing: 1px
    }

    .lg-cc {
      order: -1;
      display: flex;
      align-items: center;
      gap: 9px;
      height: 100%;
      padding: 0 14px;
      border-inline-end: 1px solid var(--line2);
      color: var(--tx);
      background: color-mix(in srgb, var(--tx) 4%, transparent);
      border-radius: 14px 0 0 14px;
      flex: none
    }

    .lg-cc b {
      font-size: 15px;
      font-weight: 800
    }

    .lg-cc i {
      width: 1px;
      height: 16px;
      background: var(--line2)
    }

    .lg-cc small {
      font-size: 12px;
      color: var(--mut);
      direction: rtl
    }

    .lg-message {
      min-height: 22px;
      margin-top: 8px;
      font-size: 12px;
      color: var(--mut)
    }

    .lg-message.error {
      color: var(--rose);
      font-weight: 700
    }

    .lg-primary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 54px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 800;
      color: var(--ong);
      background: linear-gradient(180deg, var(--gold), var(--gold2));
      box-shadow: 0 16px 30px -16px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .38);
      transition: .2s
    }

    .lg-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.06)
    }

    .lg-primary:active {
      transform: none
    }

    .lg-primary svg {
      width: 17px;
      height: 17px;
      stroke-width: 2.2
    }

    #sendOtp svg {
      transform: rotate(90deg)
    }

    .lg-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 16px;
      font-size: 12px;
      color: var(--mut)
    }

    .lg-note svg {
      width: 13px;
      height: 13px;
      color: var(--teal)
    }

    .lg-back {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 14px;
      padding: 6px 12px 6px 10px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 700;
      color: var(--mut);
      border: 1px solid var(--line);
      transition: .2s
    }

    .lg-back:hover {
      color: var(--gold);
      border-color: var(--gold)
    }

    .lg-back svg {
      width: 14px;
      height: 14px;
      transform: rotate(-90deg)
    }

    /* Verification code */
    .lg-otp {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 22px
    }

    .lg-digit {
      width: 100%;
      min-width: 0;
      height: 62px;
      border-radius: 16px;
      text-align: center;
      font-size: 24px;
      font-weight: 900;
      padding: 0;
      border: 1.5px solid var(--line2);
      background: color-mix(in srgb, var(--bg) 60%, transparent);
      caret-color: var(--gold);
      outline: 0;
      transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
    }

    .lg-digit:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px var(--gs);
      transform: translateY(-2px)
    }

    .lg-digit.filled {
      border-color: color-mix(in srgb, var(--gold) 65%, var(--line2));
      background: var(--gs)
    }

    .lg-digit.err {
      border-color: var(--rose);
      background: color-mix(in srgb, var(--rose) 10%, transparent);
      animation: lgShake .35s
    }

    @keyframes lgShake {

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

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

    .lg-resend-row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
      font-size: 12px;
      color: var(--mut)
    }

    .lg-resend {
      font-weight: 800;
      color: var(--gold);
      font-variant-numeric: tabular-nums;
      padding: 2px 4px
    }

    .lg-resend:disabled {
      color: var(--mut);
      font-weight: 600;
      cursor: default
    }

    .lg-demo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
      padding: 9px 12px;
      border-radius: 12px;
      font-size: 12px;
      color: var(--mut);
      border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line2));
      background: var(--gs)
    }

    .lg-demo b {
      color: var(--gold);
      font-size: 15px;
      letter-spacing: 3px
    }

    .lg-demo button {
      padding: 3px 11px;
      border-radius: 8px;
      font-weight: 700;
      color: var(--gold);
      border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent)
    }

    .lg-demo button:hover {
      background: var(--gold);
      color: var(--ong)
    }

    @media (max-width:820px) {
      .lg-card {
        grid-template-columns: 1fr;
        max-width: 460px
      }

      .lg-aside {
        display: none
      }

      .lg-main {
        padding: 26px 22px 24px
      }

      .lg-mbrand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 800
      }

      .lg-mbrand .lg-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 18px
      }

      .lg-steps {
        margin-top: 18px
      }
    }

    @media (max-width:420px) {
      .lg-screen {
        padding: 10px;
        align-items: end
      }

      .lg-card {
        border-radius: 24px
      }

      .lg-main {
        padding: 22px 16px 20px
      }

      .lg-otp {
        gap: 7px
      }

      .lg-digit {
        height: 54px;
        font-size: 21px;
        border-radius: 16px
      }

      .lg-step h1 {
        font-size: 20px
      }

      .lg-field {
        height: 54px
      }

      .lg-field input {
        font-size: 17px
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .lg-card,
      .lg-step,
      .lg-screen,
      .lg-digit.err {
        animation: none
      }
    }

    /* =====================================================================
       UNIFORM HEADER CONTROLS — همه‌ی کنترل‌های هدر هم‌اندازه (۴۰×۴۰، آیکن ۲۰)
       ===================================================================== */
    .hd-icon,
    .hd-theme,
    .hd-hamburger {
      position: relative;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 45%, transparent);
      color: var(--mut);
      box-shadow: none;
      transition: .18s;
    }

    .hd-icon:hover,
    .hd-theme:hover,
    .hd-hamburger:hover {
      background: var(--gs);
      color: var(--gold);
      border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
    }

    .hd-icon svg,
    .hd-theme svg,
    .hd-hamburger svg {
      width: 20px;
      height: 20px;
      padding: 0;
      stroke-width: 1.7;
    }

    .hd-theme svg {
      position: absolute;
      inset: 0;
      margin: auto;
      transition: opacity .3s, transform .45s cubic-bezier(.3, 1.35, .5, 1), color .2s;
    }

    [data-theme=light] .ht-sun,
    [data-theme=dark] .ht-moon {
      color: var(--gold);
      opacity: 1;
      transform: none
    }

    [data-theme=light] .ht-moon {
      opacity: 0;
      transform: rotate(-80deg) scale(.4)
    }

    [data-theme=dark] .ht-sun {
      opacity: 0;
      transform: rotate(80deg) scale(.4)
    }

    .hd-new {
      height: 40px;
      min-height: 40px
    }

    .hd-new svg {
      width: 18px;
      height: 18px
    }

    .hd-coin {
      height: 40px
    }

    .hd-coin-ic {
      width: 26px;
      height: 26px
    }

    .hd-coin-ic svg {
      width: 16px;
      height: 16px
    }

    @media (max-width:760px) {
      .hd-actions {
        gap: 6px
      }

      .hd-new {
        width: 40px;
        min-width: 40px
      }
    }

    /* =====================================================================
       COLLAPSED SIDEBAR — حذف اسکرول افقی
       ===================================================================== */
    @media (min-width:761px) {
      .sb-main-view {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .app[data-sidebar=collapsed] .sb-main-view,
      .app[data-sidebar=collapsed] .sb-nav {
        overflow: visible
      }

      .sb-nav-item {
        max-width: 100%
      }

      .app[data-sidebar=collapsed] .sb-foot {
        padding: 10px 8px
      }

      .app[data-sidebar=collapsed] .sb-user {
        padding: 6px;
        justify-content: center;
        min-height: 0
      }

      .app[data-sidebar=collapsed] .sb-user-chv,
      .app[data-sidebar=collapsed] .sb-user-info {
        display: none
      }
    }

    /* =====================================================================
       MOBILE CHAT COMPOSER — جمع‌وجور در حین گفتگو
       ===================================================================== */
    .opt-toggle {
      display: none
    }

    @media (max-width:760px) {
      #vChat:not(.empty-state) .cwrap {
        padding: 6px 8px calc(8px + env(safe-area-inset-bottom))
      }

      #vChat:not(.empty-state) .cmp {
        border-radius: 20px
      }

      #vChat:not(.empty-state) .cmp:not(.opts-open) .top2 {
        display: none
      }

      #vChat:not(.empty-state) .cmp .top2 {
        padding: 8px 8px 2px;
        gap: 6px
      }

      #vChat:not(.empty-state) textarea {
        min-height: 44px;
        padding: 10px 14px 2px;
        line-height: 1.7
      }

      #vChat:not(.empty-state) .row {
        gap: 6px;
        padding: 4px 8px 8px
      }

      #vChat:not(.empty-state) .rbtn {
        width: 38px;
        height: 38px;
        border-radius: 12px
      }

      #vChat:not(.empty-state) .opt-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 10px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg2) 82%, transparent);
        color: var(--tx);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        flex: none;
      }

      #vChat:not(.empty-state) .cmp.opts-open .opt-toggle {
        border-color: var(--gold);
        background: var(--gs);
        color: var(--gold)
      }

      .opt-toggle svg {
        width: 15px;
        height: 15px
      }

      .opt-toggle #optToggleIc {
        display: grid;
        place-items: center
      }

      .opt-toggle .opt-chev {
        width: 12px;
        height: 12px;
        transition: transform .25s
      }

      .cmp.opts-open .opt-chev {
        transform: rotate(180deg)
      }

      #vChat:not(.empty-state) .send {
        min-width: 44px;
        width: 44px;
        height: 38px;
        padding: 0;
        border-radius: 12px
      }

      #vChat:not(.empty-state) .send #stx {
        display: none
      }

      #vChat:not(.empty-state) .cmp[data-mode=chat] .send .c {
        display: none
      }

      #vChat:not(.empty-state) .cmp:not([data-mode=chat]) .send {
        width: auto;
        min-width: 62px;
        padding: 0 10px
      }
    }

  
/* Laravel workspace: production-specific refinements */
.hd-coin,.hd-icon#hdNotif,[data-upgrade],.sb-pro{display:none!important}.sb-record{display:flex;align-items:center;gap:2px}.sb-record .sb-item{flex:1;min-width:0}.sb-record-action{flex:none;color:var(--mut);font-size:13px;padding:3px 4px;border-radius:6px;opacity:.5}.sb-record:hover .sb-record-action,.sb-record:focus-within .sb-record-action{opacity:1}.sb-record-action:hover{color:var(--rose);background:var(--gs)}.media-result{max-width:min(480px,100%);display:block;margin:12px 0;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--card)}.media-result img,.media-result video{display:block;width:100%;max-height:520px;object-fit:contain}.media-result audio{width:100%}.media-result a{display:block;font-size:12px;padding:8px 12px;color:var(--gold);text-decoration:none}.status-working{color:var(--mut);padding:8px}.jalali-hd{color:var(--mut);font-size:12px;padding:0 8px;white-space:nowrap}.workspace-warning{color:var(--rose);font-size:12px;padding:8px 12px;max-width:840px;margin:auto}.profile-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:350;background:#0008}.profile-card{background:var(--card);color:var(--tx);padding:24px;width:min(420px,calc(100vw - 32px));border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px #0005}.profile-card input{display:block;width:100%;border:1px solid var(--line2);background:var(--bg2);border-radius:12px;padding:10px;margin:12px 0}.profile-actions{display:flex;gap:8px;justify-content:flex-end}.profile-actions button{padding:8px 16px;border-radius:8px;background:var(--gs)}.profile-actions button:first-child{background:var(--gold);color:var(--ong)}
@media(max-width:640px){.jalali-hd{display:none}.sb-record-action{opacity:1}}

/* Model list refresh control */


/* Conversation history: compact rows, explicit icon actions and accessible dialogs. */
.sb-record{position:relative;display:flex;align-items:center;gap:5px;padding:3px 4px;border:1px solid transparent;border-radius:12px;transition:background .18s,border-color .18s}
.sb-record:hover,.sb-record:focus-within{background:var(--gs);border-color:color-mix(in srgb,var(--gold) 18%,var(--line))}
.sb-record.active{background:var(--gs);border-color:color-mix(in srgb,var(--gold) 28%,var(--line))}
.sb-record .sb-item{flex:1;min-width:0;margin:0;background:transparent;border:0;padding:7px 6px;border-radius:8px}
.sb-record .sb-item.active{background:transparent}
.sb-record .sb-item:focus-visible,.sb-record-action:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sb-record-actions{display:flex;align-items:center;gap:3px;flex:none;opacity:.58;transition:opacity .18s}
.sb-record:hover .sb-record-actions,.sb-record:focus-within .sb-record-actions,.sb-record.active .sb-record-actions{opacity:1}
.sb-record-action{display:grid;place-items:center;width:29px;height:29px;padding:0;border:1px solid transparent;border-radius:8px;color:var(--mut);background:transparent;transition:background .15s,color .15s,border-color .15s}
.sb-record-action .i{width:14px;height:14px}
.sb-record-edit:hover{color:var(--gold);background:var(--gs);border-color:color-mix(in srgb,var(--gold) 25%,transparent)}
.sb-record-delete:hover{color:var(--rose);background:color-mix(in srgb,var(--rose) 10%,transparent);border-color:color-mix(in srgb,var(--rose) 25%,transparent)}
.conversation-dialog{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px}
.conversation-dialog[hidden]{display:none!important}
.conversation-dialog-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(8,10,18,.62);backdrop-filter:blur(7px);cursor:default}
.conversation-dialog-card{position:relative;z-index:1;width:min(440px,100%);padding:28px 26px 22px;border:1px solid var(--line2);border-radius:20px;background:var(--card);color:var(--tx);box-shadow:0 24px 80px rgba(0,0,0,.28);animation:conversationDialogIn .2s ease-out both}
@keyframes conversationDialogIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.conversation-dialog-close{position:absolute;inset-inline-end:14px;top:14px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;color:var(--mut);background:var(--bg2)}
.conversation-dialog-close:hover{color:var(--tx);background:var(--gs)}
.conversation-dialog-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:16px;border-radius:16px;color:var(--gold);background:var(--gs);border:1px solid color-mix(in srgb,var(--gold) 22%,transparent)}
.conversation-dialog-icon .i{width:21px;height:21px}
.conversation-dialog-icon.is-danger{color:var(--rose);background:color-mix(in srgb,var(--rose) 10%,transparent);border-color:color-mix(in srgb,var(--rose) 24%,transparent)}
.conversation-dialog-card h2{font-size:17px;font-weight:800;margin:0 0 8px}
.conversation-dialog-card>p{font-size:12.5px;line-height:2;color:var(--mut);margin:0}
.conversation-dialog-field{margin-top:18px}
.conversation-dialog-field[hidden]{display:none}
.conversation-dialog-field label{display:block;font-size:12px;color:var(--mut);margin-bottom:7px}
.conversation-dialog-field input{width:100%;height:44px;padding:0 13px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--tx);outline:0;font:inherit}
.conversation-dialog-field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gs)}
.conversation-dialog-error{margin-top:12px!important;padding:8px 10px;border-radius:8px;color:var(--rose)!important;background:color-mix(in srgb,var(--rose) 9%,transparent)}
.conversation-dialog-error[hidden]{display:none!important}
.conversation-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:24px}
.conversation-dialog-actions button{min-height:40px;padding:0 16px;border-radius:12px;font:inherit;font-size:12px;font-weight:700;transition:transform .15s,opacity .15s,background .15s}
.conversation-dialog-actions button:disabled{opacity:.6;cursor:wait}
.conversation-dialog-cancel{border:1px solid var(--line2);background:var(--bg2);color:var(--mut)}
.conversation-dialog-cancel:hover{color:var(--tx);border-color:var(--line2)}
.conversation-dialog-confirm{background:linear-gradient(180deg,var(--gold),var(--gold2));color:var(--ong);box-shadow:0 6px 16px -12px var(--gold)}
.conversation-dialog-confirm.is-danger{background:var(--rose);color:#fff;box-shadow:0 6px 16px -12px var(--rose)}
.conversation-dialog-actions button:not(:disabled):active{transform:translateY(1px)}
@media(max-width:640px){.conversation-dialog{padding:14px}.conversation-dialog-card{padding:24px 19px 18px}.sb-record-actions{opacity:1}.sb-record-action{width:32px;height:32px}}

/* --- Streaming and centered jump-to-latest control --- */
#scrollDown.scroll-down{position:absolute;left:50%!important;right:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;transform:translateX(-50%);width:46px;height:46px;display:grid;place-items:center;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line2);box-shadow:0 8px 32px -12px rgba(0,0,0,.6);animation:none!important}
#scrollDown.scroll-down[hidden]{display:none!important}
#scrollDown.scroll-down svg{width:20px;height:20px;color:var(--gold)}
#scrollDown.scroll-down:hover{background:var(--gs);border-color:var(--gold)}
.m .cur{vertical-align:-3px}
@media(max-width:760px){#scrollDown.scroll-down{width:42px;height:42px}}

/* Admin release: actual header credit replaces the date; no synthetic progress bar. */
.hd-coin{display:flex!important;min-width:120px;align-items:center;justify-content:center}
.hd-coin i{display:none!important}
.hd-coin-tx{align-items:flex-start}
.hd-coin-tx span{font-variant-numeric:tabular-nums}
#scrollDown.scroll-down{bottom:calc(var(--composer-height,155px) + 12px)!important;inset-inline:unset!important;left:50%!important;transform:translateX(-50%)!important}
#scrollDown.scroll-down:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:640px){.hd-coin{min-width:92px;padding:3px 8px}.hd-coin-tx small{font-size:11px}}

/* Shared administrator page fields and controls. */
.admin-settings-card{width:min(760px,100%);max-height:min(88dvh,900px);overflow:auto;background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 90px #0005;padding:24px;direction:rtl}
.admin-settings-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.admin-settings-kicker{font-size:12px;color:var(--gold);font-weight:800}
.admin-settings-head h2{margin:5px 0 4px;font-size:21px}
.admin-settings-head p,.admin-settings-section>p{margin:0;color:var(--mut);font-size:12px;line-height:1.8}
.admin-settings-section{padding:19px 0;border-bottom:1px solid var(--line)}
.admin-settings-section h3{font-size:14px;margin:0 0 14px}
.admin-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.admin-field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;min-width:0}
.admin-field input,.admin-field select{width:100%;min-width:0;height:42px;border:1px solid var(--line2);border-radius:12px;padding:0 12px;background:var(--bg2);color:var(--tx);outline:none;font:inherit;font-weight:500}
.admin-field input:focus,.admin-field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.admin-field small,.admin-settings-toggle small{font-size:12px;color:var(--mut);font-weight:400;line-height:1.7}
.admin-settings-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:12px;color:var(--mut)}
.admin-settings-toggle{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);cursor:pointer}
.admin-settings-toggle input{margin-top:4px;accent-color:var(--gold)}
.admin-settings-toggle span{display:flex;flex-direction:column;gap:3px}
.admin-settings-error{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#d94a4a 10%,transparent);color:#c83b3b;font-size:12px;line-height:1.7}
.admin-settings-footer{display:flex;justify-content:flex-end;gap:9px;padding-top:18px}
.admin-settings-primary,.admin-settings-secondary{min-height:40px;border-radius:12px;padding:0 16px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.admin-settings-primary{background:var(--gold);color:#06132c;border:1px solid var(--gold)}
.admin-settings-secondary{background:var(--bg2);color:var(--tx);border:1px solid var(--line2)}
.admin-settings-primary:disabled,.admin-settings-secondary:disabled{opacity:.55;cursor:wait}
@media(max-width:620px){.admin-settings-card{padding:17px;border-radius:16px;max-height:none}.admin-settings-grid{grid-template-columns:1fr}.admin-settings-head h2{font-size:18px}.admin-settings-inline{align-items:flex-start;flex-direction:column}.admin-settings-footer>*{flex:1}}


/* ================================================================
   HOOSH SAZIN WORKSPACE POLISH — local Vazirmatn, glass header, admin pages,
   dynamic sample gallery and refined OTP surface.
   ================================================================ */
:root{--font:'Vazirmatn',Tahoma,system-ui,sans-serif}
html,body,button,input,textarea,select{font-family:var(--font)}

/* More legible floating glass header in both themes. */
.hd{
  background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.045)),color-mix(in srgb,var(--bg2) 34%,transparent)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  backdrop-filter:blur(30px) saturate(2.05)!important;
  -webkit-backdrop-filter:blur(30px) saturate(2.05)!important;
  box-shadow:0 13px 36px -17px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.035)!important;
}
[data-theme=light] .hd{
  background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(255,255,255,.58))!important;
  border-color:rgba(255,255,255,.96)!important;
  box-shadow:0 13px 36px -18px rgba(71,57,28,.32),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.45)!important;
}
.hd:hover{transform:translateY(-1px);box-shadow:0 16px 40px -17px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.28)!important}
.hd-coin{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Admin page content and controls. */
.admin-settings-card{width:min(1060px,100%);max-height:min(92dvh,980px);padding:0;display:flex;flex-direction:column;overflow:hidden}
.admin-settings-head{padding:21px 25px 17px;flex:none}
.admin-settings-brand{display:flex;align-items:center;gap:13px;min-width:0}
.admin-settings-mark{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:16px;color:var(--gold);background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 22%,var(--card)),color-mix(in srgb,var(--teal) 10%,var(--bg2)));border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line))}
.admin-settings-mark .i{width:21px;height:21px}
.admin-settings-content{padding:0 25px;overflow:auto;min-height:0;flex:1}
.admin-settings-panel{padding:23px 0 20px;border:0}
.admin-settings-panel[hidden]{display:none!important}
.admin-panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:19px}
.admin-panel-title h3{font-size:15px;margin:0 0 4px}
.admin-panel-title p{margin:0;color:var(--mut);font-size:12px;line-height:1.8}
.admin-panel-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid var(--line);border-radius:12px;color:var(--gold);background:var(--bg2)}
.admin-panel-icon .i{width:18px;height:18px}
.admin-settings-grid{gap:15px}
.admin-field input,.admin-field select,.admin-field textarea{transition:border-color .18s,box-shadow .18s,background .18s}
.admin-field textarea{width:100%;resize:vertical;min-height:110px;border:1px solid var(--line2);border-radius:12px;padding:11px 12px;background:var(--bg2);color:var(--tx);font:inherit;font-size:12px;line-height:1.9;outline:none}
.admin-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.admin-settings-inline{padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.admin-settings-inline .i{width:15px;height:15px;vertical-align:middle;margin-left:5px}
.admin-credit-field{max-width:440px}
.admin-settings-footer{padding:15px 25px 20px;border-top:1px solid var(--line);flex:none;background:color-mix(in srgb,var(--bg2) 82%,transparent)}
.admin-settings-footer[hidden]{display:none!important}
.admin-settings-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 7px 16px -10px var(--gold)}
.admin-settings-primary .i{width:16px;height:16px}
.admin-settings-secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.admin-settings-secondary .i{width:15px;height:15px}

/* Sample editor and library. */
.admin-samples-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr);gap:18px;align-items:start}
.admin-sample-form{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg2) 62%,transparent);min-width:0}
.admin-sample-form-head,.admin-sample-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-sample-form-head strong,.admin-sample-list-head strong{font-size:12px}
.admin-form-status,.admin-sample-state{font-size:11px;padding:3px 8px;border-radius:99px;background:var(--gs);color:var(--gold);font-weight:800}
.admin-sample-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.admin-field-note{font-size:11px;color:var(--mut);font-weight:400}
.admin-upload{position:relative;display:flex;align-items:center;gap:11px;min-height:66px;padding:11px 12px;border:1px dashed color-mix(in srgb,var(--gold) 40%,var(--line2));border-radius:12px;background:color-mix(in srgb,var(--gold) 5%,var(--bg2));cursor:pointer;transition:.18s}
.admin-upload:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--bg2))}
.admin-upload input{position:absolute!important;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.admin-upload.is-disabled{opacity:.48;cursor:not-allowed}
.admin-upload.is-disabled input{pointer-events:none}
.admin-upload-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;color:var(--gold);background:var(--gs)}
.admin-upload-copy{display:grid;gap:2px;min-width:0;flex:1}
.admin-upload-copy b{font-size:12px;overflow-wrap:anywhere}
.admin-upload-copy small{font-size:11px;color:var(--mut);line-height:1.6}
.admin-upload-action{padding:6px 9px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-size:11px;font-weight:800;white-space:nowrap}
.admin-upload-compact{min-height:54px}
.admin-upload-compact .admin-upload-icon{width:32px;height:32px}
.admin-sample-options{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:end}
.admin-sample-publish{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);cursor:pointer}
.admin-sample-publish input{accent-color:var(--gold)}
.admin-sample-publish span{display:grid;gap:1px}
.admin-sample-publish b{font-size:12px}
.admin-sample-publish small{font-size:11px;color:var(--mut)}
.admin-sample-actions{display:flex;gap:8px;align-items:center}
.admin-sample-feedback{margin:0;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--teal) 10%,transparent);color:var(--teal);font-size:12px;line-height:1.8}
.admin-sample-feedback.is-error{background:color-mix(in srgb,var(--rose) 10%,transparent);color:var(--rose)}
.admin-sample-list-wrap{min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.admin-sample-list-head{margin-bottom:12px}
.admin-sample-list-head>div{display:grid;gap:2px}
.admin-sample-list-head small{font-size:11px;color:var(--mut)}
.admin-sample-list-head select{max-width:130px;height:34px;padding:0 8px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);color:var(--tx);font:inherit;font-size:12px}
.admin-sample-list{display:grid;gap:8px;max-height:610px;overflow:auto;padding-inline-end:2px}
.admin-sample-row{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
.admin-sample-thumb{display:grid;place-items:center;width:48px;height:48px;flex:none;overflow:hidden;border-radius:12px;background:var(--gs);color:var(--gold)}
.admin-sample-thumb img{width:100%;height:100%;object-fit:cover}
.admin-sample-thumb-icon .i{width:20px;height:20px}
.admin-sample-row-copy{display:grid;gap:3px;min-width:0;flex:1}
.admin-sample-row-copy>div{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.admin-sample-row-copy>div b{font-size:12px;overflow-wrap:anywhere}
.admin-sample-row-copy>small{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.admin-sample-type{font-size:11px;padding:2px 6px;border-radius:99px;background:var(--card);color:var(--mut)}
.admin-sample-state{width:fit-content;font-size:11px;padding:1px 6px}
.admin-sample-state.draft{background:color-mix(in srgb,var(--mut) 13%,transparent);color:var(--mut)}
.admin-sample-row-actions{display:flex;gap:4px;flex:none}
.admin-sample-row-actions button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);transition:.16s}
.admin-sample-row-actions button:hover{color:var(--gold);border-color:var(--gold)}
.admin-sample-row-actions button[data-sample-delete]:hover{color:var(--rose);border-color:var(--rose)}
.admin-sample-row-actions .i{width:14px;height:14px}
.admin-sample-empty{display:grid;place-items:center;gap:6px;min-height:150px;padding:18px;text-align:center;color:var(--mut);font-size:12px}
.admin-sample-empty b{font-size:12px;color:var(--tx)}
.admin-sample-empty small{font-size:11px}
.admin-sample-empty.is-error{color:var(--rose)}

/* Dynamic sample gallery. */
.sample-kind-section{margin-top:22px}
.sample-kind-section:first-child{margin-top:0}
.sample-kind-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sample-kind-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:12px;color:#fff}
.sample-kind-icon .i{width:17px;height:17px}
.sample-kind-head>div{display:grid;gap:2px;min-width:0;flex:1}
.sample-kind-head>div b{font-size:12px}
.sample-kind-head>div small{font-size:11px;color:var(--mut)}
.sample-kind-count{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:3px 8px}
.sample-prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.sample-prompt-card>button{display:flex;align-items:center;gap:10px;width:100%;min-height:76px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-align:right;transition:.18s}
.sample-prompt-card>button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 42%,var(--line));box-shadow:0 10px 22px -18px var(--gold)}
.sample-prompt-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--gs);color:var(--gold)}
.sample-prompt-copy{display:grid;gap:3px;min-width:0;flex:1}
.sample-prompt-copy b{font-size:12px}
.sample-prompt-copy small{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-prompt-arrow{color:var(--mut)}
.sample-prompt-arrow .i{width:15px;height:15px;transform:rotate(90deg)}
.sample-image-thumb{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;border-radius:12px;background:var(--bg2);cursor:pointer}
.sample-image-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.sample-image-thumb:hover img{transform:scale(1.045)}
.sample-image-thumb .thumb-info,.sample-video-thumb .thumb-info{position:absolute;inset:auto 0 0;padding:30px 12px 11px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;text-align:right}
.sample-video-thumb{position:relative;display:block;width:100%;min-height:190px;padding:0;border:0;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;cursor:pointer}
.sample-voice-card{padding:13px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.sample-voice-card>button{display:flex;align-items:center;gap:10px;width:100%;text-align:right}
.sample-voice-card .audio-card-info{flex:1;min-width:0}
.sample-voice-card .audio-card-info b,.sample-voice-card .audio-card-info small{display:block}
.sample-voice-card .audio-card-info b{font-size:12px}
.sample-voice-card .audio-card-info small{font-size:11px;color:var(--mut)}
.sample-voice-meta{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--mut)}
.sample-empty-state{display:grid;justify-items:center;gap:7px;padding:32px 16px;text-align:center;border:1px dashed var(--line2);border-radius:16px;color:var(--mut)}
.sample-empty-state .i{width:25px;height:25px;color:var(--gold)}
.sample-empty-state b{font-size:12px;color:var(--tx)}
.sample-empty-state small{font-size:12px;line-height:1.8}
.sample-modal-card{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);width:min(920px,calc(100vw - 28px));max-height:min(88dvh,900px);overflow:auto;border:1px solid var(--line2);border-radius:22px;background:var(--card);color:var(--tx);box-shadow:0 30px 100px #0008}
.sample-modal-media{display:grid;place-items:center;min-height:340px;padding:20px;background:color-mix(in srgb,var(--bg) 80%,#000)}
.sample-modal-image,.sample-modal-video{display:block;max-width:100%;max-height:65dvh;object-fit:contain;border-radius:12px}
.sample-modal-audio{width:min(420px,100%)}
.sample-modal-chat-icon{display:grid;place-items:center;width:90px;height:90px;border-radius:28px;background:var(--gs);color:var(--gold)}
.sample-modal-chat-icon .i{width:38px;height:38px}
.sample-modal-content{display:flex;flex-direction:column;gap:10px;padding:27px;min-width:0}
.sample-modal-content h2{font-size:18px}
.sample-modal-content>p{font-size:12px;line-height:1.9;color:var(--mut)}
.sample-modal-prompt{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);min-height:100px;max-height:250px;overflow:auto}
.sample-modal-prompt b{font-size:12px;color:var(--gold)}
.sample-modal-prompt p{margin-top:7px;font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.sample-modal-actions{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.sample-modal-actions button{min-height:40px}
.sample-modal-card .sp-close{position:absolute;top:12px;inset-inline-start:12px;z-index:2}

/* Refined OTP card and mobile behavior. */
.lg-card{position:relative;border-radius:30px;border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 94%,#fff),var(--bg2));box-shadow:0 36px 110px -42px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.035),inset 0 1px 0 rgba(255,255,255,.08)}
.lg-aside{background:radial-gradient(440px 320px at 95% 5%,rgba(7,210,248,.18),transparent 68%),linear-gradient(155deg,#202033 0%,#10131f 58%,#0a0d15 100%)}
.lg-main{background:linear-gradient(150deg,rgba(255,255,255,.025),transparent 50%),var(--bg2)}
.lg-badge{box-shadow:0 12px 26px -15px var(--gold);border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line))}
.lg-field{border-radius:16px;border-color:color-mix(in srgb,var(--line2) 80%,transparent);background:color-mix(in srgb,var(--bg) 72%,transparent)}
.lg-field:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 13%,transparent),0 10px 24px -18px var(--gold)}
.lg-primary{border-radius:16px;box-shadow:0 12px 25px -16px var(--gold);transition:transform .18s,box-shadow .18s,filter .18s}
.lg-primary:hover{transform:translateY(-1px);box-shadow:0 15px 28px -15px var(--gold);filter:brightness(1.035)}
.lg-digit{border-radius:16px!important;border-color:var(--line2)!important;background:var(--bg)!important}
.lg-digit:focus{border-color:var(--gold)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 13%,transparent)!important}
@media(max-width:900px){.admin-samples-layout{grid-template-columns:1fr}.admin-sample-list{max-height:300px}}
@media(max-width:620px){
 .admin-settings-card{max-height:96dvh;border-radius:16px}.admin-settings-head{padding:15px 15px 12px}.admin-settings-content{padding:0 15px}.admin-settings-footer{padding:12px 15px 15px}.admin-sample-meta-grid,.admin-sample-options{grid-template-columns:1fr}.admin-sample-actions>*{flex:1}.sample-prompt-grid{grid-template-columns:1fr}.sample-modal-card{grid-template-columns:1fr}.sample-modal-media{min-height:210px}.sample-modal-content{padding:19px}.sample-modal-image,.sample-modal-video{max-height:38dvh}
}


.admin-upload.is-dragover{border-color:var(--gold);border-style:solid;background:color-mix(in srgb,var(--gold) 15%,var(--bg2));box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent)}

.sample-gallery-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.sample-search{display:flex;align-items:center;gap:7px;min-width:190px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--mut)}
.sample-search .i{width:14px;height:14px;flex:none}
.sample-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--tx);font:inherit;font-size:12px}
.sample-search input::placeholder{color:var(--mut)}
.admin-sample-list-head input{width:min(160px,34vw);height:34px;padding:0 9px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);color:var(--tx);font:inherit;font-size:12px;outline:none}
.admin-sample-list-head input:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent)}
@media(max-width:620px){.sample-gallery-controls{width:100%;justify-content:flex-start}.sample-search{width:100%}.admin-sample-list-head{flex-wrap:wrap}.admin-sample-list-head input{flex:1;min-width:120px}}


/* Model-aware controls and polished media result cards. */
.ratio-glyph{display:inline-block;flex:none;border:1.5px solid currentColor;border-radius:4px;opacity:.82;vertical-align:middle}
.ratio-glyph.ratio-square{width:16px;height:16px}
.ratio-glyph.ratio-portrait{width:11px;height:18px}
.ratio-glyph.ratio-landscape{width:22px;height:13px}
.ratio-glyph.ratio-auto{width:18px;height:15px;border-style:dashed;position:relative}
.ratio-glyph.ratio-auto:after{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:2px;opacity:.55}
.st b{display:inline-flex;align-items:center;gap:7px;min-width:0}
.st b>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt>.ratio-glyph{margin-inline:2px 3px}
.range-control{flex:1 1 190px;min-width:175px;max-width:260px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:5px 10px 4px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg2) 90%,transparent);color:var(--tx)}
.range-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut);line-height:1.3}
.range-head output{font-size:12px;font-weight:750;color:var(--gold);font-variant-numeric:tabular-nums}
.range-control input[type=range]{grid-column:1/-1;width:100%;height:16px;margin:0;accent-color:var(--gold);cursor:pointer;background:transparent}
.range-limits,.range-marks{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--mut);font-size:11px;line-height:1.2}.range-marks span{font-variant-numeric:tabular-nums}
.range-control:focus-within{border-color:color-mix(in srgb,var(--gold) 65%,var(--line2));box-shadow:0 0 0 2px var(--gs)}
.media-result{width:min(620px,100%);margin:14px 0;border:1px solid color-mix(in srgb,var(--line2) 78%,transparent);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 12px 35px -26px rgba(0,0,0,.5)}
.media-result-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.media-result-kind{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--tx)}
.media-result-kind svg{width:17px;height:17px;color:var(--gold)}
.media-result-kind b{font-weight:700}
.media-result-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal)}
.media-result-mark svg{width:14px;height:14px}
.media-result-stage{display:grid;place-items:center;min-height:90px;background:color-mix(in srgb,var(--bg2) 52%,transparent)}
.media-result .media-stage-link{display:block;width:100%;padding:0;text-decoration:none;background:transparent}
.media-result .media-stage-link img{display:block;width:100%;max-height:560px;object-fit:contain;padding:0;cursor:zoom-in}
.media-result .media-player-video{display:block;width:100%;max-height:560px;background:#080b12;object-fit:contain}
.media-player.audio-player{width:100%;display:flex;align-items:center;gap:12px;padding:22px 16px;background:linear-gradient(135deg,color-mix(in srgb,#7a5aa6 13%,var(--bg2)),color-mix(in srgb,var(--gold) 8%,var(--bg2)))}
.media-player.audio-player>svg{width:24px;height:24px;flex:none;color:var(--gold)}
.media-player.audio-player audio{width:100%;min-width:0}
.media-result-foot{display:grid;gap:9px;padding:10px 12px 11px;border-top:1px solid var(--line)}
.media-result-tools{display:flex;align-items:center;gap:7px;min-height:34px}
.media-result .media-tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--tx);background:var(--bg2);font-size:12px;font-weight:650;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.media-result .media-tool:hover{background:var(--gs);border-color:color-mix(in srgb,var(--gold) 35%,var(--line));color:var(--gold)}
.media-result .media-tool svg{width:14px;height:14px;color:var(--mut)}
.media-result .media-tool:hover svg{color:var(--gold)}
.media-tools-divider{height:21px;width:1px;background:var(--line);margin-inline:3px}
.media-feedback{width:32px;height:32px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;color:var(--mut);background:transparent;transition:background .15s,color .15s,border-color .15s}
.media-feedback svg{width:15px;height:15px}
.media-feedback:hover,.media-feedback.is-active{color:var(--gold);background:var(--gs);border-color:color-mix(in srgb,var(--gold) 25%,transparent)}
.media-feedback:disabled{opacity:.45;cursor:wait}
.media-result-billing .message-billing{margin:0;padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--bg2) 75%,transparent);font-size:12px;line-height:1.6}
.media-result-billing .message-billing.pending{color:var(--mut)}
.media-result-billing .message-billing.failed{color:var(--rose)}
.media-result-billing .message-billing.unknown{color:var(--mut)}
.acts .ib[aria-pressed=true]{color:var(--gold);background:var(--gs)}
@media(max-width:760px){
  .range-control{flex:1 1 calc(50% - 4px);min-width:0;max-width:none;padding:5px 8px 4px}
  .range-head{font-size:12px}
  .range-head output{font-size:12px}
  .media-result{width:100%;border-radius:16px}
  .media-result-foot{padding:9px}
  .media-result .media-tool{padding-inline:8px}
}
.range-marks{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--mut);font-size:11px;line-height:1.2;font-variant-numeric:tabular-nums}
.range-marks span{white-space:nowrap;flex:0 1 auto;text-align:center}
@media(max-width:760px){.range-marks{font-size:11px;gap:2px}.range-marks span{letter-spacing:-.1px}}


/* ================================================================
   PRO CONTROLS v2 — chat-box selects, free/paid badges, range sliders,
   and the admin workspace (custom dropdowns and switches).
   ================================================================ */

/* ---------- Composer selects ---------- */
.cmp .st{
  position:relative;min-height:36px;padding:0 11px 0 9px;gap:8px;border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,#fff 8%),color-mix(in srgb,var(--bg2) 94%,transparent));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 14px -12px rgba(0,0,0,.45);
  font-size:12px;font-weight:650;color:var(--tx);cursor:pointer;
  transition:border-color .18s,box-shadow .18s,background .18s,transform .12s
}
.cmp .st:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line2));transform:translateY(-1px)}
.cmp .st:active{transform:none}
.cmp .st:focus-visible,.cmp .sel.is-open .st{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.cmp .st .sl{
  display:inline-flex;align-items:center;gap:8px;color:var(--mut);font-size:12px;font-weight:700;letter-spacing:0;
  padding-inline-end:9px;border-inline-end:1px solid var(--line)
}
.cmp .st b{font-weight:750}
.cmp .st>svg:last-child{width:13px;height:13px;margin-inline-start:2px;transition:transform .22s cubic-bezier(.3,.9,.3,1),color .18s}
.cmp .sel.is-open .st>svg:last-child{transform:rotate(180deg);color:var(--gold)}

/* free / paid badges */
.cmp .st .sel-badge,.opt .bd{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:12px;font-weight:800;line-height:1.7;
  padding:1px 9px 1px 8px;border-radius:99px;white-space:nowrap;letter-spacing:0;
  color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 28%,transparent)
}
.cmp .st .sel-badge[hidden]{display:none}
.sel-badge.is-free,.opt .bd.is-free{
  color:color-mix(in srgb,var(--teal) 92%,#fff 8%);
  background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 20%,transparent),color-mix(in srgb,var(--teal) 8%,transparent));
  border-color:color-mix(in srgb,var(--teal) 42%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 7%,transparent)
}
[data-theme=light] .sel-badge.is-free,[data-theme=light] .opt .bd.is-free{color:#0b7f6b}
.sel-badge.is-free::before,.opt .bd.is-free::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 28%,transparent);animation:zFreePulse 2.4s ease-in-out infinite
}
@keyframes zFreePulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 6%,transparent)}}
.sel-badge.is-paid,.opt .bd.is-paid{color:var(--gold)}

/* dropdown panel */
.menu{
  min-width:270px;max-height:min(320px,52vh);padding:7px;border-radius:16px;
  background:color-mix(in srgb,var(--card) 96%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 16%,var(--line2));
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 22px 56px -18px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03) inset
}
[data-theme=light] .menu{box-shadow:0 22px 50px -22px rgba(71,57,28,.38),0 2px 6px rgba(71,57,28,.06)}
.menu::-webkit-scrollbar{width:6px}
.menu .opt{
  position:relative;gap:11px;min-height:46px;padding:8px 12px;border-radius:12px;border:1px solid transparent;
  transition:background .14s,border-color .14s
}
.menu .opt+.opt{margin-top:2px}
.menu .opt.act{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.menu .opt[aria-selected=true]{background:color-mix(in srgb,var(--gold) 13%,transparent);border-color:color-mix(in srgb,var(--gold) 26%,transparent)}
.menu .opt[aria-selected=true]::before{
  content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--gold)
}
.menu .opt .tt{font-size:12.5px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.menu .opt .tt small{font-size:12px;font-weight:500;color:var(--mut);direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.menu .opt .ck{
  width:20px;height:20px;padding:4px;border-radius:50%;flex:none;color:#06132c;background:var(--gold);
  opacity:0;transform:scale(.6);transition:opacity .16s,transform .2s cubic-bezier(.3,1.4,.5,1)
}
.menu .opt[aria-selected=true] .ck{opacity:1;transform:none}

/* ---------- Range sliders (select-style trigger + compact popover) ---------- */
.range-sel .st b{color:var(--gold);font-variant-numeric:tabular-nums;font-weight:800}
.menu[data-side=down]{transform-origin:top center}
.menu.range-pop{min-width:250px;max-height:none;overflow:visible;padding:12px 14px 11px;border-radius:16px}
.range-pop .range-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:750;color:var(--mut);margin-bottom:8px}
.range-pop .range-head output{
  min-width:58px;text-align:center;padding:1px 10px;border-radius:99px;font-size:12px;font-weight:800;color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);font-variant-numeric:tabular-nums
}
.range-row{display:flex;align-items:center;gap:9px}
.rg-step{
  display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line2);
  background:color-mix(in srgb,var(--bg2) 92%,transparent);color:var(--mut);cursor:pointer;transition:border-color .15s,color .15s,background .15s
}
.rg-step svg{width:13px;height:13px}
.rg-step:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line2));background:var(--gs)}
.rg-step:active{transform:scale(.94)}
.range-pop input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;height:20px;margin:0;background:transparent;outline:none;cursor:pointer;--range-progress:0%
}
.range-pop input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(to right,var(--gold2),var(--gold)) 0/var(--range-progress) 100% no-repeat,color-mix(in srgb,var(--line2) 85%,transparent)
}
:root[dir=rtl] .range-pop input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(to left,var(--gold2),var(--gold)) 100%/var(--range-progress) 100% no-repeat,color-mix(in srgb,var(--line2) 85%,transparent)
}
.range-pop input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-5.5px;border-radius:50%;
  background:#fff;border:3.5px solid var(--gold);box-shadow:0 2px 6px -1px rgba(0,0,0,.5);transition:transform .15s,box-shadow .15s
}
.range-pop input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.range-pop input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.range-pop input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 26%,transparent),0 2px 6px -1px rgba(0,0,0,.5)}
.range-pop input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:color-mix(in srgb,var(--line2) 85%,transparent)}
.range-pop input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:linear-gradient(to right,var(--gold2),var(--gold))}
.range-pop input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#fff;border:3.5px solid var(--gold);box-shadow:0 2px 6px -1px rgba(0,0,0,.5)}
.range-pop .range-limits,.range-pop .range-marks{display:flex;justify-content:space-between;margin:5px 35px 0;font-size:11px;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .cmp .st{min-height:38px}
  .cmp .st .sl{padding-inline-end:7px}
  .menu{min-width:min(280px,calc(100vw - 28px))}
}

/* ---------- Administrator workspace page ---------- */
.admin-settings-card{
  border-radius:26px;border:1px solid color-mix(in srgb,var(--gold) 14%,var(--line));
  box-shadow:0 40px 110px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset;animation:zAdminIn .26s cubic-bezier(.2,.9,.3,1) both
}
@keyframes zAdminIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.admin-settings-head{
  padding:22px 26px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 9%,var(--card)),var(--card) 55%)
}
.admin-settings-kicker{display:inline-block;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--gold) 13%,transparent);letter-spacing:0}
.admin-settings-head h2{font-size:20px;font-weight:850}

.admin-settings-content{padding:0 26px;margin-top:6px}
.admin-settings-panel{padding:22px 0 18px;animation:zPanelIn .22s ease-out both}
@keyframes zPanelIn{from{opacity:0;transform:translateY(6px)}}
.admin-panel-title{
  padding:14px 16px;margin-bottom:20px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 6%,var(--bg2)),var(--bg2))
}
.admin-panel-title h3{font-size:15px;font-weight:850}
.admin-panel-icon{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--gold) 12%,var(--card));border-color:color-mix(in srgb,var(--gold) 28%,var(--line))}

/* fields */
.admin-field{gap:8px;font-size:12px;font-weight:800;color:var(--tx)}
.admin-field input,.admin-field textarea{
  height:44px;border-radius:12px;border:1px solid var(--line2);background:color-mix(in srgb,var(--bg2) 94%,var(--bg));
  transition:border-color .16s,box-shadow .16s,background .16s
}
.admin-field textarea{height:auto}
.admin-field input:hover,.admin-field textarea:hover{border-color:color-mix(in srgb,var(--gold) 38%,var(--line2))}
.admin-field input:focus,.admin-field textarea:focus{border-color:var(--gold);background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 15%,transparent)}
.admin-field input::placeholder,.admin-field textarea::placeholder{color:color-mix(in srgb,var(--mut) 80%,transparent);font-weight:400}

/* custom dropdown (replaces native select inside the administrator workspace) */
.zs{position:relative;width:100%;min-width:0}
.zs-native{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0;pointer-events:none;z-index:-1}
.zs-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:44px;padding:0 14px;
  border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--bg2) 94%,var(--bg));color:var(--tx);
  font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;text-align:start;
  transition:border-color .16s,box-shadow .16s,background .16s
}
.zs-btn:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line2))}
.zs-btn:focus-visible,.zs.is-open .zs-btn{outline:none;border-color:var(--gold);background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 15%,transparent)}
.zs-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zs-val.is-placeholder{color:var(--mut);font-weight:550}
.zs-chev{width:15px;height:15px;flex:none;color:var(--mut);transition:transform .22s cubic-bezier(.3,.9,.3,1),color .16s}
.zs.is-open .zs-chev{transform:rotate(180deg);color:var(--gold)}
.zs.is-disabled .zs-btn{opacity:.5;cursor:not-allowed;background:var(--bg2)}
.zs-compact .zs-btn{height:38px;font-size:12px;padding:0 12px}
.admin-sample-list-head .zs{width:auto;min-width:132px}

.zs-menu{
  position:fixed;z-index:460;margin:0;padding:6px;list-style:none;overflow:auto;border-radius:16px;
  background:color-mix(in srgb,var(--card) 97%,transparent);border:1px solid color-mix(in srgb,var(--gold) 18%,var(--line2));
  box-shadow:0 26px 60px -18px rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform-origin:top center;animation:zsIn .16s ease-out both
}
.zs-menu.is-up{transform-origin:bottom center}
.zs-menu[hidden]{display:none}
@keyframes zsIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.zs-menu.is-up{animation-name:zsInUp}
@keyframes zsInUp{from{opacity:0;transform:translateY(6px) scale(.98)}}
.zs-opt{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:7px 12px;
  border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .12s
}
.zs-opt+.zs-opt{margin-top:2px}
.zs-opt.act{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.zs-opt[aria-selected=true]{background:color-mix(in srgb,var(--gold) 13%,transparent);border-color:color-mix(in srgb,var(--gold) 26%,transparent)}
.zs-opt[aria-selected=true]::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--gold)}
.zs-opt-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.zs-opt-tx b{font-size:12.5px;font-weight:700}
.zs-opt-tx small{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.zs-ck{width:20px;height:20px;padding:4px;border-radius:50%;flex:none;color:#06132c;background:var(--gold);opacity:0;transform:scale(.6);transition:opacity .16s,transform .2s cubic-bezier(.3,1.4,.5,1)}
.zs-opt[aria-selected=true] .zs-ck{opacity:1;transform:none}

/* switches (voice enabled / publish sample) */
.admin-settings-toggle,.admin-sample-publish{
  position:relative;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 5%,var(--bg2)),var(--bg2));transition:border-color .16s,background .16s
}
.admin-settings-toggle:hover,.admin-sample-publish:hover{border-color:color-mix(in srgb,var(--gold) 38%,var(--line2))}
.admin-settings-toggle:has(input:checked),.admin-sample-publish:has(input:checked){border-color:color-mix(in srgb,var(--teal) 40%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--teal) 9%,var(--bg2)),var(--bg2))}
.admin-settings-toggle input,.admin-sample-publish input{
  -webkit-appearance:none;appearance:none;flex:none;order:2;margin:0;width:44px;height:26px;border-radius:99px;position:relative;cursor:pointer;
  background:color-mix(in srgb,var(--line2) 85%,transparent);border:1px solid var(--line2);transition:background .2s,border-color .2s
}
.admin-settings-toggle input::after,.admin-sample-publish input::after{
  content:"";position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:inset-inline-start .22s cubic-bezier(.3,1.2,.5,1)
}
.admin-settings-toggle input:checked,.admin-sample-publish input:checked{background:var(--teal);border-color:var(--teal)}
.admin-settings-toggle input:checked::after,.admin-sample-publish input:checked::after{inset-inline-start:20px}
.admin-settings-toggle input:focus-visible,.admin-sample-publish input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.admin-settings-toggle span,.admin-sample-publish span{flex:1;order:1}
.admin-settings-toggle b,.admin-sample-publish b{font-size:12.5px;font-weight:800}

/* connection status row */
.admin-settings-inline{border-radius:16px;font-weight:600}
#adminGatewayStatus::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)}

/* upload zones */
.admin-upload{border-radius:16px;border-width:1.5px;transition:border-color .16s,background .16s,transform .16s}
.admin-upload:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 6%,var(--bg2))}
.admin-upload-action{border-radius:12px;font-weight:800}

/* footer + buttons */
.admin-settings-footer{padding:16px 26px 20px;background:color-mix(in srgb,var(--bg2) 88%,var(--bg))}
.admin-settings-primary,.admin-settings-secondary{min-height:44px;border-radius:12px;padding:0 20px;font-size:12.5px;transition:transform .14s,box-shadow .16s,background .16s,border-color .16s}
.admin-settings-primary{background:linear-gradient(180deg,var(--gold),var(--gold2));border-color:var(--gold2);box-shadow:0 10px 22px -12px var(--gold)}
.admin-settings-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 26px -12px var(--gold)}
.admin-settings-secondary:hover:not(:disabled){border-color:color-mix(in srgb,var(--gold) 45%,var(--line2));background:color-mix(in srgb,var(--gold) 7%,var(--bg2))}

@media(max-width:620px){
  .admin-settings-card{border-radius:20px}
  .admin-settings-head{padding:16px 16px 14px}
      .admin-settings-content{padding:0 14px}
  .admin-settings-footer{padding:12px 14px 16px}
  .admin-panel-title{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .admin-settings-card,.admin-settings-panel,.zs-menu,.menu.on{animation:none}
  .sel-badge.is-free::before,.opt .bd.is-free::before{animation:none}
}

/* Unified conversation management */
.sb-record{margin:5px 0;padding:5px;border-radius:16px;background:color-mix(in srgb,var(--card) 65%,transparent);border-color:var(--line)}
.sb-record .sb-item-icon{background:var(--gs);color:var(--gold);border:1px solid var(--line);border-radius:12px;width:34px;height:34px;box-shadow:none}
.sb-record .sb-item-icon .i{width:18px;height:18px}
.sb-record .sb-item-title{font-weight:600;font-size:12px;line-height:1.9}.sb-record .sb-item-sub{font-size:12px;opacity:.7}
.sb-record-actions{opacity:1;position:relative}.sb-manage{width:32px;height:36px;border:1px solid var(--line);background:var(--bg2);border-radius:12px;opacity:1;color:var(--mut)}
.sb-manage:hover,.sb-manage[aria-expanded=true]{color:var(--gold);border-color:var(--gold)}
.sb-manage-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;min-width:170px;padding:6px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 35px #0005}
.sb-manage-menu[hidden]{display:none}.sb-manage-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 10px;border-radius:8px;font-size:12px;text-align:start;color:var(--tx)}
.sb-manage-menu button:hover,.sb-manage-menu button:focus-visible{background:var(--gs);outline:1px solid var(--gold)}.sb-manage-menu .i{width:16px;height:16px}.sb-manage-menu .is-danger{color:var(--rose)}
#sbScroll{padding-bottom:110px}
/* Four digit verification */
.lg-card{-webkit-user-select:none;user-select:none;width:min(920px,100%);border-radius:26px}
.lg-card input{-webkit-user-select:text;user-select:text}.lg-main{padding:38px;min-width:0}.lg-steps{margin-bottom:22px}
.lg-field{min-height:60px}.lg-field input{font-size:19px;letter-spacing:1px}.lg-otp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(304px,100%);margin:26px auto 18px;direction:ltr}
.lg-otp .lg-digit{width:100%;min-width:0;height:68px;font-size:28px;font-weight:700;text-align:center;caret-color:var(--gold);transition:border-color .2s,box-shadow .2s}
.lg-otp .lg-digit.filled{border-color:color-mix(in srgb,var(--gold) 65%,var(--line))!important}.lg-otp .lg-digit.err{border-color:var(--rose)!important}
.lg-primary{min-height:52px}.lg-message{min-height:24px;line-height:1.8}.lg-resend{min-height:44px}.lg-card button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Recent work cards show the actual saved output. */
#cards{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;align-items:start}
.recent-card{min-width:0;border:1px solid var(--line);border-radius:20px;padding:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,var(--gold)),var(--card));box-shadow:0 16px 38px -30px #0008}
.recent-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut)}.recent-card-top>span{display:flex;align-items:center;gap:6px;color:var(--gold)}.recent-card-top .i{width:15px;height:15px}
.recent-card h3{font-size:13px;line-height:1.9;margin:12px 0;overflow-wrap:anywhere}.recent-card .media-result{max-width:100%;width:100%;margin:0;border-radius:12px}.recent-card .media-result-head{display:none}
.recent-card .media-stage-link{padding:0}.recent-card .media-stage-link img{height:235px;width:100%;object-fit:contain;background:var(--bg)}
.recent-card .media-result-foot{padding:10px}.recent-card .media-result-tools{gap:5px;flex-wrap:wrap}.recent-card .media-tool{padding:7px;font-size:12px}.recent-card .media-tools-divider{display:none}
.recent-card .media-result-billing{font-size:12px}.recent-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:230px;overflow:auto;line-height:2;font-size:12px;background:var(--bg);padding:14px;border-radius:12px}
.recent-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:11px;border:1px solid var(--line);border-radius:12px;font-size:12px;color:var(--mut)}.recent-open:hover{border-color:var(--gold);color:var(--gold)}.recent-open .i{width:15px;height:15px}
.recent-empty{grid-column:1/-1;display:grid;justify-items:center;gap:12px;text-align:center;padding:40px 15px;border:1px dashed var(--line2);border-radius:18px;color:var(--mut);font-size:13px}.recent-empty>.i{width:32px;height:32px}.recent-empty button{color:var(--gold);padding:10px}
/* Accessible players with native fallback before enhancement. */
.studio-player{background:#070b1f;color:#f3f7fe;overflow:hidden;direction:ltr}.studio-player video{width:100%;max-height:480px;display:block;aspect-ratio:16/9;object-fit:contain;background:#06080e}
.studio-audio-art{display:grid;place-items:center;gap:10px;padding:25px 12px 12px;background:radial-gradient(ellipse at 50% 10%,#3f3652,transparent 85%)}.studio-audio-art>.i{width:28px;height:28px;color:#07d2f8}.studio-audio-art>span{font-size:12px;color:#c7d4ee}
.studio-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:60px;max-width:100%}.studio-wave i{display:block;width:3px;height:var(--wave);background:linear-gradient(#07d2f8,#786446);border-radius:5px;opacity:.65}.studio-player.is-playing .studio-wave i{animation:studioWave .8s ease-in-out infinite alternate}.studio-wave i:nth-child(3n){animation-delay:-.3s!important}
@keyframes studioWave{to{transform:scaleY(.45);opacity:1}}
.studio-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px;background:#111624}.studio-controls[hidden]{display:none}.studio-controls button{display:grid;place-items:center;color:#e9effb;min-width:32px;min-height:36px;border:1px solid #ffffff18;border-radius:8px;font-size:12px;background:#ffffff08}.studio-controls [data-player-play]{background:#07d2f8;color:#15151d;border:0}.studio-controls .i{width:16px;height:16px}.studio-controls output{font:10px monospace;color:#bbc2d4;white-space:nowrap}
.studio-controls input[type=range]{flex:1;min-width:55px;width:65px;accent-color:#07d2f8;cursor:pointer;height:28px}.studio-controls button:focus-visible,.studio-controls input:focus-visible{outline:2px solid #07d2f8;outline-offset:2px}.studio-player-error{font-size:12px;color:#ffb5b5;padding:10px;direction:rtl}.studio-player:fullscreen{display:flex;flex-direction:column;justify-content:center}.studio-player:fullscreen video{max-height:calc(100dvh - 65px);flex:1}
#adminSmsStatus{font-size:12px;line-height:2;color:var(--mut);margin:16px 0}
@media(max-width:760px){.lg-main{padding:28px 22px}.lg-card{grid-template-columns:1fr}.lg-aside{display:none}.lg-otp{gap:10px}.lg-otp .lg-digit{height:62px}.recent-card{padding:12px}}
@media(prefers-reduced-motion:reduce){.studio-wave i{animation:none!important}.lg-card{animation:none}.lg-primary{transition:none}}

.lg-setup-link{display:block;text-align:center;margin-top:18px;padding:10px;color:var(--gold);font-size:12px;line-height:1.9;text-decoration:none}.lg-setup-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.admin-setup-page{min-height:100dvh;height:auto;overflow:auto;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(ellipse at 25% 10%,#292339,transparent 65%),#070b1f;color:var(--tx)}
.admin-setup-card{width:min(460px,100%);padding:32px;border:1px solid var(--line2);border-radius:24px;background:var(--bg2);box-shadow:0 24px 80px #0005}.admin-setup-card .lg-mark{margin-bottom:24px}.admin-setup-kicker{color:var(--gold);font-size:12px}.admin-setup-card h1{font-size:24px;margin:10px 0}.admin-setup-card>p{font-size:13px;line-height:2;color:var(--mut);margin-bottom:24px}.admin-setup-card .lg-label{display:block;margin:18px 0 9px}.admin-setup-card .lg-field input{width:100%;min-width:0;padding:14px;font-size:16px}.admin-setup-hint{font-size:12px;line-height:2;color:var(--mut);margin:12px 0 22px}.admin-setup-error{border:1px solid var(--rose);color:var(--rose);padding:12px;border-radius:12px;line-height:1.9;font-size:12px}
@media(max-width:480px){.admin-setup-card{padding:24px 20px}}
/* =====================================================================
   ZARIN PANEL · PROFESSIONAL REDESIGN LAYER (final cascade wins)
   1) Centered tab-free login   2) Sample modal redesign   3) Credit pill
   4) Icon micro-polish         5) Professional panel motion
   ===================================================================== */

/* ---------------------------------------------------------------
   1 · LOGIN — centered single card, no tabs, pro fields + OTP
   --------------------------------------------------------------- */
.lg-screen{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:18px;
  background:
    radial-gradient(1100px 620px at 82% 8%, color-mix(in srgb,var(--gold) 16%, transparent), transparent 62%),
    radial-gradient(900px 560px at 8% 92%, color-mix(in srgb,var(--teal) 12%, transparent), transparent 62%),
    color-mix(in srgb,var(--bg) 78%, transparent);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  overflow-y:auto;
}
.lg-screen[hidden]{display:none!important}
.lg-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lg-scene .lg-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.lg-orb1{width:420px;height:420px;top:-140px;inset-inline-end:-120px;background:radial-gradient(circle,rgba(7,210,248,.5),transparent 70%);animation:lgFloat 11s ease-in-out infinite alternate}
.lg-orb2{width:360px;height:360px;bottom:-150px;inset-inline-start:-110px;background:radial-gradient(circle,rgba(1,96,234,.34),transparent 70%);animation:lgFloat 13s ease-in-out infinite alternate-reverse}
.lg-orb3{width:300px;height:300px;top:38%;inset-inline-start:44%;background:radial-gradient(circle,rgba(122,90,166,.28),transparent 72%);animation:lgFloat 15s ease-in-out infinite alternate}
@keyframes lgFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-26px,22px) scale(1.08)}}

.lg-card{
  position:relative;display:flex;flex-direction:column;width:min(460px,100%);
  border-radius:30px;padding:40px 38px 32px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--card) 96%,#fff),color-mix(in srgb,var(--bg2) 92%,var(--card)));
  box-shadow:0 44px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04) inset,0 1px 0 rgba(255,255,255,.09) inset;
  -webkit-user-select:none;user-select:none;
}
.lg-card input{-webkit-user-select:text;user-select:text}

/* professional close button */
.lg-close{
  position:absolute;top:16px;inset-inline-start:16px;z-index:3;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--mut);background:color-mix(in srgb,var(--bg) 46%,transparent);
  border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .2s,border-color .2s,background .2s,transform .3s cubic-bezier(.3,1.3,.4,1);
}
.lg-close:hover{color:var(--rose);border-color:color-mix(in srgb,var(--rose) 45%,var(--line));background:color-mix(in srgb,var(--rose) 12%,transparent);transform:rotate(90deg) scale(1.05)}
.lg-close:active{transform:rotate(90deg) scale(.94)}
.lg-close svg{width:16px;height:16px}

/* centered steps (brand head removed — badge leads the card) */
.lg-step{display:flex;flex-direction:column;text-align:center}
.lg-step[hidden]{display:none}
.lg-badge{
  width:56px;height:56px;border-radius:18px;margin:16px auto 0;display:grid;place-items:center;
  color:var(--ong);background:linear-gradient(145deg,var(--gold),var(--gold2));
  box-shadow:0 16px 30px -14px var(--gold),inset 0 1px 0 rgba(255,255,255,.45);
}
.lg-badge svg{width:24px;height:24px;stroke-width:1.8}
.lg-badge-otp{margin-top:10px}
.lg-step h1{margin-top:14px;font-size:21px;font-weight:900;line-height:1.6}
.lg-lead{margin-top:5px;font-size:12.5px;line-height:2;color:var(--mut)}
.lg-lead b{color:var(--tx);font-weight:800;unicode-bidi:isolate}
.lg-label{display:block;text-align:start;margin-top:20px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--tx)}

/* professional phone field — dial code left, mobile icon right */
.lg-field{
  position:relative;display:flex;align-items:center;height:56px;border-radius:16px;
  border:1.5px solid var(--line2);background:color-mix(in srgb,var(--bg) 55%,var(--card));
  transition:border-color .2s,box-shadow .25s,background .2s;direction:ltr;
}
.lg-field:focus-within{border-color:var(--gold);background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 14%,transparent),0 14px 30px -22px var(--gold)}
.lg-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 14px;font-size:18px;font-weight:700;letter-spacing:1.2px;text-align:left;color:var(--tx)}
.lg-field input::placeholder{color:color-mix(in srgb,var(--mut) 55%,transparent);font-weight:500;letter-spacing:1px}
.lg-cc{display:flex;align-items:center;height:100%;padding:0 13px;flex:none;color:var(--tx);background:color-mix(in srgb,var(--tx) 4%,transparent);border-inline-end:1px solid var(--line);border-radius:14px 0 0 14px}
.lg-cc b{font-size:14px;font-weight:800}
.lg-cc-ic{display:grid;place-items:center;width:46px;height:100%;flex:none;color:var(--mut);background:color-mix(in srgb,var(--tx) 4%,transparent);border-inline-start:1px solid var(--line);border-radius:0 14px 14px 0;transition:color .2s}
.lg-field:focus-within .lg-cc-ic{color:var(--gold)}
.lg-cc-ic svg{width:19px;height:19px;stroke-width:1.8}

.lg-message{min-height:22px;margin-top:9px;font-size:12px;line-height:1.9;color:var(--mut);text-align:start}
.lg-message.error{color:var(--rose);font-weight:700}

/* professional primary button with spinner */
.lg-primary{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  height:54px;margin-top:12px;border-radius:16px;font-size:14px;font-weight:800;color:var(--ong);
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  box-shadow:0 16px 32px -16px var(--gold),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .2s,box-shadow .25s,filter .2s;overflow:hidden;
}
.lg-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);transform:translateX(-130%);transition:transform .7s ease}
.lg-primary:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px var(--gold);filter:brightness(1.05)}
.lg-primary:hover::after{transform:translateX(130%)}
.lg-primary:active{transform:translateY(0) scale(.985)}
.lg-primary svg{width:17px;height:17px;stroke-width:2.2}
#sendOtp svg{transform:rotate(90deg);transition:transform .25s}
#sendOtp:hover svg{transform:rotate(90deg) translateX(-2px)}
.lg-spin{
  display:none;width:17px;height:17px;border-radius:50%;flex:none;
  border:2.5px solid color-mix(in srgb,var(--ong) 35%,transparent);border-top-color:var(--ong);
  animation:lgSpin .7s linear infinite;
}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-primary[aria-busy="true"]{pointer-events:none;filter:saturate(.9)}
.lg-primary[aria-busy="true"] .lg-spin{display:block}
.lg-primary[aria-busy="true"]>svg{display:none}

.lg-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:15px;font-size:12px;line-height:1.9;color:var(--mut)}
.lg-note svg{width:13px;height:13px;color:var(--teal);flex:none}
.lg-setup-link{display:block;text-align:center;margin-top:16px;padding:10px;color:var(--gold);font-size:12px;line-height:1.9;text-decoration:none;border-radius:12px;transition:background .2s}
.lg-setup-link:hover{background:var(--gs)}
.lg-setup-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* professional verification code */
.lg-otp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;width:min(316px,100%);margin:24px auto 6px;direction:ltr}
.lg-otp .lg-digit{
  width:100%;min-width:0;height:64px;border-radius:18px;text-align:center;font-size:26px;font-weight:900;padding:0;
  border:1.5px solid var(--line2)!important;background:color-mix(in srgb,var(--bg) 55%,var(--card))!important;
  caret-color:var(--gold);outline:0;color:var(--tx);
  transition:border-color .18s,box-shadow .22s,transform .22s,background .18s;
}
.lg-otp .lg-digit:focus{border-color:var(--gold)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 15%,transparent)!important;transform:translateY(-3px) scale(1.03)}
.lg-otp .lg-digit.filled{border-color:color-mix(in srgb,var(--gold) 62%,var(--line2))!important;background:color-mix(in srgb,var(--gold) 8%,var(--card))!important;box-shadow:0 10px 22px -16px var(--gold)}
.lg-otp .lg-digit.err{border-color:var(--rose)!important;background:color-mix(in srgb,var(--rose) 10%,transparent)!important;animation:lgShake .4s}
@keyframes lgShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.lg-otp-top{display:flex;justify-content:flex-start;margin-bottom:2px}
.lg-back{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 11px;border-radius:99px;
  font-size:12px;font-weight:700;color:var(--mut);border:1px solid var(--line);
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.lg-back:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:var(--gs);transform:translateX(2px)}
.lg-back svg{width:14px;height:14px;transform:rotate(90deg)}
.lg-resend-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:15px;font-size:12px;color:var(--mut)}
.lg-resend{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;padding:6px 8px;border-radius:8px;transition:background .2s,color .2s}
.lg-resend:hover:not(:disabled){background:var(--gs)}
.lg-resend:disabled{color:var(--mut);font-weight:600;cursor:default}
.lg-card button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.auth-success .lg-card{animation:lgSuccess .55s cubic-bezier(.3,1.2,.4,1)}
@keyframes lgSuccess{40%{transform:scale(1.02);box-shadow:0 44px 120px -40px rgba(7,210,248,.5)}}

@media (max-width:480px){
  .lg-screen{padding:10px}
  .lg-card{padding:30px 20px 24px;border-radius:26px}
  .lg-otp{gap:8px}
  .lg-otp .lg-digit{height:56px;font-size:22px;border-radius:16px}
  .lg-step h1{font-size:19px}
  .lg-field{height:52px}
  .lg-field input{font-size:16px}
  .lg-close{top:12px;inset-inline-start:12px;width:34px;height:34px}
}

/* ---------------------------------------------------------------
   2 · SAMPLE MODAL — professional header, chips, prompt card
   --------------------------------------------------------------- */
.sp-modal{
  position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:16px;
  background:radial-gradient(900px 500px at 50% -8%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 60%),rgba(6,8,14,.78);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  overscroll-behavior:contain;
}
.sp-modal[hidden]{display:none!important}
.sp-modal .sample-modal-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  width:min(980px,100%);max-height:min(90dvh,920px);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--gold) 22%,var(--line2));border-radius:26px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--card) 97%,#fff),var(--card));color:var(--tx);
  box-shadow:0 46px 130px -40px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06) inset;
  animation:spIn .32s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes spIn{from{opacity:0;transform:translateY(18px) scale(.965)}}
.sp-modal .sp-close{
  position:absolute;top:14px;inset-inline-start:14px;z-index:6;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:rgba(10,12,20,.5);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .2s,background .2s,border-color .2s,transform .3s cubic-bezier(.3,1.3,.4,1);
}
.sp-modal .sp-close:hover{color:#fff;background:color-mix(in srgb,var(--rose) 78%,#000);border-color:transparent;transform:rotate(90deg) scale(1.06)}
.sp-modal .sp-close:active{transform:rotate(90deg) scale(.93)}
.sp-modal .sp-close svg{width:16px;height:16px}
.sp-modal .sample-modal-media{position:relative;display:grid;place-items:center;min-height:330px;padding:22px;background:radial-gradient(520px 340px at 50% 0%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 65%),color-mix(in srgb,var(--bg) 84%,#000)}
.sp-modal .sample-modal-image,.sp-modal .sample-modal-video{display:block;max-width:100%;max-height:66dvh;object-fit:contain;border-radius:16px;box-shadow:0 22px 60px -28px rgba(0,0,0,.8)}
.sp-modal .sample-modal-audio{width:min(400px,100%)}
.sp-modal .sample-modal-chat-icon{display:grid;place-items:center;width:104px;height:104px;border-radius:32px;color:var(--gold);background:linear-gradient(150deg,color-mix(in srgb,var(--gold) 20%,var(--card)),color-mix(in srgb,var(--bg2) 88%,var(--card)));border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));box-shadow:0 24px 50px -24px var(--gold)}
.sp-modal .sample-modal-chat-icon .i{width:44px;height:44px;stroke-width:1.6}
.sp-modal .sample-modal-content{display:flex;flex-direction:column;gap:12px;padding:26px 26px 24px;min-width:0;overflow:auto}
.sp-modal .sp-kind{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 12px;border-radius:99px;font-size:12px;font-weight:800;color:var(--gold);
  background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 16%,transparent),color-mix(in srgb,var(--gold) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
}
.sp-modal .sp-kind .i{width:14px;height:14px}
.sp-modal .sp-title{font-size:20px;font-weight:900;line-height:1.6;margin:0}
.sp-modal .sp-desc{margin:0;font-size:12px;line-height:2;color:var(--mut)}
.sp-modal .sp-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-modal .sp-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:12px;font-weight:600;color:var(--mut);background:color-mix(in srgb,var(--bg2) 82%,transparent);
  border:1px solid var(--line);
}
.sp-modal .sp-chip b{color:var(--tx);font-weight:800;font-variant-numeric:tabular-nums}
.sp-modal .sp-chip .i{width:13px;height:13px;color:var(--gold)}
.sp-modal .sample-modal-prompt{
  position:relative;padding:14px;border-radius:16px;min-height:96px;max-height:230px;overflow:auto;
  border:1px solid color-mix(in srgb,var(--gold) 24%,var(--line));
  background:color-mix(in srgb,var(--gold) 5%,var(--bg2));
}
.sp-modal .sp-prompt-label{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:12px;font-weight:800;color:var(--gold)}
.sp-modal .sp-prompt-label .i{width:14px;height:14px}
.sp-modal .sp-prompt-copy{
  display:inline-flex;align-items:center;gap:5px;margin-inline-start:auto;padding:4px 10px;border-radius:8px;
  font-size:12px;font-weight:800;color:var(--mut);border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 85%,transparent);transition:color .18s,border-color .18s,background .18s;
}
.sp-modal .sp-prompt-copy:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:var(--gs)}
.sp-modal .sp-prompt-copy .i{width:12px;height:12px}
.sp-modal .sample-modal-prompt p{margin:0;font-size:12px;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tx)}
.sp-modal .sample-modal-actions{display:flex;gap:9px;margin-top:auto;padding-top:6px}
.sp-modal .sp-use,.sp-modal .sp-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:16px;font-size:12.5px;font-weight:800;
}
.sp-modal .sp-use{flex:1.4;color:var(--ong);background:linear-gradient(180deg,var(--gold),var(--gold2));box-shadow:0 12px 26px -14px var(--gold),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s,box-shadow .25s,filter .2s}
.sp-modal .sp-use:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--gold);filter:brightness(1.05)}
.sp-modal .sp-use:active{transform:translateY(0) scale(.98)}
.sp-modal .sp-use .i,.sp-modal .sp-secondary .i{width:16px;height:16px}
.sp-modal .sp-secondary{flex:1;color:var(--tx);border:1px solid var(--line2);background:color-mix(in srgb,var(--bg2) 70%,transparent);transition:border-color .2s,color .2s,background .2s,transform .2s}
.sp-modal .sp-secondary:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line2));background:var(--gs)}
@media (max-width:620px){
  .sp-modal{padding:8px}
  .sp-modal .sample-modal-card{grid-template-columns:1fr;max-height:96dvh;overflow:auto;border-radius:20px}
  .sp-modal .sample-modal-media{min-height:215px}
  .sp-modal .sample-modal-image,.sp-modal .sample-modal-video{max-height:36dvh}
  .sp-modal .sample-modal-content{padding:19px}
}

/* ---------------------------------------------------------------
   3 · CREDIT PILL — hidden for guests, professional for users
   --------------------------------------------------------------- */
body[data-auth=guest] .hd-coin{display:none!important}
.hd-coin{
  position:relative;display:flex!important;align-items:center;gap:9px;height:40px;min-width:0;
  padding:0 14px 0 6px;border-radius:99px;overflow:hidden;cursor:default;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 15%,var(--card)),color-mix(in srgb,var(--gold) 4%,var(--card)) 60%,var(--card));
  box-shadow:0 8px 20px -14px var(--gold),inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.hd-coin::after{
  content:"";position:absolute;inset-block:-40%;width:46px;transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.hd-coin:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 12px 26px -14px var(--gold),inset 0 1px 0 rgba(255,255,255,.14)}
.hd-coin:hover::after{animation:coinShine 1s ease}
@keyframes coinShine{to{transform:translateX(320%) skewX(-18deg)}}
.hd-coin.bump{animation:coinBump .6s cubic-bezier(.3,1.4,.4,1)}
@keyframes coinBump{0%{transform:scale(1)}35%{transform:scale(1.07);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 14%,transparent)}100%{transform:scale(1)}}
.hd-coin-ic{
  width:29px;height:29px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--ong);background:linear-gradient(145deg,var(--gold),var(--gold2));
  box-shadow:0 5px 12px -5px var(--gold),inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent);
}
.hd-coin-ic svg{width:15px;height:15px;stroke-width:1.9}
.hd-coin i{display:none!important}
.hd-coin-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;gap:1px}
.hd-coin-tx small{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--mut)}
.hd-coin-tx span{font-size:13px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .hd-coin{padding:0 10px 0 5px;gap:7px}
  .hd-coin-tx small{font-size:11px}
  .hd-coin-tx span{font-size:12px}
}

/* ---------------------------------------------------------------
   4 · ICON POLISH — consistent strokes, alive micro-motion
   --------------------------------------------------------------- */
svg.i{stroke-width:1.7;transition:transform .3s cubic-bezier(.3,1.3,.4,1)}
.hd-icon:hover .i,.hd-hamburger:hover .i{transform:scale(1.1)}
.hd-icon:active .i,.rbtn:active .i,.opt-toggle:active .i{transform:scale(.88)}
.sb-nav-item .i{transition:transform .3s cubic-bezier(.3,1.3,.4,1),color .2s}
.sb-nav-item:hover .i{transform:scale(1.14)}
.sb-nav-item.on .i{transform:scale(1.06)}
.hd-coin-ic .i,.hd-coin-tx{transition:transform .3s cubic-bezier(.3,1.3,.4,1)}
.hd-coin:hover .hd-coin-ic{transform:rotate(-10deg) scale(1.08)}
.ib:hover .i,.media-tool:hover .i,.sample-filters button:hover .i{transform:scale(1.12)}
.quick-chip .i,.sample-prompt-icon .i,.sample-kind-icon .i{transition:transform .3s cubic-bezier(.3,1.3,.4,1)}
.quick-chip:hover .i{transform:scale(1.15) rotate(-4deg)}
.sample-prompt-card:hover .sample-prompt-icon .i{transform:scale(1.12)}
.sample-kind-head:hover .sample-kind-icon .i{transform:scale(1.12) rotate(-5deg)}

/* ---------------------------------------------------------------
   5 · PANEL MOTION — professional choreography (motion-safe only)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes zRise{from{opacity:0;transform:translateY(14px)}}
  @keyframes zFade{from{opacity:0}}
  @keyframes zSlideStart{from{opacity:0;transform:translateX(26px)}}
  @keyframes zDrop{from{opacity:0;transform:translateY(-14px)}}
  @keyframes zPop{from{opacity:0;transform:scale(.9)}}

  /* load choreography */
  .sidebar{animation:zSlideStart .55s cubic-bezier(.22,.9,.3,1) .05s backwards}
  .hd{animation:zDrop .5s cubic-bezier(.22,.9,.3,1) .12s backwards}
  .cwrap{animation:zRise .55s cubic-bezier(.22,.9,.3,1) .2s backwards}

  /* landing sections cascade */
  .landing-wrap>*{animation:zRise .55s cubic-bezier(.22,.9,.3,1) backwards}
  .landing-wrap>*:nth-child(1){animation-delay:.08s}
  .landing-wrap>*:nth-child(2){animation-delay:.16s}
  .landing-wrap>*:nth-child(3){animation-delay:.24s}
  .landing-wrap>*:nth-child(4){animation-delay:.32s}

  /* overview view switch */
  #vOver:not([hidden]) .ov-h,#vOver:not([hidden]) .ov,#vOver:not([hidden]) .sec{animation:zRise .5s cubic-bezier(.22,.9,.3,1) backwards}
  #vOver:not([hidden]) .ov{animation-delay:.1s}
  #vOver:not([hidden]) .sec{animation-delay:.2s}
  #vOver:not([hidden]) .recent-card{animation:zRise .5s cubic-bezier(.22,.9,.3,1) backwards}
  #vOver:not([hidden]) .recent-card:nth-child(1){animation-delay:.25s}
  #vOver:not([hidden]) .recent-card:nth-child(2){animation-delay:.31s}
  #vOver:not([hidden]) .recent-card:nth-child(3){animation-delay:.37s}
  #vOver:not([hidden]) .recent-card:nth-child(4){animation-delay:.43s}
  #vOver:not([hidden]) .recent-card:nth-child(5){animation-delay:.49s}
  #vOver:not([hidden]) .recent-card:nth-child(n+6){animation-delay:.55s}

  /* sample gallery cards cascade (replays on filter change) */
  .sample-prompt-card,.media-card,.sample-voice-card{animation:zRise .5s cubic-bezier(.22,.9,.3,1) backwards}
  .sample-prompt-grid>:nth-child(1),.img-masonry>:nth-child(1),.sample-media-grid>:nth-child(1){animation-delay:.05s}
  .sample-prompt-grid>:nth-child(2),.img-masonry>:nth-child(2),.sample-media-grid>:nth-child(2){animation-delay:.1s}
  .sample-prompt-grid>:nth-child(3),.img-masonry>:nth-child(3),.sample-media-grid>:nth-child(3){animation-delay:.15s}
  .sample-prompt-grid>:nth-child(4),.img-masonry>:nth-child(4),.sample-media-grid>:nth-child(4){animation-delay:.2s}
  .sample-prompt-grid>:nth-child(5),.img-masonry>:nth-child(5),.sample-media-grid>:nth-child(5){animation-delay:.25s}
  .sample-prompt-grid>:nth-child(6),.img-masonry>:nth-child(6),.sample-media-grid>:nth-child(6){animation-delay:.3s}
  .sample-prompt-grid>:nth-child(n+7),.img-masonry>:nth-child(n+7),.sample-media-grid>:nth-child(n+7){animation-delay:.35s}

  /* cards & controls hover life */
  .quick-chip{transition:transform .25s cubic-bezier(.3,1.3,.4,1),box-shadow .25s,border-color .2s,background .2s}
  .quick-chip:hover{transform:translateY(-3px);box-shadow:0 12px 26px -16px var(--gold)}
  .quick-chip:active{transform:translateY(-1px) scale(.97)}
  .sample-prompt-card>button,.media-card .thumb,.sample-voice-card>button{transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,border-color .25s}
  .sample-prompt-card:hover>button{transform:translateY(-3px);box-shadow:0 14px 30px -18px var(--gold)}
  .media-card .thumb:hover{transform:translateY(-3px)}
  .recent-card{transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,border-color .25s}
  .recent-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(0,0,0,.55);border-color:color-mix(in srgb,var(--gold) 30%,var(--line))}
  .sb-record{transition:background .2s,border-color .2s}
  .send:not(:disabled):hover{transform:translateY(-2px)}
  .send:not(:disabled):active{transform:scale(.96)}
  .send{transition:transform .2s,box-shadow .25s,background .2s,opacity .2s}

  /* sidebar nav life */
  .sb-nav-item{transition:background .2s,color .2s,transform .2s}
  .sb-nav-item:hover{transform:translateX(-3px)}
  .sb-nav-item.on{position:relative}
  .sb-nav-item.on::after{content:"";position:absolute;inset-inline-start:8px;top:50%;translate:0 -50%;width:4px;height:4px;border-radius:99px;background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);animation:zPop .35s cubic-bezier(.3,1.4,.4,1)}
  .app[data-sidebar=collapsed] .sb-nav-item.on::after{inset-inline-start:4px}
  .sb-logo{transition:transform .4s cubic-bezier(.3,1.3,.4,1),box-shadow .3s}
  .sb-toggle:hover .sbt-chev{transform:translateX(-2px)}

  /* header user menu pop */
  .hd-menu.on{animation:zPop .22s cubic-bezier(.3,1.3,.4,1);transform-origin:top}
  .hd-menu-item{transition:background .18s,color .18s,padding .2s}
  .hd-menu-item:hover{padding-inline-start:14px}

  /* messages & misc */
  .m{animation:zRise .4s cubic-bezier(.22,.9,.3,1) backwards}
  .scroll-down:not([hidden]){animation:zPop .3s cubic-bezier(.3,1.4,.4,1)}
  .toast.on{animation:toastIn .32s cubic-bezier(.3,1.3,.4,1)}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,18px) scale(.94)}}
  .dz{transition:opacity .25s,transform .25s}
}

@media (prefers-reduced-motion:reduce){
  .lg-card,.lg-step,.lg-screen,.lg-digit.err,.lg-scene .lg-orb,
  .sidebar,.hd,.cwrap,.landing-wrap>*,#vOver *,.sample-prompt-card,.media-card,.sample-voice-card,
  .sp-modal .sample-modal-card,.hd-menu.on,.m,.toast.on,.hd-coin.bump{animation:none!important}
  .lg-primary::after{display:none}
}

/* ============ per-mode frameless generation loading ============ */
.m .body>.tx:empty{display:none}
.gen-loading{display:block;margin-top:10px;direction:rtl;text-align:right;animation:genIn .35s cubic-bezier(.25,1,.4,1) both}
@keyframes genIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* chat — minimal shimmer (سبک ChatGPT) */
.gen-shimmer{display:inline-block;font-size:13.5px;font-weight:700;color:transparent;background:linear-gradient(90deg,var(--mut) 5%,var(--tx) 38%,var(--gold) 50%,var(--tx) 62%,var(--mut) 95%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;animation:gsh 2.5s linear infinite}
@keyframes gsh{from{background-position:115% 0}to{background-position:-115% 0}}
.gen-lines{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:12px;max-width:540px}
.gen-lines i{height:9px;border-radius:99px;background:color-mix(in srgb,var(--tx) 7%,transparent);position:relative;overflow:hidden}
.gen-lines i::after{content:'';position:absolute;inset:0;transform:translateX(115%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 17%,transparent),transparent);animation:gshine 1.9s ease-in-out infinite}
@keyframes gshine{55%,100%{transform:translateX(-115%)}}
.gen-lines i:nth-child(1){width:100%}
.gen-lines i:nth-child(2){width:80%}
.gen-lines i:nth-child(3){width:54%}

/* image & video — shimmering ghost frame (نمونه ۱) */
.gen-fr{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:2px 0;width:100%;direction:rtl;text-align:right}
.gframe{position:relative;align-self:flex-start;overflow:hidden;border-radius:16px;display:grid;place-items:center;background:radial-gradient(90% 90% at 50% 38%,color-mix(in srgb,var(--gold) 9%,transparent),color-mix(in srgb,var(--tx) 3%,transparent) 72%)}
.gframe svg{width:28px;height:28px;color:var(--gold);animation:gfrBreath 2.2s ease-in-out infinite}
@keyframes gfrBreath{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.95;transform:scale(1.05)}}
.gframe::after{content:'';position:absolute;inset:0;transform:translateX(115%);background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 14%,transparent) 50%,transparent 70%);animation:gshine 2.1s ease-in-out infinite}
.gframe-image{width:116px;height:116px}
.gframe-video{width:164px;height:92px}
.gnum{position:absolute;top:9px;inset-inline-end:11px;font-size:12px;font-weight:800;color:var(--mut);direction:ltr;letter-spacing:.3px}
.gframe-image .gnum{top:auto;bottom:9px}
.gvbar{position:absolute;bottom:12px;inset-inline:14px;height:3px;border-radius:99px;background:color-mix(in srgb,var(--tx) 9%,transparent);overflow:hidden}
.gvbar i{display:block;height:100%;width:42%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold));animation:gbar 1.7s ease-in-out infinite}
@keyframes gbar{from{transform:translateX(260%)}to{transform:translateX(-330%)}}
.gen-stage{font-size:12px;line-height:1.9;color:var(--mut);transition:opacity .25s;min-height:20px;text-align:right;align-self:flex-start}
.gwave{align-self:flex-start}

/* voice — live golden wave (نمونه ۱) */
.gwave{display:inline-flex;align-items:center;gap:4px;height:46px}
.gwave i{width:4.5px;height:26%;border-radius:99px;background:linear-gradient(180deg,var(--gold),var(--gold2));box-shadow:0 0 12px -3px rgba(7,210,248,.55);animation:gwv 1.25s ease-in-out infinite}
@keyframes gwv{0%,100%{height:22%;opacity:.5}50%{height:88%;opacity:1}}
.gwave i:nth-child(2){animation-delay:.09s}
.gwave i:nth-child(3){animation-delay:.18s}
.gwave i:nth-child(4){animation-delay:.27s}
.gwave i:nth-child(5){animation-delay:.36s}
.gwave i:nth-child(6){animation-delay:.45s}
.gwave i:nth-child(7){animation-delay:.54s}
.gwave i:nth-child(8){animation-delay:.63s}
.gwave i:nth-child(9){animation-delay:.72s}

@media(prefers-reduced-motion:reduce){
  .gen-loading{animation:none}
  .gen-shimmer{color:var(--tx);background:none;-webkit-background-clip:border-box;background-clip:border-box;animation:none}
  .gen-lines i::after{display:none}
  .gframe::after{display:none}
  .gframe svg{animation:none;opacity:.8}
  .gvbar i{animation:none}
  .gwave i{animation:none;height:56%;opacity:.85}
}

/* Sample loading states: keep the gallery in a real loading state until the API settles. */
.sample-loading-state{display:grid;gap:14px;min-width:0}
.sample-loading-label{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:30px;color:var(--mut);font-size:12px;font-weight:650;text-align:right}
.sample-loading-spinner{display:inline-block;width:18px;height:18px;flex:none;border:2px solid color-mix(in srgb,var(--gold) 22%,var(--line));border-top-color:var(--gold);border-radius:50%;animation:sampleSpinner .75s linear infinite}
@keyframes sampleSpinner{to{transform:rotate(360deg)}}
.sample-loading-state .img-masonry{opacity:.9}
.sample-empty-state.is-error{border-color:color-mix(in srgb,var(--rose) 35%,var(--line))}
.sample-retry,.admin-sample-retry{margin-top:8px;padding:8px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--tx);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.sample-retry:hover,.admin-sample-retry:hover{border-color:var(--gold);color:var(--gold)}
.admin-sample-loading{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:150px;padding:18px;color:var(--mut);font-size:12px;text-align:right}
@media(prefers-reduced-motion:reduce){.sample-loading-spinner{animation:none;border-top-color:var(--gold)}}


.voice-disclosure{display:block;width:100%;margin:4px 0 8px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,rgba(127,127,127,.06));color:var(--mut);font-size:12px;line-height:1.8}

/* ================================================================
   HOOSH SAZIN BRAND SYSTEM — cyan / electric blue / violet palette
   ================================================================ */
:root{
  --bg:#090f28;
  --bg2:#101a3a;
  --card:#142044;
  --line:#263765;
  --line2:#36518a;
  --tx:#f2f7ff;
  --mut:#a0b0d1;
  --gold:#07d2f8;
  --gold2:#0160ea;
  --gs:rgba(1,96,234,.15);
  --teal:#07d2f8;
  --rose:#d339fb;
  --ong:#06132c;
  --brand-cyan:#07d2f8;
  --brand-blue:#0160ea;
  --brand-indigo:#033cc1;
  --brand-violet:#9525ea;
  --brand-magenta:#d339fb;
  --brand-gradient:linear-gradient(125deg,var(--brand-cyan) 0%,var(--brand-blue) 48%,var(--brand-violet) 78%,var(--brand-magenta) 100%);
  --scroll-thumb:rgba(139,169,225,.28);
  --scroll-thumb-hover:rgba(7,210,248,.75);
}
[data-theme=light]{
  --bg:#f3f7ff;
  --bg2:#ffffff;
  --card:#ffffff;
  --line:#e0e8fb;
  --line2:#c8d7f5;
  --tx:#15234b;
  --mut:#68799e;
  --gold:#0160ea;
  --gold2:#07d2f8;
  --gs:rgba(1,96,234,.09);
  --teal:#00aebe;
  --rose:#ce3b9c;
  --ong:#ffffff;
  --scroll-thumb:rgba(79,111,170,.24);
  --scroll-thumb-hover:rgba(1,96,234,.65);
}

/* Logo lockups use the supplied Hoosh Sazin artwork everywhere. */
.sb-logo{display:grid!important;place-items:center;background:#fff!important;border:0!important;border-radius:12px!important;padding:2px!important;box-shadow:0 0 0 3px var(--gs),0 7px 18px -12px rgba(1,96,234,.35)!important;overflow:hidden!important}
.sb-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.sb-brand-t .sb-name{background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.admin-settings-mark{background:#fff!important;border-color:color-mix(in srgb,var(--brand-blue) 28%,var(--line))!important;padding:1px;overflow:hidden}
.admin-settings-mark img{width:100%;height:100%;object-fit:contain;display:block;border-radius:12px}
.lg-brand-lockup{display:flex;flex-direction:column;align-items:center;gap:3px;margin:2px auto 8px}
.lg-brand-lockup img{width:104px;height:104px;object-fit:contain;background:#fff;border:1px solid rgba(1,96,234,.12);border-radius:23px;padding:3px;box-shadow:0 14px 24px -16px rgba(1,96,234,.32)}
.lg-brand-lockup b{font-size:21px;font-weight:900;letter-spacing:-.3px;background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.lg-brand-lockup small{font-size:12px;color:var(--mut);line-height:1.8}
.admin-setup-logo{width:112px;height:112px;margin:0 auto 12px}
.admin-setup-logo img{width:100%;height:100%;object-fit:contain;background:#fff;border:1px solid rgba(1,96,234,.12);border-radius:24px;padding:4px;box-shadow:0 10px 20px -15px rgba(1,96,234,.28)}
.emblem img{width:100%;height:100%;object-fit:contain}

/* Admin navigation replaces the normal sidebar navigation while in admin mode. */
.sb-admin-view{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.sb-admin-view[hidden]{display:none!important}
.sb-admin-head{padding:13px 13px 8px;display:grid;gap:12px;flex:none}
.sb-admin-back{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:12px;color:var(--mut);background:color-mix(in srgb,var(--bg2) 80%,transparent);font:inherit;font-size:12px;font-weight:750;text-align:right;transition:.2s}
.sb-admin-back:hover{color:var(--tx);border-color:var(--gold);background:var(--gs)}
.sb-admin-back .i{width:15px;height:15px;transform:rotate(90deg)}
.sb-admin-lockup{display:flex;align-items:center;gap:10px;padding:8px 5px 12px;border-bottom:1px solid var(--line)}
.sb-admin-lockup img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:12px;padding:1px}
.sb-admin-lockup span{display:flex;flex-direction:column;line-height:1.55;min-width:0}
.sb-admin-lockup b{font-size:12px;font-weight:900;color:var(--tx)}
.sb-admin-lockup small{font-size:11px;color:var(--mut)}
.sb-admin-nav{padding-top:7px!important;overflow:auto;min-height:0}
.sb-admin-nav .sb-nav-item.on{background:linear-gradient(105deg,rgba(7,210,248,.14),rgba(149,37,234,.10));border-color:color-mix(in srgb,var(--brand-blue) 30%,var(--line))}
.sb-admin-nav .sb-nav-item.on svg{background:var(--brand-gradient);color:white;box-shadow:0 8px 18px -10px var(--brand-violet)}
.app[data-sidebar=collapsed] .sb-admin-head{padding-inline:8px;align-items:center}
.app[data-sidebar=collapsed] .sb-admin-back{width:44px;justify-content:center;padding:0}
.app[data-sidebar=collapsed] .sb-admin-back span,.app[data-sidebar=collapsed] .sb-admin-lockup span{display:none}
.app[data-sidebar=collapsed] .sb-admin-lockup{justify-content:center;border:0;padding:2px}
.app[data-sidebar=collapsed] .sb-admin-lockup img{width:34px;height:34px}

/* Full-page administrator workspace — intentionally not a dialog or overlay. */
#vAdmin.admin-workspace{display:block;flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;position:relative;padding:88px clamp(12px,2.3vw,34px) 28px;scrollbar-gutter:stable}
#vAdmin.admin-workspace[hidden]{display:none!important}
.admin-page-card{width:min(1220px,100%);max-width:1220px;max-height:none;min-height:calc(100% - 2px);margin:0 auto;padding:0;overflow:visible;border-radius:25px;border:1px solid color-mix(in srgb,var(--brand-blue) 18%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--card) 98%,var(--brand-blue) 2%),var(--card));box-shadow:0 24px 70px -42px rgba(8,35,110,.28),inset 0 1px 0 rgba(255,255,255,.055)}
.admin-page-card .admin-settings-head{padding:23px 28px 19px;background:linear-gradient(105deg,rgba(7,210,248,.07),rgba(1,96,234,.05) 55%,rgba(149,37,234,.07));border-bottom:1px solid var(--line);border-radius:25px 25px 0 0}
.admin-page-card .admin-settings-head h2{font-size:21px;letter-spacing:-.3px}
.admin-page-card .admin-settings-head p{max-width:680px}
.admin-page-card .admin-settings-content{padding:0 28px;overflow:visible;min-height:0;flex:1}
.admin-page-card .admin-settings-panel{padding:25px 0 27px;animation:adminPanelIn .25s ease both}
.admin-page-card .admin-settings-panel[hidden]{display:none!important}
@keyframes adminPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.admin-page-card .admin-settings-footer{position:sticky;bottom:0;padding:15px 28px 19px;border-top:1px solid var(--line);border-radius:0 0 25px 25px;background:color-mix(in srgb,var(--bg2) 93%,transparent);backdrop-filter:blur(16px);z-index:3}
.admin-page-card .admin-settings-footer[hidden]{display:none!important}
.admin-page-card .admin-settings-primary{background:var(--brand-gradient);border-color:transparent;color:#fff;box-shadow:0 9px 20px -12px var(--brand-violet)}
.admin-page-card .admin-settings-primary:hover{filter:saturate(1.12) brightness(1.04)}
.admin-page-card .admin-settings-secondary{border-color:var(--line2)}
.admin-page-card .admin-settings-secondary:hover{border-color:var(--brand-blue);color:var(--gold)}
.admin-page-card .admin-panel-icon{color:var(--brand-cyan);background:linear-gradient(145deg,rgba(7,210,248,.12),rgba(149,37,234,.10));border-color:color-mix(in srgb,var(--brand-blue) 25%,var(--line))}
.admin-page-card .admin-field input:focus,.admin-page-card .admin-field select:focus,.admin-page-card .admin-field textarea:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-blue) 15%,transparent)}
.admin-page-card .admin-settings-toggle input{accent-color:var(--brand-blue)}
.admin-page-card .admin-settings-error{margin:0 28px 12px}

/* User administration: searchable list, balances, top-ups and access control. */
.admin-user-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.admin-user-stats article{position:relative;display:flex;flex-direction:column;gap:5px;min-height:94px;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--bg2) 95%,var(--brand-blue) 5%),var(--bg2));overflow:hidden}
.admin-user-stats article>span{font-size:12px;color:var(--mut);font-weight:700}
.admin-user-stats article>b{font-size:24px;font-weight:900;letter-spacing:-.5px;color:var(--tx);font-variant-numeric:tabular-nums}
.admin-user-stats article>i{position:absolute;left:15px;top:15px;width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:rgba(1,96,234,.12);color:var(--brand-blue)}
.admin-user-stats article>i .i{width:17px;height:17px}
.admin-user-stats article>i.is-active{background:rgba(7,210,248,.12);color:var(--brand-cyan)}
.admin-user-stats article>i.is-inactive{background:rgba(211,57,251,.10);color:var(--brand-magenta)}
.admin-users-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(140px,190px) auto;gap:10px;align-items:center;margin:0 0 12px}
.admin-users-search{display:flex;align-items:center;gap:9px;min-width:0;height:43px;padding:0 12px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--mut)}
.admin-users-search:focus-within{border-color:var(--brand-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-blue) 12%,transparent)}
.admin-users-search .i{width:16px;height:16px;flex:none}
.admin-users-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--tx);font:inherit;font-size:12px}
.admin-users-search input::placeholder{color:var(--mut)}
.admin-users-toolbar>select{height:43px;width:100%;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--tx);padding:0 12px;font:inherit;font-size:12px}
.admin-users-status{min-height:24px;margin:3px 0 9px;color:var(--mut);font-size:12px}
.admin-users-list{display:grid;gap:10px}
.admin-users-list[aria-busy=true]{opacity:.72;pointer-events:none}
.admin-user-row{padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--card) 95%,var(--brand-blue) 5%);transition:border-color .18s,box-shadow .18s}
.admin-user-row:hover{border-color:color-mix(in srgb,var(--brand-blue) 36%,var(--line));box-shadow:0 10px 28px -24px var(--brand-blue)}
.admin-user-top{display:grid;grid-template-columns:minmax(210px,1.15fr) minmax(180px,.8fr) auto;gap:16px;align-items:center}
.admin-user-identity{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.admin-user-avatar{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--brand-gradient);color:#fff;font-size:15px;font-weight:900;box-shadow:0 7px 18px -12px var(--brand-blue)}
.admin-user-name{display:flex;flex-direction:column;min-width:0;gap:2px}
.admin-user-name b{font-size:12px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-user-name small{font-size:12px;color:var(--mut);letter-spacing:.2px}
.admin-user-status{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap}
.admin-user-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.admin-user-status.is-active{color:#0aaec2;background:rgba(7,210,248,.10)}
.admin-user-status.is-inactive{color:var(--brand-magenta);background:rgba(211,57,251,.10)}
.admin-user-admin{padding:3px 8px;border:1px solid color-mix(in srgb,var(--brand-violet) 25%,var(--line));border-radius:99px;color:var(--brand-violet);font-size:11px;font-weight:800}
.admin-user-balances{display:flex;gap:20px;align-items:center}
.admin-user-balances>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-user-balances small{font-size:11px;color:var(--mut)}
.admin-user-balances b{font-size:13px;font-weight:900;color:var(--brand-cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
.admin-user-balances .debt b{color:var(--brand-magenta)}
.admin-user-balances em{font-size:11px;font-style:normal;color:var(--mut);font-weight:600}
.admin-user-actions{display:flex;align-items:center;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.admin-user-actions button{min-height:36px;padding:0 11px;font-size:12px;white-space:nowrap}
.admin-user-actions .i{width:14px;height:14px}
.admin-user-status-btn{min-height:36px;padding:0 11px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);font:inherit;font-size:12px;font-weight:800;color:var(--tx)}
.admin-user-status-btn.is-disable{color:var(--brand-magenta);border-color:color-mix(in srgb,var(--brand-magenta) 28%,var(--line))}
.admin-user-status-btn.is-enable{color:var(--brand-cyan);border-color:color-mix(in srgb,var(--brand-cyan) 28%,var(--line))}
.admin-user-status-btn:hover{background:var(--gs)}
.admin-user-status-btn:disabled{opacity:.5;cursor:not-allowed}
.admin-user-credit-form{display:grid;grid-template-columns:minmax(130px,.55fr) minmax(180px,1fr);gap:11px;margin-top:14px;padding:14px;border:1px solid color-mix(in srgb,var(--brand-blue) 26%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--bg2) 92%,var(--brand-blue) 8%)}
.admin-user-credit-form[hidden]{display:none!important}
.admin-user-credit-form .admin-field{font-size:12px}
.admin-user-credit-form .admin-field input{height:39px;font-size:12px}
.admin-user-credit-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-user-credit-actions small{flex:1 1 100%;font-size:11px;color:var(--mut)}
.admin-user-credit-actions button{min-height:36px;padding:0 13px;font-size:12px}
.admin-users-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:145px;padding:22px;border:1px dashed var(--line2);border-radius:16px;color:var(--mut);text-align:center;font-size:12px}
.admin-users-empty b{color:var(--tx);font-size:12px}
.admin-users-empty small{font-size:12px}
.admin-users-empty.is-error{border-color:color-mix(in srgb,var(--rose) 40%,var(--line))}
.admin-users-empty button{margin-top:4px}
.admin-users-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;color:var(--mut);font-size:12px}
.admin-users-pagination[hidden]{display:none!important}
.admin-users-pagination>div{display:flex;align-items:center;gap:9px}
.admin-users-pagination button{min-height:30px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);color:var(--tx);font:inherit;font-size:12px}
.admin-users-pagination button:disabled{opacity:.35;cursor:not-allowed}
.admin-users-pagination b{font-size:12px;color:var(--tx)}

@media(max-width:900px){
  .admin-user-top{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .admin-user-balances{grid-column:1;grid-row:2;padding-inline-start:49px}
  .admin-user-actions{grid-column:2;grid-row:1/3;flex-direction:column;align-items:stretch}
}
@media(max-width:620px){
  #vAdmin.admin-workspace{padding:74px 8px 14px}
  .admin-page-card{border-radius:18px;min-height:100%}
  .admin-page-card .admin-settings-head{padding:17px 15px 14px;border-radius:18px 18px 0 0}
  .admin-page-card .admin-settings-head h2{font-size:17px}
  .admin-page-card .admin-settings-content{padding:0 15px}
  .admin-page-card .admin-settings-panel{padding:18px 0}
  .admin-page-card .admin-settings-footer{padding:12px 15px 15px;border-radius:0 0 18px 18px}
  .admin-page-card .admin-settings-footer>*{flex:1}
  .admin-user-stats{gap:7px}
  .admin-user-stats article{min-height:78px;padding:11px 10px}
  .admin-user-stats article>span{font-size:11px}
  .admin-user-stats article>b{font-size:19px}
  .admin-user-stats article>i{width:25px;height:25px;left:8px;top:8px}
  .admin-users-toolbar{grid-template-columns:1fr 1fr}
  .admin-users-search{grid-column:1/-1}
  .admin-users-toolbar>button{width:100%}
  .admin-user-top{grid-template-columns:1fr;gap:10px}
  .admin-user-balances{grid-column:auto;grid-row:auto;padding:10px 0 0;border-top:1px solid var(--line)}
  .admin-user-actions{grid-column:auto;grid-row:auto;flex-direction:row;justify-content:stretch}
  .admin-user-actions button{flex:1}
  .admin-user-credit-form{grid-template-columns:1fr}
  .admin-user-credit-actions{grid-column:auto}
  .admin-users-pagination{align-items:flex-start;flex-direction:column}
  .sb-admin-head{padding:9px 11px 5px}
  .sb-admin-lockup{padding-bottom:8px}
  .lg-brand-lockup img{width:88px;height:88px}
}

@media(prefers-reduced-motion:reduce){.admin-page-card .admin-settings-panel{animation:none}}