:root {
  --bg: #070b12;
  --panel: #0d131d;
  --panel2: #111925;
  --line: #1e2937;
  --text: #f7f9fc;
  --muted: #95a2b4;
  --brand: #4f8cff;
  --brand2: #6c63ff;
  --good: #42d392;
  --warn: #f1b84b;
  --danger: #ff6577;
  --radius: 1.25rem;
  --shadow: 0 1.25rem 4.375rem rgba(0, 0, 0, .28);
}

/* Pro kullanıcıların kişisel asistan çalışma alanı */
.user-assistant-workspace .admin-side {
  isolation: isolate;
}

.my-assistant-nav-label {
  display: block;
  margin: .5rem 1.25rem .75rem;
  color: #8c87a2;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}

#myAssistantBody {
  min-width: 0;
  padding: 0;
}

.user-assistant-workspace .admin-content:not(.assistant-editor-open) #myAssistantBody {
  padding: 0 2rem 3rem;
}

.my-assistant-plan-gate {
  margin: 0 0 1.25rem;
}

.my-assistant-notice,
.my-assistant-editor-lock {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 1rem;
  background: rgba(245, 158, 11, .08);
  color: #8a5a04;
}

.my-assistant-notice>i,
.my-assistant-editor-lock>i {
  font-size: 1.25rem;
}

.my-assistant-notice div,
.my-assistant-editor-lock div {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.my-assistant-notice span,
.my-assistant-editor-lock span {
  color: #8b6b32;
  font-size: .82rem;
}

.my-assistant-editor-lock a {
  margin-left: auto;
  padding: .7rem .9rem;
  border-radius: .75rem;
  color: #fff;
  background: #7557d6;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.my-assistants-lead {
  margin-top: 0;
}

.my-assistant-card-grid .assistant-manage-card>small {
  color: #7b6ac9;
  font-weight: 800;
  letter-spacing: .055em;
}

.my-assistant-card-grid .assistant-meta {
  flex-wrap: wrap;
}

.my-assistant-admin-empty {
  grid-column: 1 / -1;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 2rem;
  border: 1px dashed rgba(117, 87, 214, .24);
  border-radius: 1.2rem;
  color: #6e6489;
  background: rgba(117, 87, 214, .035);
  text-align: center;
}

.my-assistant-admin-empty>i {
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  place-items: center;
  border-radius: 1rem;
  color: #7557d6;
  background: rgba(117, 87, 214, .1);
  font-size: 1.25rem;
}

.my-assistant-admin-empty span {
  max-width: 30rem;
  color: #9188a7;
  font-size: .8rem;
}

.my-assistant-admin-empty .admin-create-btn {
  margin-top: .45rem;
  color: #fff;
}

.my-assistant-dashboard-metrics {
  margin-top: 1.1rem;
}

.my-assistant-dashboard-grid,
.my-assistant-settings-grid {
  margin-top: 1rem;
}

.my-assistant-dashboard-list {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}

.my-assistant-dashboard-list>a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border: 1px solid rgba(117, 87, 214, .1);
  border-radius: .8rem;
  color: inherit;
  background: rgba(117, 87, 214, .035);
}

.my-assistant-dashboard-list .assistant-card-icon {
  width: 2.65rem;
  height: 2.65rem;
}

.my-assistant-dashboard-list>a>div {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.my-assistant-dashboard-list small {
  overflow: hidden;
  color: #8c87a2;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-assistant-dashboard-list em {
  padding: .35rem .55rem;
  border-radius: 999px;
  color: #8c87a2;
  background: rgba(148, 163, 184, .1);
  font-size: .65rem;
  font-style: normal;
  font-weight: 800;
}

.my-assistant-dashboard-list em.active {
  color: #12815d;
  background: rgba(16, 185, 129, .1);
}

.my-assistant-dashboard-empty {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  color: #8c87a2;
  text-align: center;
}

.my-assistant-capacity-summary>p,
.my-assistant-limit-panel>p {
  margin: 1rem 0;
  color: #827a96;
  font-size: .78rem;
  line-height: 1.65;
}

.my-assistant-capacity-bar {
  height: .55rem;
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(117, 87, 214, .1);
}

.my-assistant-capacity-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #28bad3, #9f39dc);
}

.my-assistant-capacity-summary>a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #7557d6;
  font-size: .75rem;
  font-weight: 850;
}

.my-assistant-limit-panel form {
  display: flex;
  align-items: end;
  gap: .65rem;
  margin-top: 1rem;
}

.my-assistant-limit-panel form label {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: .35rem;
  color: #70677e;
  font-size: .68rem;
  font-weight: 800;
}

.my-assistant-limit-panel select,
.my-assistant-limit-panel button {
  height: 2.65rem;
  border: 1px solid rgba(117, 87, 214, .18);
  border-radius: .7rem;
}

.my-assistant-limit-panel select {
  padding: 0 .75rem;
  color: inherit;
  background: transparent;
}

.my-assistant-limit-panel button {
  padding: 0 1rem;
  color: #fff;
  background: linear-gradient(135deg, #2dbad3, #9c3ddd);
  font-size: .72rem;
  font-weight: 850;
}

.my-assistant-pending-request {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .85rem;
  border: 1px solid rgba(245, 158, 11, .18);
  border-radius: .8rem;
  color: #a46d09;
  background: rgba(245, 158, 11, .075);
}

.my-assistant-pending-request>i {
  font-size: 1.2rem;
}

.my-assistant-pending-request>div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: .15rem;
}

.my-assistant-pending-request small {
  color: #9c8052;
}

.my-assistant-limit-panel .my-assistant-cancel-request {
  min-width: auto;
  height: 2rem;
  flex: 0 0 auto;
  padding: 0 .7rem;
  border-color: rgba(239, 68, 68, .22);
  color: #dc4c5b;
  background: rgba(239, 68, 68, .09);
  box-shadow: none;
  font-size: .62rem;
}

.my-assistant-limit-panel .my-assistant-cancel-request:hover {
  background: rgba(239, 68, 68, .15);
}

.my-assistant-request-history .my-assistant-request-list {
  display: grid;
  gap: .45rem;
  margin-top: 1rem;
}

.my-assistant-request-history [data-request-history-item][hidden] {
  display: none;
}

.my-assistant-request-pagination {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.my-assistant-request-pagination>div {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.my-assistant-request-pagination button {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .52rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid rgba(117, 87, 214, .18);
  border-radius: .5rem;
  color: #756d86;
  background: rgba(117, 87, 214, .06);
  font-size: .58rem;
  font-weight: 800;
  cursor: pointer;
}

.my-assistant-request-pagination button.active {
  border-color: rgba(76, 174, 226, .42);
  color: #fff;
  background: linear-gradient(120deg, #2abbd2, #795ee7 58%, #a532d7);
}

.my-assistant-request-pagination button:disabled {
  opacity: .38;
  cursor: default;
}

.my-assistant-request-history article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem;
  border: 1px solid rgba(117, 87, 214, .1);
  border-radius: .7rem;
}

.my-assistant-request-history article span {
  display: grid;
  gap: .15rem;
}

.my-assistant-request-history article small {
  color: #958ca5;
}

.my-assistant-request-history em {
  padding: .3rem .5rem;
  border-radius: 999px;
  color: #8b728f;
  background: rgba(148, 163, 184, .1);
  font-size: .62rem;
  font-style: normal;
  font-weight: 850;
}

.my-assistant-request-history em.approved {
  color: #12815d;
  background: rgba(16, 185, 129, .1);
}

.my-assistant-request-history em.pending {
  color: #a46d09;
  background: rgba(245, 158, 11, .1);
}

.my-assistant-request-history em.cancelled {
  color: #9b6470;
  background: rgba(239, 68, 68, .08);
}

.user-assistant-workspace .my-assistant-settings-grid {
  gap: .8rem;
}

.user-assistant-workspace .my-assistant-settings-grid>.overview-panel {
  padding: 1rem 1.1rem;
}

.user-assistant-workspace .my-assistant-settings-grid .overview-panel-head small {
  font-size: .48rem;
}

.user-assistant-workspace .my-assistant-settings-grid .overview-panel-head h3 {
  font-size: .82rem;
  line-height: 1.2;
}

.user-assistant-workspace .my-assistant-settings-grid .overview-panel-head>span,
.user-assistant-workspace .my-assistant-settings-grid .my-assistant-request-history>div>article>b {
  font-size: .58rem;
}

.user-assistant-workspace .my-assistant-settings-grid .my-assistant-limit-panel>p {
  margin: .7rem 0;
  font-size: .68rem;
  line-height: 1.5;
}

.user-assistant-workspace .my-assistant-settings-grid .my-assistant-pending-request {
  margin-top: .7rem;
  padding: .65rem .7rem;
}

.user-assistant-workspace .my-assistant-settings-grid .my-assistant-pending-request b,
.user-assistant-workspace .my-assistant-settings-grid .my-assistant-request-history article b {
  font-size: .72rem;
}

.user-assistant-workspace .my-assistant-settings-grid .my-assistant-pending-request small,
.user-assistant-workspace .my-assistant-settings-grid .my-assistant-request-history article small {
  font-size: .62rem;
}

.user-assistant-workspace .my-assistant-settings-grid .my-assistant-request-history .my-assistant-request-list {
  margin-top: .7rem;
}

html[data-theme="dark"] .my-assistant-request-pagination button:not(.active) {
  color: #c3bacf;
  background: rgba(255, 255, 255, .045);
}

@media(max-width: 520px) {
  .my-assistant-request-pagination>button span {
    display: none;
  }
}

.my-assistant-settings-lead {
  margin-top: 1rem;
}

/* Personal assistant workspace: keep shared admin components proportional. */
.user-assistant-workspace .admin-create-btn.compact {
  min-width: 7.75rem;
  height: 2.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: 0 1rem;
  font-size: .68rem;
  line-height: 1;
  white-space: nowrap;
}

.user-assistant-workspace .assistants-lead>div {
  min-width: 0;
}

.user-assistant-workspace .my-assistant-card-grid {
  width: 100%;
  min-width: 0;
}

.user-assistant-workspace .my-assistant-card-grid:has(> .my-assistant-admin-empty) {
  grid-template-columns: minmax(0, 1fr);
}

.user-assistant-workspace .my-assistant-admin-empty {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.user-assistant-workspace .overview-panel {
  min-width: 0;
  overflow: hidden;
}

.user-assistant-workspace .overview-panel>* {
  position: relative;
  z-index: 1;
}

.user-assistant-workspace .overview-panel-head {
  min-width: 0;
}

.user-assistant-workspace .overview-panel-head>div {
  min-width: 0;
}

.user-assistant-workspace .overview-panel-head>a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .35rem .6rem;
  border-radius: .55rem;
  color: #6d50bb;
  background: rgba(112, 84, 199, .08);
  font-size: .64rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.user-assistant-workspace .my-assistant-dashboard-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
}

.user-assistant-workspace .my-assistant-limit-panel form {
  min-width: 0;
}

.user-assistant-workspace .my-assistant-limit-panel button {
  min-width: 8.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: 0 1rem;
  font-size: .76rem;
  line-height: 1;
  white-space: nowrap;
}

.assistant-owner-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: .4rem;
  margin: .15rem 0 .7rem;
  padding: .35rem .55rem;
  border-radius: .55rem;
  color: #62558e;
  background: rgba(117, 87, 214, .09);
  font-size: .7rem;
  font-weight: 750;
}

.my-assistant-empty {
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, .8fr);
}

.my-assistant-empty-flow {
  display: grid;
  gap: .8rem;
  align-content: center;
  padding: 1.25rem;
}

.my-assistant-empty-flow article {
  display: grid;
  grid-template-columns: 2rem 2.5rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .7rem;
  padding: .85rem;
  border: 1px solid rgba(117, 87, 214, .14);
  border-radius: .9rem;
  background: rgba(117, 87, 214, .055);
}

.my-assistant-empty-flow article>span {
  grid-row: 1 / 3;
  color: #9b91b8;
  font-size: .68rem;
  font-weight: 900;
}

.my-assistant-empty-flow article>i {
  grid-row: 1 / 3;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: .75rem;
  color: #7557d6;
  background: #fff;
  box-shadow: 0 7px 18px rgba(88, 70, 145, .1);
}

.my-assistant-empty-flow article>b,
.my-assistant-empty-flow article>small {
  grid-column: 3;
}

.my-assistant-empty-flow article>small {
  color: #8c87a2;
}

.assistant-icon-control label.disabled {
  opacity: .5;
  pointer-events: none;
}

html[data-theme="dark"] .my-assistant-notice,
html[data-theme="dark"] .my-assistant-editor-lock {
  color: #f9c861;
  background: rgba(245, 158, 11, .1);
}

html[data-theme="dark"] .my-assistant-notice span,
html[data-theme="dark"] .my-assistant-editor-lock span {
  color: #d8bc84;
}

html[data-theme="dark"] .assistant-owner-chip {
  color: #c9bdf5;
  background: rgba(150, 125, 232, .14);
}

html[data-theme="dark"] .my-assistant-admin-empty,
html[data-theme="dark"] .my-assistant-dashboard-list>a,
html[data-theme="dark"] .my-assistant-request-history article {
  border-color: rgba(150, 125, 232, .18);
  background: rgba(150, 125, 232, .07);
}

html[data-theme="dark"] .my-assistant-limit-panel select {
  color: #f2efff;
  background: #1b1b1f;
}

html[data-theme="dark"] .my-assistant-capacity-summary>p,
html[data-theme="dark"] .my-assistant-limit-panel>p,
html[data-theme="dark"] .my-assistant-dashboard-list small {
  color: #aaa1bb;
}

html[data-theme="dark"] .user-assistant-workspace .admin-page-title small,
html[data-theme="dark"] .user-assistant-workspace .detail-panel-head small,
html[data-theme="dark"] .user-assistant-workspace .overview-panel-head small {
  color: #ab91ff;
}

html[data-theme="dark"] .user-assistant-workspace .assistants-lead p {
  color: #9db0c7;
}

html[data-theme="dark"] .user-assistant-workspace .assistants-lead span {
  color: #9eb0c5;
  background: rgba(255, 255, 255, .055);
}

html[data-theme="dark"] .user-assistant-workspace .overview-panel-head h3,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-admin-empty b,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-dashboard-empty b,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-request-history b,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-pending-request b {
  color: #f1eef9;
}

html[data-theme="dark"] .user-assistant-workspace .overview-panel-head>a,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-capacity-summary>a {
  color: #c3b2ff;
  background: rgba(147, 112, 238, .13);
}

html[data-theme="dark"] .user-assistant-workspace .my-assistant-admin-empty span,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-dashboard-empty span,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-request-history>div>p,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-request-history small,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-pending-request small {
  color: #b7afc7;
}

html[data-theme="dark"] .user-assistant-workspace .my-assistant-card-grid .assistant-manage-card>small {
  color: #b9a5ff;
}

html[data-theme="dark"] .user-assistant-workspace .assistant-manage-card p,
html[data-theme="dark"] .user-assistant-workspace .assistant-meta,
html[data-theme="dark"] .user-assistant-workspace .assistant-meta span {
  color: #aeb7c6;
}

html[data-theme="dark"] .user-assistant-workspace .my-assistant-limit-panel form label {
  color: #c0b8ce;
}

html[data-theme="dark"] .my-assistant-empty-flow article>i {
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 1100px) {
  .user-assistant-workspace .my-assistant-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  #myAssistantBody {
    padding-right: .875rem;
    padding-left: .875rem;
  }

  .my-assistant-empty {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-assistant-editor-lock {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .my-assistant-editor-lock a {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .my-assistant-limit-panel form {
    align-items: stretch;
    flex-direction: column;
  }

  .user-assistant-workspace .my-assistant-limit-panel button {
    width: 100%;
  }
}

/* Conversation confirmation state hooks are kept compact for the UI contract tests. */
.conversation-confirm.is-danger{--confirm-tone:208,64,88}
html[data-theme="dark"] .conversation-confirm h2{color:#f8fafc}
@media(max-width:520px){.conversation-confirm-main{grid-template-columns:2.625rem minmax(0,1fr)}}

/* Ana site ölçüleri rem tabanlıdır; bu değer gerçek yerleşimi %110 büyütür. */
html {
  font-size: 110%;
}

/* Chatbot self-service workspace */
.chatbot-model-price select {
  width: 100%;
  padding: 0.75rem 0.8125rem;
  border: 1px solid #dfe1e7;
  border-radius: 0.625rem;
  background: #fff;
  color: #242837
}

.chatbot-model-card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.625rem 0;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.5625rem;
  background: #f3eefb;
  color: #6f52b1;
  font-size: 0.5625rem
}

.chatbot-model-card-price span {
  display: flex;
  align-items: center;
  gap: 0.3125rem
}

.chatbot-model-card-price b {
  font-size: 0.5625rem
}

.chatbot-model-enabled {
  margin-top: 0.625rem !important
}

html[data-theme="dark"] .chatbot-model-price select {
  background: #171920;
  border-color: #333641;
  color: #f2f3f6
}

html[data-theme="dark"] .chatbot-model-card-price {
  background: #272137;
  color: #c4afea
}

.chatbot-workspace {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17rem 1fr;
  background: #f7f8fb;
  color: #1c2030
}

.chatbot-workspace-side {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.75rem 1.125rem 1.375rem;
  display: flex;
  flex-direction: column;
  background: #10131a;
  color: #e9ecf4;
  border-right: 1px solid rgba(255, 255, 255, .07)
}

.chatbot-workspace-brand {
  display: block;
  padding: 0 0.75rem 1.875rem
}

.chatbot-workspace-brand img {
  display: block;
  width: 10.3125rem;
  max-height: 2.5rem;
  object-fit: contain;
  object-position: left center
}

.chatbot-workspace-label {
  padding: 0 0.8125rem 0.625rem;
  color: #777f90;
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: .16em
}

.chatbot-workspace-side nav {
  display: grid;
  gap: 0.4375rem
}

.chatbot-workspace-side nav a {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  padding: 0.8125rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: #aab1c0;
  font-size: 0.8125rem;
  font-weight: 720;
  transition: .16s ease
}

.chatbot-workspace-side nav a i {
  width: 1.125rem;
  text-align: center;
  color: #7c8495
}

.chatbot-workspace-side nav a:hover {
  background: #171b24;
  color: #fff
}

.chatbot-workspace-side nav a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(112, 84, 199, .25), rgba(112, 84, 199, .08));
  border-color: rgba(138, 111, 221, .28)
}

.chatbot-workspace-side nav a.active i {
  color: #a990f3
}

.chatbot-side-usage {
  margin-top: auto;
  padding: 0.9375rem;
  border: 1px solid #292d38;
  border-radius: 0.875rem;
  background: #171a22
}

.chatbot-side-usage>div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem
}

.chatbot-side-usage b {
  color: #c5b5f5
}

.chatbot-side-usage>div:nth-child(2) {
  height: 0.3125rem;
  margin: 0.6875rem 0 0.5rem;
  overflow: hidden;
  border-radius: 6.1875rem;
  background: #292d38
}

.chatbot-side-usage>div:nth-child(2) i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7455ce, #b13cc4)
}

.chatbot-side-usage small {
  color: #838b9c;
  font-size: 0.625rem
}

.chatbot-back-chat {
  display: flex;
  gap: 0.5625rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.6875rem 0.875rem;
  color: #989faf;
  font-size: 0.75rem;
  font-weight: 700
}

.chatbot-back-chat:hover {
  color: #fff
}

.chatbot-workspace-main {
  min-width: 0
}

.chatbot-workspace-main>header {
  height: 5.125rem;
  padding: 0 clamp(1.5rem, 4vw, 3.625rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e7ee;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(18px)
}

.chatbot-workspace-main>header small {
  display: block;
  margin-bottom: 0.3125rem;
  color: #7a5ac3;
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: .16em
}

.chatbot-workspace-main>header h1 {
  margin: 0;
  font-size: 1.3125rem;
  letter-spacing: -.035em
}

.chatbot-workspace-main>header .theme-toggle {
  border: 1px solid #e0e3ea;
  background: #fff;
  color: #5c6170
}

.chatbot-workspace-content {
  width: min(77.5rem, 100%);
  margin: auto;
  padding: 2.25rem clamp(1.5rem, 4vw, 3.625rem) 4.375rem
}

.chatbot-dashboard-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.875rem;
  padding: 2.1875rem 2.375rem;
  overflow: hidden;
  border: 1px solid #27213b;
  border-radius: 1.3125rem;
  background: radial-gradient(circle at 83% 15%, rgba(150, 67, 179, .28), transparent 22rem), linear-gradient(120deg, #191527, #28203b);
  color: #fff;
  box-shadow: 0 20px 55px rgba(38, 28, 62, .13)
}

.chatbot-dashboard-hero:after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -4.375rem;
  width: 11.25rem;
  height: 11.25rem;
  border: 35px solid rgba(255, 255, 255, .03);
  border-radius: 50%
}

.chatbot-dashboard-hero>div,
.chatbot-dashboard-hero>a {
  position: relative;
  z-index: 1
}

.chatbot-dashboard-hero span,
.chatbot-section-lead small,
.chatbot-panel-head small {
  color: #9e83ec;
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: .15em
}

.chatbot-dashboard-hero h2 {
  max-width: 40.625rem;
  margin: 0.625rem 0 0.5rem;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.045em
}

.chatbot-dashboard-hero p {
  max-width: 38.75rem;
  margin: 0;
  color: #aaa4b8;
  line-height: 1.55
}

.chatbot-dashboard-hero>a,
.primary-link,
.chatbot-empty-v2>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  white-space: nowrap;
  padding: 0.8125rem 1.0625rem;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, #7655d1, #a53eb7);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(112, 84, 199, .28)
}

.chatbot-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin: 1.125rem 0
}

.chatbot-stat-grid article {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.1875rem;
  border: 1px solid #e1e4eb;
  border-radius: 1rem;
  background: #fff
}

.chatbot-stat-grid article>span {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 0.8125rem;
  background: #f0ebfb;
  color: #7855c9
}

.chatbot-stat-grid div>* {
  display: block
}

.chatbot-stat-grid small {
  color: #8a8f9d;
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: .1em
}

.chatbot-stat-grid b {
  margin: 0.25rem 0 2px;
  font-size: 1.5625rem;
  line-height: 1
}

.chatbot-stat-grid em {
  color: #8d92a0;
  font-size: 0.625rem;
  font-style: normal
}

.chatbot-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18.75rem, .8fr);
  gap: 1rem
}

.chatbot-usage-chart,
.chatbot-recent,
.chatbot-form-panel,
.chatbot-training-panel,
.chatbot-script-card,
.chatbot-preview-card,
.chatbot-settings-list {
  border: 1px solid #e1e4eb;
  border-radius: 1.0625rem;
  background: #fff
}

.chatbot-usage-chart,
.chatbot-recent {
  min-height: 18.125rem;
  padding: 1.375rem
}

.chatbot-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9375rem
}

.chatbot-panel-head h3 {
  margin: 0.25rem 0 0;
  font-size: 1.125rem;
  letter-spacing: -.025em
}

.chatbot-panel-head>p,
.chatbot-panel-head p {
  color: #818796
}

.chatbot-panel-head>a {
  color: #7655c9;
  font-size: 0.6875rem;
  font-weight: 800
}

.chatbot-bars {
  height: 11.875rem;
  display: flex;
  align-items: flex-end;
  gap: 0.3125rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid #eceef3;
  background: repeating-linear-gradient(to bottom, #fff 0, #fff 46px, #f0f1f5 47px)
}

.chatbot-bars i {
  width: 100%;
  min-height: 0.25rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background: #d7cfee
}

.chatbot-bars i.recent {
  background: linear-gradient(#9e70d2, #7356c8)
}

.chatbot-recent>a {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid #eef0f4
}

.chatbot-recent>a:last-child {
  border: 0
}

.chatbot-recent>a>span,
.chatbot-symbol {
  width: 2.4375rem;
  height: 2.4375rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--chatbot-color), white 85%);
  color: var(--chatbot-color)
}

.chatbot-recent>a div {
  min-width: 0;
  flex: 1
}

.chatbot-recent>a b,
.chatbot-recent>a small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.chatbot-recent>a b {
  font-size: 0.75rem
}

.chatbot-recent>a small {
  margin-top: 0.25rem;
  color: #9196a3;
  font-size: 0.5625rem
}

.chatbot-recent>a em {
  padding: 0.3125rem 0.4375rem;
  border-radius: 6.1875rem;
  background: #f1f2f5;
  color: #8c909a;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 850
}

.chatbot-recent>a em.active {
  background: #e5f8ed;
  color: #238450
}

.chatbot-section-lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5625rem;
  margin-bottom: 1.5rem
}

.chatbot-section-lead>div>a {
  display: inline-block;
  margin-bottom: 1.0625rem;
  color: #707684;
  font-size: 0.6875rem;
  font-weight: 750
}

.chatbot-section-lead h2 {
  margin: 0.4375rem 0 0.3125rem;
  font-size: 1.875rem;
  letter-spacing: -.045em
}

.chatbot-section-lead p {
  margin: 0;
  color: #7f8593;
  line-height: 1.5
}

.chatbot-section-lead>select {
  min-width: 15rem;
  padding: 0.75rem;
  border: 1px solid #dadee6;
  border-radius: 0.6875rem;
  background: #fff;
  color: #222737
}

.chatbot-assistant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem
}

.chatbot-assistant-grid>article {
  padding: 1.3125rem;
  border: 1px solid #e1e4eb;
  border-radius: 1.0625rem;
  background: #fff
}

.chatbot-assistant-grid .chatbot-card-top {
  display: flex;
  justify-content: space-between
}

.chatbot-assistant-grid article>small {
  display: block;
  margin-top: 1.125rem;
  color: #7959bd;
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: .1em
}

.chatbot-assistant-grid h3 {
  margin: 0.375rem 0;
  font-size: 1.1875rem
}

.chatbot-assistant-grid p {
  height: 2.625rem;
  margin: 0;
  color: #7d8390;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow: hidden
}

.chatbot-knowledge-counts {
  display: flex;
  gap: 0.4375rem;
  margin: 1.125rem 0
}

.chatbot-knowledge-counts span {
  padding: 0.375rem 0.5rem;
  border-radius: 0.4375rem;
  background: #f4f2f8;
  color: #747985;
  font-size: 0.5625rem
}

.chatbot-knowledge-counts i {
  margin-right: 0.3125rem;
  color: #8061c5
}

.chatbot-assistant-grid article>a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid #ded8ec;
  border-radius: 0.5625rem;
  color: #704eba;
  font-size: 0.6875rem;
  font-weight: 780
}

.chatbot-empty-v2 {
  grid-column: 1/-1;
  padding: 4.6875rem 1.5625rem;
  text-align: center;
  border: 1px dashed #d7dbe4;
  border-radius: 1.125rem;
  background: #fff
}

.chatbot-empty-v2>span {
  width: 4.125rem;
  height: 4.125rem;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 1.3125rem;
  background: #f0ebfa;
  color: #7855c9;
  font-size: 1.5rem
}

.chatbot-empty-v2 h2 {
  margin: 1.125rem 0 0.4375rem
}

.chatbot-empty-v2 p {
  margin: 0 0 1.25rem;
  color: #858a97
}

.chatbot-empty-v2>a {
  padding: 0.6875rem 0.9375rem
}

.chatbot-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5625rem;
  border-radius: 6.1875rem;
  background: #f1f2f5;
  color: #858a95;
  font-size: 0.5625rem;
  font-weight: 850
}

.chatbot-status i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #a2a6af
}

.chatbot-status.active {
  background: #e7f8ee;
  color: #237a49
}

.chatbot-status.active i {
  background: #2eb86d;
  box-shadow: 0 0 0 3px rgba(46, 184, 109, .13)
}

.chatbot-editor-v2 {
  max-width: 60rem
}

.chatbot-form-panel,
.chatbot-training-panel {
  padding: 1.5625rem
}

.chatbot-form-panel>h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.4375rem;
  font-size: 1.0625rem
}

.chatbot-form-panel>h3 span {
  width: 1.6875rem;
  height: 1.6875rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: #ede8f8;
  color: #7757c0;
  font-size: 0.6875rem
}

.chatbot-fields-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.chatbot-fields-v2 label,
.chatbot-form-panel>label,
.chatbot-field-pair label {
  display: grid;
  gap: 0.4375rem;
  color: #4d5260;
  font-size: 0.6875rem;
  font-weight: 750
}

.chatbot-fields-v2 label.wide {
  grid-column: 1/-1
}

.chatbot-fields-v2 label>span {
  color: #9a9eaa;
  font-weight: 500
}

.chatbot-fields-v2 input,
.chatbot-fields-v2 select,
.chatbot-fields-v2 textarea,
.chatbot-form-panel>label textarea,
.chatbot-field-pair select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dfe2e9;
  border-radius: 0.625rem;
  background: #fbfcfd;
  color: #242837;
  outline: none;
  resize: vertical
}

.chatbot-fields-v2 input:focus,
.chatbot-fields-v2 select:focus,
.chatbot-fields-v2 textarea:focus,
.chatbot-form-panel textarea:focus {
  border-color: #8262c9;
  box-shadow: 0 0 0 3px rgba(130, 98, 201, .1)
}

.chatbot-fields-v2 input[type=color] {
  height: 2.6875rem;
  padding: 0.3125rem
}

.chatbot-fields-v2 small {
  color: #9196a2;
  font-size: 0.5625rem
}

.chatbot-form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.375rem;
  padding-top: 1.125rem;
  border-top: 1px solid #eceef2;
  color: #898e9b;
  font-size: 0.625rem
}

.chatbot-form-submit button,
.chatbot-form-panel>button.primary {
  padding: 0.6875rem 0.9375rem;
  border: 0;
  border-radius: 0.5625rem;
  background: #7655c9;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 780
}

.chatbot-locked-training {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1rem;
  padding: 1.375rem;
  border: 1px dashed #d8dbe3;
  border-radius: 1rem;
  color: #8d929f
}

.chatbot-locked-training>i {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: #eceef2
}

.chatbot-locked-training b,
.chatbot-locked-training span {
  display: block
}

.chatbot-locked-training b {
  color: #4b505e
}

.chatbot-locked-training span {
  margin-top: 0.25rem;
  font-size: 0.6875rem
}

.chatbot-training-panel {
  margin-top: 1rem
}

.chatbot-training-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8125rem;
  margin: 1.25rem 0
}

.chatbot-training-actions form {
  display: grid;
  gap: 0.5rem
}

.chatbot-training-actions label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px dashed #d7d9e2;
  border-radius: 0.75rem;
  background: #fafafd
}

.chatbot-training-actions label>i {
  font-size: 1.25rem;
  color: #7e5ec7
}

.chatbot-training-actions label span {
  min-width: 0;
  flex: 1
}

.chatbot-training-actions label b,
.chatbot-training-actions label small {
  display: block
}

.chatbot-training-actions label b {
  font-size: 0.6875rem
}

.chatbot-training-actions label small {
  margin-top: 0.25rem;
  color: #9397a3;
  font-size: 0.5625rem
}

.chatbot-training-actions input {
  max-width: 11.875rem;
  font-size: 0.5625rem
}

.chatbot-training-actions form button {
  padding: 0.5625rem;
  border: 1px solid #ddd7eb;
  border-radius: 0.5rem;
  background: #f6f3fb;
  color: #6c4eb3;
  font-size: 0.625rem;
  font-weight: 800
}

.chatbot-training-actions #chatbotUrl {
  max-width: none;
  padding: 0.5rem;
  border: 1px solid #e1e3e9;
  border-radius: 0.4375rem
}

.chatbot-sources {
  display: grid;
  gap: 0.5rem
}

.chatbot-source-row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.6875rem;
  border: 1px solid #e7e9ee;
  border-radius: 0.625rem
}

.chatbot-source-row .source-kind {
  width: 2.1875rem;
  height: 2.1875rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 0.5625rem
}

.chatbot-source-row .source-kind.pdf {
  background: #fff0f1;
  color: #d64d59
}

.chatbot-source-row .source-kind.url {
  background: #edf5ff;
  color: #3a78bc
}

.chatbot-source-row>div {
  min-width: 0;
  flex: 1
}

.chatbot-source-row b,
.chatbot-source-row small,
.chatbot-source-row em {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.chatbot-source-row b {
  font-size: 0.6875rem
}

.chatbot-source-row small {
  margin-top: 0.1875rem;
  color: #969aa5;
  font-size: 0.5625rem
}

.chatbot-source-row em {
  margin-top: 0.1875rem;
  color: #bf4653;
  font-size: 0.5rem
}

.source-state {
  font-size: 0.5rem;
  font-weight: 850;
  text-transform: uppercase
}

.source-state.indexed {
  color: #25814f
}

.source-state.failed {
  color: #c74855
}

.chatbot-source-row>button {
  width: 1.9375rem;
  height: 1.9375rem;
  border: 0;
  border-radius: 0.5rem;
  background: #f4f2f5;
  color: #9b5360
}

.chatbot-source-empty {
  display: grid;
  place-items: center;
  gap: 0.375rem;
  padding: 1.875rem;
  color: #9196a3;
  text-align: center
}

.chatbot-source-empty i {
  font-size: 1.3125rem
}

.chatbot-source-empty b {
  color: #555b68;
  font-size: 0.75rem
}

.chatbot-source-empty span {
  font-size: 0.625rem
}

.chatbot-integration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20.625rem, .8fr);
  gap: 1.125rem
}

.chatbot-integration-grid>section:first-child {
  display: grid;
  gap: 1rem
}

.chatbot-form-panel>label {
  margin: 1.25rem 0
}

.chatbot-form-panel>label small {
  color: #9398a4;
  font-weight: 500
}

.chatbot-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.0625rem
}

.chatbot-script-card {
  padding: 1.3125rem
}

.chatbot-script-card>div {
  display: flex;
  align-items: center;
  gap: 0.6875rem
}

.chatbot-script-card>div>span {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: #eee9f8;
  color: #7655c9
}

.chatbot-script-card small {
  color: #7859bf;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .12em
}

.chatbot-script-card h3 {
  margin: 0.1875rem 0;
  font-size: 0.875rem
}

.chatbot-script-card code {
  display: block;
  margin: 0.9375rem 0;
  padding: 0.875rem;
  border-radius: 0.625rem;
  background: #171923;
  color: #d8c9ff;
  font: 0.625rem/1.65 ui-monospace, monospace;
  overflow: auto
}

.chatbot-script-card button {
  padding: 0.5625rem 0.75rem;
  border: 1px solid #dad3e9;
  border-radius: 0.5rem;
  background: #f7f4fb;
  color: #6e4eba;
  font-size: 0.625rem;
  font-weight: 800
}

.chatbot-preview-card {
  align-self: start;
  position: sticky;
  top: 6.5625rem;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(35, 30, 53, .1)
}

.chatbot-preview-head {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 1.0625rem;
  background: var(--chatbot-color);
  color: #fff
}

.chatbot-preview-head>span {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, .18)
}

.chatbot-preview-head b,
.chatbot-preview-head small {
  display: block
}

.chatbot-preview-head b {
  font-size: 0.8125rem
}

.chatbot-preview-head small {
  margin-top: 0.1875rem;
  opacity: .75;
  font-size: 0.5625rem
}

.chatbot-preview-messages {
  height: 24.375rem;
  padding: 1rem;
  overflow: auto;
  background: #f6f6fa
}

.chatbot-preview-messages p {
  width: fit-content;
  max-width: 85%;
  margin: 0 0 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.8125rem;
  background: #fff;
  border: 1px solid #e5e5eb;
  font-size: 0.6875rem;
  line-height: 1.45
}

.chatbot-preview-messages p.user {
  margin-left: auto;
  background: #7655c9;
  color: #fff;
  border-color: #7655c9
}

.chatbot-preview-messages p.error {
  color: #ae3340;
  background: #fff0f1
}

.chatbot-preview-card>form {
  display: flex;
  gap: 0.4375rem;
  padding: 0.75rem;
  border-top: 1px solid #e6e7ec
}

.chatbot-preview-card>form input {
  min-width: 0;
  flex: 1;
  padding: 0.6875rem;
  border: 1px solid #dfe1e7;
  border-radius: 0.625rem
}

.chatbot-preview-card>form button {
  width: 2.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: #7655c9;
  color: #fff
}

.chatbot-preview-note {
  display: block;
  padding: 0 0.8125rem 0.8125rem;
  color: #8e93a0;
  font-size: 0.5rem
}

.chatbot-settings-list {
  padding: 0.5rem
}

.chatbot-settings-list article {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  padding: 0.875rem;
  border-bottom: 1px solid #eceef2
}

.chatbot-settings-list article:last-child {
  border: 0
}

.chatbot-settings-list article>div {
  min-width: 0;
  flex: 1
}

.chatbot-settings-list article>div b,
.chatbot-settings-list article>div small {
  display: block
}

.chatbot-settings-list article>div small {
  margin-top: 0.25rem;
  color: #9297a4;
  font-size: 0.5625rem
}

.chatbot-settings-list article>button {
  padding: 0.5625rem 0.6875rem;
  border: 1px solid #e0dbe9;
  border-radius: 0.5rem;
  background: #f8f6fb;
  color: #6f52b1;
  font-size: 0.5625rem;
  font-weight: 750
}

.chatbot-settings-list article>button.danger {
  width: 2.125rem;
  color: #bd4c58;
  background: #fff3f4;
  border-color: #f3d7da
}

.chatbot-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.5625rem
}

.chatbot-switch input {
  display: none
}

.chatbot-switch i {
  position: relative;
  width: 2.1875rem;
  height: 1.25rem;
  border-radius: 6.1875rem;
  background: #d5d8df
}

.chatbot-switch i:after {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: .16s
}

.chatbot-switch input:checked+i {
  background: #7655c9
}

.chatbot-switch input:checked+i:after {
  left: 1.125rem
}

.chatbot-page-error {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid #f0d0d4;
  border-radius: 0.8125rem;
  background: #fff2f3;
  color: #b24350
}

html[data-theme="dark"] .chatbot-workspace {
  background: #14161c;
  color: #f1f2f6
}

html[data-theme="dark"] .chatbot-workspace-main>header {
  background: rgba(20, 22, 28, .86);
  border-color: #292c34
}

html[data-theme="dark"] .chatbot-workspace-main>header .theme-toggle,
html[data-theme="dark"] .chatbot-section-lead>select {
  background: #1d2028;
  border-color: #30343e;
  color: #eef0f5
}

html[data-theme="dark"] .chatbot-stat-grid article,
html[data-theme="dark"] .chatbot-usage-chart,
html[data-theme="dark"] .chatbot-recent,
html[data-theme="dark"] .chatbot-form-panel,
html[data-theme="dark"] .chatbot-training-panel,
html[data-theme="dark"] .chatbot-script-card,
html[data-theme="dark"] .chatbot-preview-card,
html[data-theme="dark"] .chatbot-settings-list,
html[data-theme="dark"] .chatbot-assistant-grid>article,
html[data-theme="dark"] .chatbot-empty-v2 {
  background: #1c1f27;
  border-color: #30343d
}

html[data-theme="dark"] .chatbot-fields-v2 input,
html[data-theme="dark"] .chatbot-fields-v2 select,
html[data-theme="dark"] .chatbot-fields-v2 textarea,
html[data-theme="dark"] .chatbot-form-panel>label textarea,
html[data-theme="dark"] .chatbot-field-pair select {
  background: #171920;
  border-color: #333641;
  color: #f2f3f6
}

html[data-theme="dark"] .chatbot-bars {
  border-color: #333641;
  background: repeating-linear-gradient(to bottom, #1c1f27 0, #1c1f27 46px, #2c2f38 47px)
}

html[data-theme="dark"] .chatbot-training-actions label,
html[data-theme="dark"] .chatbot-source-row {
  background: #191b22;
  border-color: #343741
}

html[data-theme="dark"] .chatbot-preview-messages {
  background: #15171d
}

html[data-theme="dark"] .chatbot-preview-messages p {
  background: #20232b;
  border-color: #333641
}

html[data-theme="dark"] .chatbot-section-lead p,
html[data-theme="dark"] .chatbot-dashboard-hero p {
  color: #9da3b1
}

@media(max-width:1100px) {
  .chatbot-workspace {
    grid-template-columns: 13.75rem 1fr
  }

  .chatbot-stat-grid {
    grid-template-columns: 1fr 1fr
  }

  .chatbot-assistant-grid {
    grid-template-columns: 1fr 1fr
  }

  .chatbot-dashboard-grid,
  .chatbot-integration-grid {
    grid-template-columns: 1fr
  }

  .chatbot-preview-card {
    position: static
  }

  .chatbot-preview-messages {
    height: 20.625rem
  }
}

@media(max-width:760px) {
  .chatbot-workspace {
    display: block
  }

  .chatbot-workspace-side {
    position: static;
    width: 100%;
    height: auto;
    padding: 1rem
  }

  .chatbot-workspace-brand {
    padding: 0 0.25rem 0.9375rem
  }

  .chatbot-workspace-label,
  .chatbot-side-usage,
  .chatbot-back-chat {
    display: none
  }

  .chatbot-workspace-side nav {
    display: flex;
    overflow: auto
  }

  .chatbot-workspace-side nav a {
    white-space: nowrap;
    padding: 0.625rem
  }

  .chatbot-workspace-side nav a span {
    font-size: 0.625rem
  }

  .chatbot-workspace-main>header {
    height: 4.375rem;
    padding: 0 1.125rem
  }

  .chatbot-workspace-content {
    padding: 1.375rem 1rem 3.125rem
  }

  .chatbot-dashboard-hero,
  .chatbot-section-lead {
    align-items: flex-start;
    flex-direction: column
  }

  .chatbot-dashboard-hero {
    padding: 1.625rem
  }

  .chatbot-stat-grid,
  .chatbot-assistant-grid,
  .chatbot-fields-v2,
  .chatbot-training-actions,
  .chatbot-field-pair {
    grid-template-columns: 1fr
  }

  .chatbot-fields-v2 label.wide {
    grid-column: auto
  }

  .chatbot-settings-list article {
    flex-wrap: wrap
  }

  .chatbot-settings-list article>div {
    width: calc(100% - 3.75rem);
    flex: none
  }
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text)
}

body {
  background:
    radial-gradient(circle at 15% 0%, rgba(79, 140, 255, .13), transparent 28rem),
    radial-gradient(circle at 100% 15%, rgba(108, 99, 255, .09), transparent 30rem), var(--bg)
}

button,
input,
textarea,
select {
  font: inherit
}

button {
  cursor: pointer
}

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

.hidden {
  display: none !important
}

.shell {
  max-width: 73.75rem;
  margin: auto;
  padding: 0 1.5rem
}

.nav {
  height: 5.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  letter-spacing: -.03em
}

.logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: grid;
  place-items: center;
  box-shadow: 0 0 34px rgba(79, 140, 255, .28)
}

.navlinks,
.nav-actions,
.inline {
  display: flex;
  align-items: center;
  gap: 0.625rem
}

.navlinks a {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0.5rem
}

.btn {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: 0.6875rem 1rem;
  border-radius: 0.75rem;
  font-weight: 650
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #334155
}

.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent
}

.btn.ghost {
  background: transparent
}

.btn.danger {
  color: #ffd9de;
  border-color: #4a2430;
  background: #241117
}

.btn.sm {
  padding: 0.5rem 0.6875rem;
  font-size: 0.8125rem
}

.hero {
  padding: 5.875rem 0 4.75rem;
  text-align: center
}

.eyebrow {
  display: inline-flex;
  border: 1px solid #26364a;
  background: #0c1420;
  color: #a9c7ff;
  border-radius: 6.1875rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: .06em
}

.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.125rem);
  line-height: 1.02;
  letter-spacing: -.06em;
  margin: 1.375rem auto 1.125rem;
  max-width: 62.5rem
}

.gradient {
  background: linear-gradient(90deg, #fff, #8db7ff 60%, #b3adff);
  -webkit-background-clip: text;
  color: transparent
}

.hero p {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 45rem;
  margin: 0 auto 1.875rem
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap
}

.mock {
  margin: 3rem auto 0;
  max-width: 62.5rem;
  border: 1px solid #202c3b;
  background: rgba(10, 15, 23, .75);
  backdrop-filter: blur(16px);
  border-radius: 1.625rem;
  padding: 0.875rem;
  box-shadow: var(--shadow)
}

.mock-window {
  height: 28.75rem;
  display: grid;
  grid-template-columns: 15.3125rem 1fr;
  border: 1px solid #202a38;
  border-radius: 1.0625rem;
  overflow: hidden;
  background: #0b111a
}

.mock-side {
  padding: 1rem;
  background: #0a0f17;
  border-right: 1px solid #202a38
}

.mock-chat {
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.mock-orb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 70px rgba(79, 140, 255, .32);
  display: grid;
  place-items: center;
  font-size: 1.75rem
}

.mock-row {
  height: 2.25rem;
  background: #121b28;
  border-radius: 0.625rem;
  margin: 0.625rem 0
}

.features {
  padding: 4.375rem 0
}

.section-head {
  text-align: center;
  max-width: 43.75rem;
  margin: 0 auto 2.125rem
}

.section-head h2 {
  font-size: 2.375rem;
  letter-spacing: -.045em;
  margin: 0.75rem 0
}

.section-head p {
  color: var(--muted);
  line-height: 1.6
}

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

.card {
  background: linear-gradient(180deg, rgba(17, 25, 37, .93), rgba(12, 18, 27, .93));
  border: 1px solid var(--line);
  border-radius: 1.125rem;
  padding: 1.375rem
}

.card h3 {
  margin: 0.75rem 0 0.5rem
}

.card p {
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.875rem
}

.icon {
  width: 2.625rem;
  height: 2.625rem;
  border: 1px solid #2b3a4d;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: #101a28
}

.footer {
  margin-top: 4.375rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 1.75rem 0 2.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between
}

.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr
}

.auth-art {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  background: radial-gradient(circle at 20% 20%, rgba(79, 140, 255, .18), transparent 40rem)
}

.auth-art h1 {
  font-size: 3.375rem;
  letter-spacing: -.055em;
  max-width: 37.5rem;
  margin: 0
}

.auth-art p {
  color: var(--muted);
  max-width: 36.25rem;
  line-height: 1.7
}

.auth-pane {
  display: grid;
  place-items: center;
  padding: 1.875rem
}

.form-card {
  width: min(27.5rem, 100%);
  padding: 1.875rem;
  border: 1px solid var(--line);
  background: rgba(13, 19, 29, .82);
  border-radius: 1.375rem;
  box-shadow: var(--shadow)
}

.form-card h2 {
  font-size: 1.75rem;
  letter-spacing: -.04em;
  margin: 0 0 0.4375rem
}

.form-card>p {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 1.5rem
}

.field {
  margin: 0.875rem 0
}

.field label {
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.4375rem;
  color: #c9d2df
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: #090f17;
  border: 1px solid #243144;
  color: var(--text);
  border-radius: 0.75rem;
  padding: 0.75rem 0.8125rem;
  outline: none
}

.field textarea {
  min-height: 6.25rem;
  resize: vertical
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, .09)
}

.form-card .btn {
  width: 100%;
  margin-top: 0.5rem
}

.minor {
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 1.125rem
}

.minor a {
  color: #a9c7ff
}

.app-layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 17.625rem 1fr;
  background: #080d14
}

.sidebar {
  background: #090e15;
  border-right: 1px solid var(--line);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  min-width: 0
}

.sidebar .brand {
  padding: 0.625rem 0.5rem 1.125rem
}

.newchat {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem
}

.side-title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #67758a;
  margin: 1.3125rem 0.5625rem 0.5rem
}

.conv-list {
  overflow: auto;
  flex: 1
}

.conv {
  padding: 0.6875rem 0.625rem;
  border-radius: 0.625rem;
  color: #bbc5d2;
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.1875rem
}

.conv:hover,
.conv.active {
  background: #121b28;
  color: white
}

.userbox {
  border-top: 1px solid var(--line);
  padding: 0.8125rem 0.3125rem 2px;
  position: relative
}

.userline {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.75rem
}

.avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: #192333;
  display: grid;
  place-items: center;
  font-weight: 800
}

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

.userinfo b,
.userinfo small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.userinfo small {
  color: var(--muted);
  margin-top: 0.1875rem
}

.usermenu {
  position: absolute;
  left: 0.3125rem;
  right: 0.3125rem;
  bottom: 4.125rem;
  border: 1px solid var(--line);
  background: #111925;
  padding: 0.4375rem;
  border-radius: 0.8125rem;
  box-shadow: var(--shadow)
}

.usermenu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: #d8e0ea;
  padding: 0.625rem;
  border-radius: 0.5rem
}

.usermenu button:hover {
  background: #1a2636
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.chat-top {
  height: 4.125rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: rgba(8, 13, 20, .86);
  backdrop-filter: blur(16px)
}

.assistant-picker {
  display: flex;
  align-items: center;
  gap: 0.625rem
}

.assistant-dot {
  width: 2.0625rem;
  height: 2.0625rem;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: grid;
  place-items: center
}

.chat-area {
  flex: 1;
  overflow: auto;
  padding: 2.125rem 1.125rem 9.375rem
}

.messages {
  max-width: 51.25rem;
  margin: auto
}

.welcome {
  text-align: center;
  padding: 9vh 0.625rem
}

.welcome .mock-orb {
  margin: auto
}

.welcome h2 {
  font-size: 2rem;
  letter-spacing: -.04em;
  margin: 1.125rem 0 0.5rem
}

.welcome p {
  color: var(--muted)
}

.msg {
  display: flex;
  gap: 0.8125rem;
  margin: 1.5rem 0
}

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

.bubble {
  max-width: 78%;
  padding: 0.8125rem 1rem;
  border-radius: 1.125rem;
  background: #121b28;
  line-height: 1.58;
  font-size: 0.875rem
}

.msg.me .bubble {
  background: #203353
}

.msg .avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto
}

.bubble p {
  margin: 0 0 0.625rem
}

.bubble p:last-child {
  margin-bottom: 0
}

.bubble ul,
.bubble ol {
  margin: 0.5rem 0 0.25rem;
  padding-left: 1.5rem
}

.bubble li {
  margin: 0.4375rem 0;
  padding-left: 0.1875rem
}

.bubble li::marker {
  font-weight: 800;
  color: #8b72e8
}

.bubble h4 {
  margin: 2px 0 0.5625rem;
  font-size: 1em
}

.bubble strong {
  font-weight: 800;
  color: inherit
}

.bubble code {
  padding: 1px 0.3125rem;
  border-radius: 0.3125rem;
  background: rgba(127, 127, 127, .14);
  font: inherit
}

.workspace-messages .msg:not(.me) .avatar {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  opacity: .78
}

.assistant-typing-message {
  align-items: center
}

.assistant-typing {
  min-width: 0;
  padding: 0.6875rem 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.875rem
}

.assistant-typing>span {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: currentColor;
  animation: assistantTyping 1.1s ease-in-out infinite
}

.assistant-typing>span:nth-child(2) {
  animation-delay: .15s
}

.assistant-typing>span:nth-child(3) {
  animation-delay: .3s
}

.workspace-composer.is-pending {
  opacity: .72
}

.workspace-composer textarea:disabled {
  cursor: not-allowed
}

.workspace-send:disabled,
.workspace-tool:disabled,
.workspace-suggestions button:disabled {
  cursor: not-allowed;
  transform: none !important;
  opacity: .55
}

@keyframes assistantTyping {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .25
  }

  30% {
    transform: translateY(-3px);
    opacity: .9
  }
}

.workspace-messages .msg.message-focus .bubble {
  animation: messageFocus 2.1s ease
}

@keyframes messageFocus {

  0%,
  100% {
    box-shadow: 0 8px 24px rgba(41, 50, 70, .045)
  }

  20%,
  65% {
    border-color: rgba(126, 96, 224, .62);
    box-shadow: 0 0 0 4px rgba(126, 96, 224, .13), 0 12px 30px rgba(80, 61, 150, .16)
  }
}

.composer-wrap {
  position: absolute;
  left: 17.625rem;
  right: 0;
  bottom: 0;
  padding: 1.375rem 1.25rem 1.5rem;
  background: linear-gradient(transparent, #080d14 35%)
}

.composer {
  max-width: 51.25rem;
  margin: auto;
  border: 1px solid #29364a;
  background: #101824;
  border-radius: 1.25rem;
  padding: 0.625rem 0.625rem 0.5625rem;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .24)
}

.composer textarea {
  width: 100%;
  height: 3.25rem;
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
  color: white;
  padding: 0.625rem;
  font-size: 0.875rem
}

.compose-actions {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.round {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.75rem;
  border: 1px solid #2c3b50;
  background: #151f2d;
  color: white
}

.round.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 0
}

.recording {
  box-shadow: 0 0 0 5px rgba(255, 101, 119, .12);
  color: #ff8c9a;
  border-color: #63303b
}

.admin-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 15.75rem 1fr
}

.admin-side {
  border-right: 1px solid var(--line);
  background: #090e15;
  padding: 1rem
}

.admin-side .brand {
  padding: 0.5rem 0.4375rem 1.375rem
}

.admin-nav button {
  display: flex;
  width: 100%;
  gap: 0.625rem;
  border: 0;
  background: transparent;
  color: #9da9b8;
  padding: 0.6875rem 0.75rem;
  border-radius: 0.625rem;
  text-align: left;
  margin: 0.1875rem 0
}

.admin-nav button.active,
.admin-nav button:hover {
  background: #142033;
  color: white
}

.admin-content {
  padding: 1.75rem 2rem
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem
}

.admin-head h1 {
  margin: 0;
  font-size: 1.8125rem;
  letter-spacing: -.04em
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin-bottom: 1.375rem
}

.stat {
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 1rem
}

.stat small {
  color: var(--muted)
}

.stat strong {
  display: block;
  font-size: 1.9375rem;
  margin-top: 0.5rem;
  letter-spacing: -.04em
}

.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 1.0625rem;
  overflow: hidden;
  margin-bottom: 1.125rem
}

.panel-head {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.panel-head h3 {
  margin: 0
}

.table {
  width: 100%;
  border-collapse: collapse
}

.table th,
.table td {
  padding: 0.8125rem 1.125rem;
  text-align: left;
  border-bottom: 1px solid #172231;
  font-size: 0.8125rem
}

.table th {
  color: #75849a;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .05em
}

.badge {
  display: inline-flex;
  padding: 0.3125rem 0.5rem;
  border-radius: 6.1875rem;
  background: #14263a;
  color: #aaceff;
  font-size: 0.6875rem
}

.badge.good {
  background: #123025;
  color: #87e4b7
}

.badge.warn {
  background: #332914;
  color: #f2c86c
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.settings-card {
  padding: 1.3125rem;
  border: 1px solid var(--line);
  border-radius: 1.0625rem;
  background: var(--panel)
}

.settings-card h3 {
  margin-top: 0
}

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  z-index: 10
}

.modal {
  width: min(32.5rem, 100%);
  background: #101722;
  border: 1px solid #2a3749;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow)
}

.modal h2 {
  margin-top: 0
}

@media(max-width:900px) {

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

  .auth-wrap {
    grid-template-columns: 1fr
  }

  .auth-art {
    display: none
  }

  .app-layout {
    grid-template-columns: 5.125rem 1fr
  }

  .sidebar .brand span,
  .sidebar .side-title,
  .conv-list,
  .userinfo {
    display: none
  }

  .composer-wrap {
    left: 5.125rem
  }

  .newchat span {
    display: none
  }

  .admin-layout {
    grid-template-columns: 5.125rem 1fr
  }

  .admin-side .brand span,
  .admin-nav button span {
    display: none
  }

  .admin-content {
    padding: 1.375rem 1rem
  }

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

@media(max-width:620px) {
  .navlinks {
    display: none
  }

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

  .mock-window {
    grid-template-columns: 5.625rem 1fr
  }

  .hero {
    padding-top: 3.875rem
  }

  .hero h1 {
    font-size: 2.875rem
  }

  .footer {
    display: block
  }

  .footer div+div {
    margin-top: 0.75rem
  }

  .chat-top {
    padding: 0 0.875rem
  }

  .admin-content {
    padding: 1.125rem 0.625rem
  }
}


/* ===== ArisAI / met-ai.aris888.com visual alignment — V2 ===== */
:root {
  --bg: #050509;
  --panel: #0b0b12;
  --panel2: #10101a;
  --line: #242435;
  --text: #f7f7fb;
  --muted: #9b9bab;
  --brand: #8b5cf6;
  --brand2: #d946ef;
  --brand3: #4f46e5;
  --good: #34d399;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(139, 92, 246, .16), transparent 34rem),
    radial-gradient(circle at 96% 7%, rgba(217, 70, 239, .10), transparent 30rem),
    linear-gradient(180deg, #050509, #07070d 70%, #050509);
}

.logo {
  background: linear-gradient(145deg, #7c3aed, #d946ef);
  box-shadow: 0 0 30px rgba(168, 85, 247, .30), inset 0 0 18px rgba(255, 255, 255, .08);
}

.btn.primary {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%);
  box-shadow: 0 8px 30px rgba(139, 92, 246, .18);
}

.eyebrow {
  border-color: #3b2758;
  background: rgba(35, 20, 52, .72);
  color: #d9b8ff;
}

.gradient {
  background: linear-gradient(90deg, #ffffff 8%, #c4b5fd 54%, #f0abfc 96%);
  -webkit-background-clip: text;
  color: transparent;
}

.mock {
  border-color: #2a2035;
  background: linear-gradient(180deg, rgba(15, 11, 23, .94), rgba(8, 8, 13, .94));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .45), 0 0 80px rgba(139, 92, 246, .08);
}

.mock-window,
.sidebar,
.admin-side {
  background: #09090f
}

.mock-side {
  background: #07070c;
  border-color: #201b29
}

.mock-chat {
  background:
    radial-gradient(circle at 50% 42%, rgba(139, 92, 246, .08), transparent 18rem),
    #0a0a11
}

.mock-orb,
.assistant-dot {
  background: linear-gradient(145deg, #7c3aed, #d946ef);
  box-shadow: 0 0 50px rgba(168, 85, 247, .28);
}

.card,
.stat,
.panel,
.settings-card,
.form-card {
  background: linear-gradient(180deg, rgba(15, 15, 24, .96), rgba(10, 10, 17, .96));
  border-color: #242435;
}

.card:hover {
  border-color: #4a3266;
  transform: translateY(-2px);
  transition: .18s ease
}

.auth-art {
  background:
    radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .22), transparent 28rem),
    radial-gradient(circle at 70% 68%, rgba(217, 70, 239, .08), transparent 24rem),
    #07070c;
}

.form-card {
  backdrop-filter: blur(22px)
}

.field input,
.field textarea,
.field select {
  background: #08080e;
  border-color: #29293a
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .11)
}

.app-layout,
.chat-main {
  background: #07070c
}

.chat-top {
  background: rgba(8, 8, 13, .88);
  border-color: #21212e;
}

.conv:hover,
.conv.active {
  background: #151220
}

.userline:hover {
  background: #13131d
}

.composer-wrap {
  background: linear-gradient(transparent, #07070c 35%)
}

.composer {
  background: #0d0d15;
  border-color: #302840;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .35), 0 0 50px rgba(139, 92, 246, .05);
}

.round.primary {
  background: linear-gradient(135deg, #7c3aed, #d946ef)
}

.msg.me .bubble {
  background: linear-gradient(135deg, #31204b, #27203d)
}

.bubble {
  background: #11111a;
  border: 1px solid #1e1e2a
}

.admin-content {
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 92, 246, .08), transparent 30rem),
    #07070c
}

.admin-nav button.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, .20), rgba(217, 70, 239, .06));
  color: #f4eaff;
  border: 1px solid #342649;
}

.stat strong {
  background: linear-gradient(90deg, #fff, #d8b4fe);
  -webkit-background-clip: text;
  color: transparent
}

.badge {
  background: #1b1530;
  color: #cbb5ff
}

.badge.good {
  background: #0e2a22;
  color: #7de0b2
}

.badge.warn {
  background: #332615;
  color: #f5c96c
}

.nav {
  border-color: #181820
}

.navlinks a:hover {
  color: #fff
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6.125rem;
  transform: translateX(-50%);
  width: 33.75rem;
  height: 13.75rem;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(139, 92, 246, .16), transparent 65%);
  filter: blur(25px);
  z-index: -1
}

.hero {
  position: relative
}

.hero h1 {
  max-width: 61.25rem
}

.product-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  max-width: 47.5rem;
  margin: 2.25rem auto 0
}

.flow-step {
  border: 1px solid #2a2035;
  background: rgba(14, 12, 21, .75);
  border-radius: 1rem;
  padding: 1rem;
  text-align: left
}

.flow-step b {
  display: block;
  margin-bottom: 0.3125rem
}

.flow-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5625rem;
  display: grid;
  place-items: center;
  background: #1f1530;
  color: #d8b4fe;
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 0.625rem
}

.assistant-selector-strip {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.625rem 0 0
}

.assistant-chip {
  border: 1px solid #2a2035;
  background: #0d0d15;
  border-radius: 62.4375rem;
  padding: 0.5625rem 0.8125rem;
  color: #cfc7d9;
  font-size: 0.75rem
}

.assistant-chip.active {
  border-color: #7346a5;
  background: #20132f;
  color: #fff
}

.metric-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-top: 1.125rem
}

.metric-mini div {
  padding: 0.75rem;
  border: 1px solid #211b2a;
  background: #0b0b11;
  border-radius: 0.75rem
}

.metric-mini strong {
  display: block;
  font-size: 1.1875rem
}

.metric-mini small {
  color: #737382
}

.chat-brand-title {
  font-size: 0.8125rem;
  color: #d6c8e4
}

@media(max-width:760px) {

  .product-flow,
  .metric-mini {
    grid-template-columns: 1fr 1fr
  }
}

/* Marketing header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: rgba(8, 8, 12, .78);
  border-top: 4px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px)
}

.site-header .nav {
  height: 4.625rem;
  border: 0
}

.brand-logo {
  width: 11.875rem;
  height: 3rem;
  overflow: hidden;
  flex: 0 0 auto
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center
}

.logo-light {
  display: none !important
}

.navlinks {
  gap: 1.25rem
}

.navlinks a {
  font-size: 0.8125rem;
  font-weight: 650;
  transition: color .18s ease
}

.nav-actions {
  gap: 0.625rem
}

.theme-toggle {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .025);
  color: var(--text)
}

.theme-toggle:hover {
  border-color: #51415f;
  background: rgba(255, 255, 255, .06)
}

.theme-icon {
  font-size: 1.125rem;
  line-height: 1
}

.theme-sun {
  display: block
}

.theme-moon {
  display: none
}

.login-btn {
  background: transparent;
  padding: 0.625rem 0.9375rem
}

.start-btn {
  padding: 0.6875rem 1.0625rem;
  border-radius: 0.6875rem;
  white-space: nowrap
}

.home-content {
  padding-top: 4.875rem
}

html[data-theme="light"] {
  --bg: #f7f7fa;
  --panel: #fff;
  --panel2: #f2f1f6;
  --line: #dedde5;
  --text: #18151d;
  --muted: #6f6b77
}

html[data-theme="light"] body {
  background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, .10), transparent 34rem), #f7f7fa
}

html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(31, 24, 39, .09)
}

html[data-theme="light"] .logo-dark {
  display: none !important
}

html[data-theme="light"] .logo-light {
  display: block !important
}

html[data-theme="light"] .theme-sun {
  display: none
}

html[data-theme="light"] .theme-moon {
  display: block
}

html[data-theme="light"] .card,
html[data-theme="light"] .flow-step {
  background: rgba(255, 255, 255, .82);
  border-color: #e3ddea
}

html[data-theme="light"] .eyebrow {
  background: #f1eafb;
  border-color: #ded0ef;
  color: #69438d
}

html[data-theme="light"] .gradient {
  background: linear-gradient(90deg, #17131c, #7046a0 55%, #b228b9);
  -webkit-background-clip: text;
  color: transparent
}

html[data-theme="light"] .mock {
  background: #fff;
  border-color: #ded7e6
}

html[data-theme="light"] .mock-window {
  border-color: #ded7e6
}

@media(max-width:760px) {
  .site-header .shell {
    padding: 0 1rem
  }

  .brand-logo {
    width: 9.125rem
  }

  .nav-actions {
    gap: 0.4375rem
  }

  .theme-toggle {
    width: 2.4375rem;
    height: 2.4375rem
  }

  .login-btn {
    display: none
  }

  .start-btn {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem
  }
}

@media(max-width:420px) {
  .brand-logo {
    width: 7.875rem
  }

  .site-header .shell {
    padding: 0 0.75rem
  }

  .nav-actions {
    gap: 0.3125rem
  }
}

/* Aris888 AI marketing system inspired by the Mery product family */
:root {
  --orange: #ff7a24;
  --orange-dark: #e96610;
  --ink: #121c32;
  --paper: #f1f0ec;
  --cream: #fff9f1;
  --soft-line: rgba(18, 28, 50, .12)
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem
}

body {
  overflow-x: hidden
}

html[data-theme="light"] body {
  background: var(--paper);
  color: var(--ink)
}

.site-header {
  border-top: 4px solid rgba(22, 22, 20, .78)
}

html[data-theme="light"] .site-header {
  background: rgba(241, 240, 236, .86);
  border-bottom-color: rgba(18, 28, 50, .09)
}

.site-header .shell,
.home-content {
  max-width: 90rem
}

.site-header .nav {
  height: 4.5rem
}

.brand-logo {
  width: 11.875rem;
  height: 3.125rem
}

.navlinks {
  gap: 0.3125rem
}

.navlinks a {
  padding: 0.625rem 0.9375rem;
  border: 1px solid transparent;
  border-radius: 0.6875rem;
  color: var(--muted)
}

.navlinks a:hover,
.navlinks a.active {
  color: var(--text);
  border-color: rgba(255, 122, 36, .32);
  background: rgba(255, 122, 36, .055)
}

.btn.primary {
  background: linear-gradient(135deg, #ff9b57, #ff7218);
  color: #241307;
  box-shadow: 0 10px 25px rgba(255, 122, 36, .24);
  font-weight: 800
}

.btn.primary:hover {
  border-color: transparent;
  box-shadow: 0 13px 30px rgba(255, 122, 36, .31)
}

.btn.secondary {
  background: rgba(30, 28, 26, .2);
  border-color: transparent;
  color: var(--text)
}

html[data-theme="light"] .btn.secondary {
  background: #aaa49d;
  color: #fff
}

.home-content {
  padding-top: 4.75rem
}

.marketing-hero {
  min-height: 40.625rem;
  margin: 0 -1.5rem;
  padding: 4.75rem 1.5rem 3.625rem;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 4rem;
  align-items: center;
  position: relative
}

.marketing-hero:before {
  content: "";
  position: absolute;
  inset: 0 -12vw;
  background: radial-gradient(circle at 18% 35%, rgba(138, 232, 230, .42), transparent 37%), radial-gradient(circle at 82% 42%, rgba(174, 203, 247, .38), transparent 38%), linear-gradient(118deg, #ebf8f3, #eaf2fb 62%, #f8eee4);
  z-index: -1
}

html[data-theme="dark"] .marketing-hero:before {
  background: radial-gradient(circle at 12% 30%, rgba(39, 147, 153, .2), transparent 36%), radial-gradient(circle at 82% 38%, rgba(92, 87, 175, .2), transparent 40%), #0a0a10
}

.hero-copy {
  max-width: 47.5rem
}

.section-kicker {
  display: block;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: .16em;
  margin-bottom: 1.375rem
}

.hero-copy h1 {
  font-size: clamp(3.125rem, 5.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.065em;
  margin: 0 0 1.5rem;
  color: var(--ink)
}

html[data-theme="dark"] .hero-copy h1 {
  color: #f7f7fb
}

.hero-copy h1 span {
  color: #253e66
}

html[data-theme="dark"] .hero-copy h1 span {
  color: #b8c8ef
}

.hero-copy>p {
  max-width: 43.75rem;
  color: #667082;
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0 0 1.75rem
}

.hero-copy .hero-actions {
  justify-content: flex-start
}

.hero-copy .btn {
  padding: 0.875rem 1.1875rem
}

.hero-pills {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 1.75rem
}

.hero-pills span {
  font-size: 0.6875rem;
  padding: 0.5625rem 0.8125rem;
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .72);
  color: #687182;
  border: 1px solid rgba(255, 255, 255, .8)
}

.ai-preview {
  border: 1px solid rgba(205, 159, 121, .35);
  border-radius: 2.125rem;
  padding: 1.625rem;
  background: rgba(255, 249, 242, .76);
  box-shadow: 0 28px 70px rgba(42, 64, 93, .17);
  color: #2d2b2a;
  transform: rotate(-.5deg)
}

.preview-top {
  display: flex;
  justify-content: space-between;
  color: #736e69;
  font-size: 0.75rem
}

.preview-top i {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #31d38a;
  box-shadow: 0 0 0 4px rgba(49, 211, 138, .12)
}

.preview-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.375rem 0
}

.preview-cards article {
  padding: 1.0625rem;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(39, 34, 30, .08)
}

.preview-cards small,
.preview-cards strong,
.preview-cards em {
  display: block
}

.preview-cards small {
  color: #8c8781;
  font-size: 0.6875rem
}

.preview-cards strong {
  font-size: 1.3125rem;
  margin: 0.4375rem 0
}

.preview-cards em {
  font-size: 0.6875rem;
  color: #ef751e;
  font-style: normal
}

.preview-chat {
  padding: 1.125rem;
  border-radius: 1.1875rem;
  background: linear-gradient(rgba(255, 255, 255, .34) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .34) 1px, transparent 1px), #e8e1d8;
  background-size: 1.75rem 1.75rem
}

.chat-line {
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.5;
  max-width: 88%;
  margin: 0.5rem 0
}

.user-line {
  margin-left: auto;
  background: #fff
}

.ai-line {
  background: #fff0e3;
  border: 1px solid #ffd3b1
}

.ai-line b {
  color: #df6816
}

.preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5625rem;
  margin-top: 0.875rem
}

.preview-stats span {
  background: rgba(255, 255, 255, .78);
  padding: 0.6875rem;
  border-radius: 0.8125rem;
  font-size: 0.625rem;
  color: #817b75
}

.preview-stats b {
  display: block;
  color: #242221;
  font-size: 1rem;
  margin-bottom: 0.1875rem
}

.landing-block {
  padding: 6.5625rem 0;
  border-bottom: 1px solid var(--soft-line)
}

.section-head.left {
  text-align: left;
  max-width: 48.75rem;
  margin: 0 0 2.625rem
}

.section-head.left h2 {
  font-size: clamp(2.375rem, 4vw, 3.625rem);
  line-height: 1.04;
  color: var(--text);
  margin: 0 0 1.125rem
}

.section-head.left p {
  font-size: 1rem;
  max-width: 42.5rem
}

.feature-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem
}

.feature-four article {
  padding: 1.5625rem 1.375rem;
  min-height: 14.375rem;
  border: 1px solid var(--soft-line);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .42)
}

.feature-four span {
  display: grid;
  place-items: center;
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 0.6875rem;
  background: #fff0e5;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 800
}

.feature-four h3 {
  font-size: 1.25rem;
  margin: 2.625rem 0 0.625rem
}

.feature-four p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.65
}

.capability-block {
  background: linear-gradient(115deg, rgba(227, 239, 242, .65), rgba(244, 237, 229, .4));
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.capability-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6875rem
}

.capability-cloud span {
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--soft-line);
  border-radius: 0.8125rem;
  background: rgba(255, 255, 255, .68);
  font-weight: 700;
  font-size: 0.8125rem
}

.capability-cloud b {
  color: var(--orange);
  font-size: 0.5625rem;
  margin-left: 0.3125rem
}

.assistant-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.0625rem
}

.assistant-cards article {
  position: relative;
  min-height: 20rem;
  padding: 1.875rem;
  border: 1px solid var(--soft-line);
  border-radius: 1.5625rem;
  background: rgba(255, 255, 255, .44);
  overflow: hidden
}

.assistant-cards article>span {
  position: absolute;
  top: 1.0625rem;
  left: 1.0625rem;
  background: #ffe6d3;
  color: #c3530c;
  padding: 0.4375rem 0.625rem;
  border-radius: 62.4375rem;
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: .1em
}

.assistant-symbol {
  width: 4.375rem;
  height: 4.375rem;
  display: grid;
  place-items: center;
  margin: 2.8125rem 0 1.5rem;
  border-radius: 1.375rem;
  background: linear-gradient(135deg, #13c7d8, #be2bea);
  color: white;
  font-size: 1.9375rem;
  box-shadow: 0 13px 30px rgba(126, 72, 196, .22)
}

.assistant-cards small {
  color: var(--orange);
  font-weight: 750
}

.assistant-cards h3 {
  font-size: 1.6875rem;
  margin: 0.5625rem 0
}

.assistant-cards p {
  color: var(--muted);
  line-height: 1.65
}

.plans-block {
  background: linear-gradient(120deg, rgba(231, 243, 242, .7), rgba(255, 244, 232, .55));
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
  max-width: 58.125rem
}

.plan-grid article {
  position: relative;
  padding: 1.875rem;
  border: 1px solid var(--soft-line);
  border-radius: 1.5625rem;
  background: rgba(255, 255, 255, .74)
}

.plan-grid small {
  font-weight: 800
}

.price {
  font-size: 2.875rem;
  font-weight: 850;
  letter-spacing: -.05em;
  margin: 1.125rem 0 0.5625rem
}

.price span {
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 500
}

.plan-grid p {
  color: var(--muted)
}

.plan-grid ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0
}

.plan-grid li {
  padding: 0.5rem 0;
  font-size: 0.875rem
}

.plan-grid .btn {
  display: block;
  text-align: center
}

.pro-plan {
  border-color: rgba(255, 122, 36, .55) !important
}

.plan-badge {
  position: absolute;
  right: 1.375rem;
  top: 1.375rem;
  background: #ffe2cd;
  color: #c9560d;
  padding: 0.4375rem 0.625rem;
  border-radius: 6.1875rem;
  font-size: 0.5625rem;
  font-weight: 850
}

.purpose-block {
  margin: 0 -1.5rem;
  padding: 6.875rem max(1.5rem, 8vw);
  background: #14223b;
  color: #fff
}

.purpose-block h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1.05;
  max-width: 59.375rem;
  margin: 0 0 1.375rem
}

.purpose-block p {
  max-width: 48.75rem;
  color: #b7c3d7;
  font-size: 1rem;
  line-height: 1.8
}

.marketing-footer {
  display: grid;
  grid-template-columns: 1.4fr .7fr 1fr 1fr;
  gap: 2.8125rem;
  padding: 4.375rem 0 1.875rem
}

.marketing-footer>div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem
}

.marketing-footer img {
  width: 11.25rem;
  height: 2.875rem;
  object-fit: contain;
  object-position: left
}

.marketing-footer p,
.marketing-footer a {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--muted)
}

.marketing-footer a:hover {
  color: var(--orange)
}

.footer-brand p {
  max-width: 20.625rem
}

.footer-bottom {
  grid-column: 1/-1;
  flex-direction: row !important;
  justify-content: space-between;
  border-top: 1px solid var(--soft-line);
  padding-top: 1.5rem;
  color: var(--muted);
  font-size: 0.75rem
}

html[data-theme="dark"] .feature-four article,
html[data-theme="dark"] .assistant-cards article,
html[data-theme="dark"] .capability-cloud span,
html[data-theme="dark"] .plan-grid article {
  background: rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .capability-block,
html[data-theme="dark"] .plans-block {
  background: rgba(255, 255, 255, .015)
}

@media(max-width:1040px) {
  .navlinks a {
    padding: 0.5625rem 0.5rem
  }

  .marketing-hero {
    grid-template-columns: 1fr;
    gap: 2.875rem
  }

  .hero-copy {
    max-width: 56.25rem
  }

  .ai-preview {
    max-width: 45rem
  }

  .feature-four {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:760px) {
  .site-header .nav {
    height: 4.125rem
  }

  .home-content {
    padding-top: 4.375rem
  }

  .marketing-hero {
    padding-top: 3.625rem;
    min-height: auto
  }

  .hero-copy h1 {
    font-size: 3.125rem
  }

  .hero-copy>p {
    font-size: 0.9375rem
  }

  .ai-preview {
    padding: 1rem;
    border-radius: 1.5rem
  }

  .preview-cards {
    grid-template-columns: 1fr
  }

  .feature-four,
  .assistant-cards,
  .plan-grid {
    grid-template-columns: 1fr
  }

  .landing-block {
    padding: 4.6875rem 0
  }

  .section-head.left h2 {
    font-size: 2.5rem
  }

  .assistant-cards article {
    min-height: 17.5rem
  }

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

  .footer-brand {
    grid-column: 1/-1
  }

  .purpose-block {
    padding-top: 4.6875rem;
    padding-bottom: 4.6875rem
  }
}

@media(max-width:480px) {
  .hero-copy h1 {
    font-size: 2.625rem
  }

  .marketing-hero {
    padding-left: 1.125rem;
    padding-right: 1.125rem
  }

  .hero-pills {
    gap: 0.375rem
  }

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

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

  .marketing-footer>div {
    grid-column: 1
  }

  .footer-bottom {
    flex-direction: column !important
  }

  .section-head.left h2 {
    font-size: 2.125rem
  }
}

/* Airier editorial refinement */
:root {
  --paper: #f7f6f2;
  --soft-line: rgba(23, 35, 56, .09)
}

html[data-theme="light"] body {
  background: #f7f6f2
}

html[data-theme="dark"] {
  --bg: #0d1320;
  --panel: #131b2a;
  --panel2: #172132;
  --line: #29364a;
  --text: #f5f7fb;
  --muted: #a7b1c1
}

html[data-theme="dark"] body {
  background: #0d1320
}

html[data-theme="dark"] .site-header {
  background: rgba(13, 19, 32, .84);
  border-bottom-color: rgba(255, 255, 255, .07)
}

.shell {
  max-width: 78.75rem
}

.site-header .shell {
  max-width: 82.5rem
}

.marketing-hero {
  min-height: 45rem;
  gap: 5.625rem;
  padding-top: 5.75rem;
  padding-bottom: 5.5rem
}

.marketing-hero:before {
  background: radial-gradient(circle at 8% 28%, rgba(143, 231, 225, .34), transparent 35%), radial-gradient(circle at 79% 40%, rgba(188, 213, 244, .36), transparent 39%), linear-gradient(118deg, #f3faf7, #f2f6fb 62%, #fbf3eb)
}

html[data-theme="dark"] .marketing-hero:before {
  background: radial-gradient(circle at 9% 28%, rgba(40, 171, 174, .16), transparent 37%), radial-gradient(circle at 82% 35%, rgba(112, 103, 197, .16), transparent 40%), linear-gradient(120deg, #0e1823, #111524 63%, #17131d)
}

.hero-copy {
  max-width: 43.125rem
}

.hero-copy h1 {
  font-size: clamp(3.375rem, 5.1vw, 4.75rem);
  line-height: 1.01;
  margin-bottom: 1.875rem
}

.hero-copy>p {
  max-width: 38.75rem;
  font-size: 1.125rem;
  line-height: 1.78;
  margin-bottom: 2.125rem
}

.section-kicker {
  margin-bottom: 1.5625rem
}

.ai-preview {
  padding: 1.9375rem;
  border-radius: 2.375rem;
  background: rgba(255, 252, 247, .84);
  box-shadow: 0 35px 90px rgba(52, 70, 95, .13);
  transform: none
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 1.875rem 0 0;
  padding: 1.6875rem 0 3rem;
  border-bottom: 1px solid var(--soft-line);
  gap: 1rem
}

.trust-strip span {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.75rem
}

.trust-strip b {
  color: var(--text);
  font-size: 1rem
}

.landing-block {
  padding: 8.25rem 0
}

.section-head.left {
  max-width: 53.125rem;
  margin-bottom: 3.5rem
}

.section-head.left h2 {
  font-size: clamp(2.625rem, 4.1vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: 1.5rem
}

.section-head.left p {
  max-width: 46.25rem;
  font-size: 1.0625rem;
  line-height: 1.8
}

.feature-four {
  gap: 1.25rem
}

.feature-four article {
  min-height: 16.875rem;
  padding: 1.75rem 1.625rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 16px 45px rgba(38, 52, 72, .04)
}

.feature-four h3 {
  margin-top: 3.375rem
}

.feature-four p {
  font-size: 0.875rem;
  line-height: 1.75
}

.workflow-block {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 6.25rem;
  align-items: start;
  padding: 8.25rem 0;
  border-bottom: 1px solid var(--soft-line)
}

.workflow-copy {
  position: sticky;
  top: 7.5rem
}

.workflow-copy h2 {
  font-size: clamp(2.5rem, 4vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 1.5625rem;
  max-width: 35.625rem
}

.workflow-copy p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 34.375rem
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--orange);
  font-weight: 800;
  margin-top: 1.375rem
}

.text-link span {
  font-size: 1.375rem;
  transition: transform .2s
}

.text-link:hover span {
  transform: translateX(5px)
}

.workflow-steps {
  display: flex;
  flex-direction: column
}

.workflow-steps article {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  padding: 2.1875rem 0;
  border-bottom: 1px solid var(--soft-line)
}

.workflow-steps article:first-child {
  padding-top: 0.25rem
}

.workflow-steps>article>span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9375rem;
  background: #fff0e5;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 850
}

.workflow-steps h3 {
  font-size: 1.4375rem;
  margin: 1px 0 0.625rem
}

.workflow-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  max-width: 32.5rem
}

.capability-block,
.plans-block {
  padding-top: 8.25rem;
  padding-bottom: 8.25rem
}

.capability-cloud {
  gap: 0.875rem
}

.capability-cloud span {
  padding: 1.0625rem 1.3125rem;
  border-radius: 0.9375rem;
  background: rgba(255, 255, 255, .78)
}

.assistant-cards {
  gap: 1.375rem
}

.assistant-cards article {
  padding: 2.125rem;
  min-height: 21.5625rem;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 18px 50px rgba(38, 52, 72, .045)
}

.plan-grid {
  gap: 1.5rem
}

.plan-grid article {
  padding: 2.375rem;
  border-radius: 1.75rem
}

.purpose-block {
  padding-top: 8.4375rem;
  padding-bottom: 8.4375rem
}

.marketing-footer {
  padding-top: 5.625rem;
  gap: 3.75rem
}

html[data-theme="dark"] .feature-four article,
html[data-theme="dark"] .assistant-cards article,
html[data-theme="dark"] .capability-cloud span,
html[data-theme="dark"] .plan-grid article {
  background: rgba(255, 255, 255, .045);
  box-shadow: none
}

@media(max-width:1040px) {
  .marketing-hero {
    gap: 3.75rem
  }

  .workflow-block {
    gap: 3.4375rem
  }

  .trust-strip {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:760px) {
  .marketing-hero {
    padding-top: 4.375rem;
    padding-bottom: 4.375rem
  }

  .landing-block,
  .workflow-block,
  .capability-block,
  .plans-block {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem
  }

  .workflow-block {
    grid-template-columns: 1fr;
    gap: 3.375rem
  }

  .workflow-copy {
    position: static
  }

  .trust-strip {
    padding-bottom: 2.25rem
  }

  .ai-preview {
    padding: 1.125rem
  }

  .feature-four article {
    min-height: 15rem
  }

  .section-head.left {
    margin-bottom: 2.625rem
  }
}

@media(max-width:480px) {
  .marketing-hero {
    gap: 3.375rem
  }

  .hero-copy h1 {
    font-size: 2.625rem
  }

  .hero-copy>p {
    font-size: 1rem
  }

  .trust-strip {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
  }

  .workflow-steps article {
    grid-template-columns: 2.75rem 1fr;
    gap: 1rem
  }

  .workflow-steps>article>span {
    width: 2.625rem;
    height: 2.625rem
  }

  .workflow-steps h3 {
    font-size: 1.25rem
  }
}

/* Reference-aligned dark footer */
.marketing-footer {
  display: block;
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at 8% 10%, rgba(112, 72, 38, .16), transparent 34%), #171714;
  color: #f2f1ed;
  border-top: 1px solid rgba(255, 158, 73, .18)
}

.footer-inner {
  width: min(75.625rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: 4rem 0 1.375rem;
  display: grid;
  grid-template-columns: 1.35fr .68fr 1.12fr .9fr;
  column-gap: 4.375rem;
  row-gap: 3.25rem
}

.marketing-footer .footer-brand,
.marketing-footer .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6875rem
}

.marketing-footer .footer-brand img {
  display: block;
  width: 12.8125rem;
  height: 3.375rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.5625rem
}

.marketing-footer strong {
  font-size: 0.8125rem;
  color: #fff;
  margin-bottom: 0.25rem
}

.marketing-footer p,
.marketing-footer a {
  margin: 0;
  color: #a7a69f;
  font-size: 0.75rem;
  line-height: 1.75
}

.marketing-footer .footer-brand p {
  max-width: 21.875rem
}

.marketing-footer .footer-purpose p {
  max-width: 22.5rem
}

.marketing-footer .footer-column>a:hover {
  color: #fff
}

.footer-contact p,
.footer-contact>a {
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.footer-contact p>span,
.footer-contact>a>span {
  width: 0.9375rem;
  text-align: center;
  color: #c7c5bd
}

.social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap
}

.marketing-footer .social {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0.5625rem;
  background: #22231f;
  transition: transform .18s ease, border-color .18s ease, background .18s ease
}

.marketing-footer .social:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .28);
  background: #2a2b27
}

.marketing-footer .social span {
  font-size: 1rem;
  font-weight: 850;
  line-height: 1
}

.marketing-footer .instagram span {
  color: #e83aa9
}

.marketing-footer .facebook span {
  color: #3985ff;
  font-family: Arial, sans-serif
}

.marketing-footer .x-social span {
  color: #dedede
}

.marketing-footer .youtube span {
  color: #ff3131;
  font-size: 0.8125rem
}

.marketing-footer .linkedin span {
  color: #43a5de;
  font-size: 0.75rem
}

.marketing-footer .discord span {
  color: #7188ff
}

.marketing-footer .footer-bottom {
  grid-column: 1/-1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.875rem;
  padding-top: 1.3125rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #88877f;
  font-size: 0.625rem
}

.marketing-footer .footer-bottom span:last-child {
  text-align: right
}

.marketing-footer .footer-bottom .footer-credit strong {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 800
}

.marketing-footer .footer-bottom a {
  font-size: inherit;
  color: #88877f
}

.marketing-footer .footer-bottom a:hover {
  color: #d5d3cb
}

@media(max-width:980px) {
  .footer-inner {
    grid-template-columns: 1.2fr .8fr;
    column-gap: 3.75rem
  }

  .marketing-footer .footer-bottom {
    grid-column: 1/-1
  }
}

@media(max-width:620px) {
  .footer-inner {
    width: min(100% - 2.25rem, 75.625rem);
    grid-template-columns: 1fr;
    padding-top: 3.125rem;
    row-gap: 2.125rem
  }

  .marketing-footer .footer-brand,
  .marketing-footer .footer-column {
    grid-column: 1
  }

  .marketing-footer .footer-bottom {
    flex-direction: column;
    gap: 0.5rem
  }

  .marketing-footer .footer-bottom span:last-child {
    text-align: left
  }
}

/* Aris888 AI palette + exact Mery footer hierarchy */
:root {
  --orange: #805ad5;
  --orange-dark: #6845c5
}

.section-kicker {
  color: #7755cf
}

.btn.primary {
  background: linear-gradient(135deg, #16c8d7 0%, #6f72e8 50%, #b52add 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(112, 80, 210, .22)
}

.btn.primary:hover {
  box-shadow: 0 14px 34px rgba(112, 80, 210, .3)
}

.navlinks a:hover,
.navlinks a.active {
  border-color: rgba(120, 82, 207, .3);
  background: rgba(120, 82, 207, .07)
}

.preview-cards em {
  color: #7451cc
}

.ai-line {
  background: #f2effd;
  border-color: #dcd4f5
}

.ai-line b {
  color: #7551cd
}

.feature-four span,
.workflow-steps>article>span {
  background: #efebfb;
  color: #7551cd
}

.assistant-cards article>span {
  background: #eee9fb;
  color: #6946c3
}

.plan-badge {
  background: #ece7fb;
  color: #6946c3
}

.pro-plan {
  border-color: rgba(121, 82, 207, .45) !important
}

.marketing-hero:before {
  background: radial-gradient(circle at 8% 28%, rgba(143, 231, 225, .34), transparent 35%), radial-gradient(circle at 79% 40%, rgba(189, 184, 244, .38), transparent 39%), linear-gradient(118deg, #f3faf8, #f2f4fb 62%, #f7f3fb)
}

.plans-block {
  background: linear-gradient(120deg, rgba(231, 243, 242, .7), rgba(239, 235, 250, .58))
}

.theme-toggle:hover {
  border-color: #6f5a9e;
  background: rgba(118, 82, 205, .07)
}

.marketing-footer {
  display: block;
  margin: 0;
  padding: 0;
  background: #f3f2ee;
  color: #122033;
  border-top: 1px solid rgba(18, 32, 51, .09)
}

.marketing-footer .footer-grid {
  width: min(80rem, 100%);
  margin: 0 auto;
  padding: 2.875rem 2.375rem 2.125rem;
  display: grid;
  grid-template-columns: 1.9fr .8fr 1.45fr 1fr;
  gap: 2.8125rem;
  box-sizing: border-box
}

.marketing-footer .footer-brand {
  display: block
}

.marketing-footer .footer-brand img {
  width: 12.8125rem;
  height: 3rem;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 0.875rem
}

.marketing-footer .footer-brand p {
  max-width: 22.8125rem
}

.marketing-footer .footer-logo-light {
  display: block !important
}

.marketing-footer .footer-logo-dark {
  display: none !important
}

.marketing-footer .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem
}

.marketing-footer strong {
  font-size: 0.75rem;
  color: #122033;
  margin: 0 0 2px
}

.marketing-footer p,
.marketing-footer a,
.marketing-footer .footer-contact-link {
  margin: 0;
  color: #706e68;
  font-size: 0.6875rem;
  line-height: 1.65
}

.marketing-footer .footer-column>a:hover {
  color: #122033
}

.marketing-footer .footer-column>p {
  max-width: 20.625rem
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 0.4375rem
}

.footer-contact-link i {
  width: 0.875rem;
  text-align: center;
  font-style: normal;
  color: #77756f
}

.footer-address {
  max-width: 15rem
}

.marketing-footer .social-links {
  display: flex;
  gap: 0.4375rem;
  margin-top: 0.25rem;
  flex-wrap: wrap
}

.marketing-footer .social {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d9dce1;
  border-radius: 0.4375rem;
  background: #f7f9fc;
  transition: transform .18s ease, border-color .18s ease
}

.marketing-footer .social:hover {
  transform: translateY(-2px);
  border-color: #bfc3cb;
  background: #fff
}

.marketing-footer .social span {
  font-size: 0.875rem;
  font-weight: 850;
  line-height: 1
}

.marketing-footer .instagram span {
  color: #c13584
}

.marketing-footer .facebook span {
  color: #0866ff;
  font-family: Arial, sans-serif
}

.marketing-footer .x-social span {
  color: #0f1419
}

.marketing-footer .youtube span {
  color: #d14343;
  font-size: 0.6875rem
}

.marketing-footer .linkedin span {
  color: #3978a8;
  font-size: 0.625rem
}

.marketing-footer .discord span {
  color: #5865f2
}

.marketing-footer .footer-bottom {
  width: min(80rem, 100%);
  min-height: 2.5625rem;
  margin: 0 auto;
  padding: 0.875rem 2.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border-top: 1px solid rgba(18, 32, 51, .1);
  box-sizing: border-box;
  color: #706e68;
  font-size: 0.5625rem
}

.marketing-footer .footer-bottom span:last-child {
  text-align: right
}

.marketing-footer .footer-bottom a {
  color: inherit;
  font-size: inherit
}

.marketing-footer .footer-bottom a:hover {
  color: #122033
}

html[data-theme="dark"] .section-kicker {
  color: #bda7ff
}

html[data-theme="dark"] .ai-line {
  background: #201a35;
  border-color: #3b2d60
}

html[data-theme="dark"] .feature-four span,
html[data-theme="dark"] .workflow-steps>article>span {
  background: #251d3f;
  color: #c6b1ff
}

html[data-theme="dark"] .assistant-cards article>span,
html[data-theme="dark"] .plan-badge {
  background: #2a2045;
  color: #c6b1ff
}

html[data-theme="dark"] .marketing-footer {
  background: #171714;
  color: #f2f1ed;
  border-top-color: rgba(255, 255, 255, .1)
}

html[data-theme="dark"] .marketing-footer .footer-logo-light {
  display: none !important
}

html[data-theme="dark"] .marketing-footer .footer-logo-dark {
  display: block !important
}

html[data-theme="dark"] .marketing-footer strong {
  color: #f3f2ed
}

html[data-theme="dark"] .marketing-footer p,
html[data-theme="dark"] .marketing-footer a,
html[data-theme="dark"] .marketing-footer .footer-contact-link {
  color: #a7a69f
}

html[data-theme="dark"] .marketing-footer .footer-column>a:hover {
  color: #fff
}

html[data-theme="dark"] .marketing-footer .social {
  background: #22231f;
  border-color: rgba(255, 255, 255, .13)
}

html[data-theme="dark"] .marketing-footer .social:hover {
  background: #2a2b27;
  border-color: rgba(255, 255, 255, .28)
}

html[data-theme="dark"] .marketing-footer .x-social span {
  color: #dedede
}

html[data-theme="dark"] .marketing-footer .footer-bottom {
  border-top-color: rgba(255, 255, 255, .12);
  color: #88877f
}

html[data-theme="dark"] .marketing-footer .footer-bottom a:hover {
  color: #d5d3cb
}

@media(max-width:900px) {
  .marketing-footer .footer-grid {
    grid-template-columns: 1.25fr .75fr;
    gap: 2.375rem 3.4375rem
  }
}

@media(max-width:620px) {
  .marketing-footer .footer-grid {
    grid-template-columns: 1fr;
    padding: 2.625rem 1.5rem 1.875rem;
    gap: 1.9375rem
  }

  .marketing-footer .footer-bottom {
    padding: 0.875rem 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem
  }

  .marketing-footer .footer-bottom span:last-child {
    text-align: left
  }
}

/* Consolidated visual revision */
.site-header .nav {
  height: 4.25rem
}

.home-content {
  padding-top: 4.5rem
}

.brand-logo {
  width: 10.875rem;
  height: 2.75rem
}

.nav-actions {
  gap: 0.5rem
}

.theme-toggle {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0
}

.theme-toggle i {
  line-height: 1
}

.login-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5625rem;
  font-size: 0.75rem
}

.start-btn {
  padding: 0.5625rem 0.8125rem;
  border-radius: 0.5625rem;
  font-size: 0.75rem;
  background: linear-gradient(115deg, #15c9d8, #765ee8 55%, #b12bd8) !important;
  background-clip: border-box !important;
  box-shadow: 0 6px 18px rgba(103, 82, 207, .18) !important;
  border: 0 !important;
  overflow: hidden
}

.start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(103, 82, 207, .26) !important
}

.hero-copy .hero-actions {
  gap: 0.625rem
}

.hero-copy .hero-actions .btn {
  padding: 0.75rem 1.0625rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  box-shadow: none
}

.hero-copy .hero-actions .primary {
  background: linear-gradient(115deg, #14c7d6, #765ee8 58%, #af2bd7);
  box-shadow: 0 8px 20px rgba(104, 83, 205, .16)
}

.hero-copy .hero-actions .secondary,
.plan-card .secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line)
}

.hero-copy .hero-actions .secondary:hover,
.plan-card .secondary:hover {
  background: rgba(119, 85, 207, .07);
  border-color: rgba(119, 85, 207, .35)
}

html[data-theme="dark"] .hero-copy .hero-actions .secondary,
html[data-theme="dark"] .plan-card .secondary {
  background: rgba(255, 255, 255, .035);
  color: #f4f6fb;
  border-color: rgba(255, 255, 255, .14)
}

.ai-preview {
  background: rgba(248, 250, 253, .84);
  border-color: rgba(90, 104, 135, .15)
}

.preview-cards article,
.preview-stats span,
.user-line {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(72, 86, 115, .1)
}

.preview-chat {
  background: linear-gradient(rgba(114, 98, 165, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 98, 165, .07) 1px, transparent 1px), #edf1f7;
  background-size: 1.75rem 1.75rem
}

.ai-line {
  background: #f0edfb;
  border-color: #d9d1f1
}

html[data-theme="dark"] .ai-preview {
  background: rgba(20, 27, 43, .92);
  border-color: rgba(160, 143, 220, .18);
  color: #eef1f7
}

html[data-theme="dark"] .preview-top,
html[data-theme="dark"] .preview-cards small,
html[data-theme="dark"] .preview-stats span {
  color: #aab3c3
}

html[data-theme="dark"] .preview-cards article,
html[data-theme="dark"] .preview-stats span,
html[data-theme="dark"] .user-line {
  background: #182235;
  border-color: #2b3850;
  color: #edf1f8
}

html[data-theme="dark"] .preview-cards strong,
html[data-theme="dark"] .preview-stats b {
  color: #f5f7fb
}

html[data-theme="dark"] .preview-chat {
  background: linear-gradient(rgba(164, 143, 225, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(164, 143, 225, .07) 1px, transparent 1px), #111a2a
}

html[data-theme="dark"] .ai-line {
  background: #251f3d;
  border-color: #3e3264;
  color: #eae6f6
}

.trust-strip {
  gap: 0;
  padding: 2rem 0 3.25rem
}

.trust-strip article {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  min-height: 4rem;
  padding: 0 1.5rem;
  border-right: 1px solid var(--soft-line)
}

.trust-strip article:first-child {
  padding-left: 0
}

.trust-strip article:last-child {
  border-right: 0
}

.trust-strip article>i {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, rgba(19, 199, 215, .13), rgba(127, 79, 211, .13));
  color: #7256c9;
  font-size: 1rem
}

.trust-strip article span {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem
}

.trust-strip article b {
  font-size: 0.875rem
}

.trust-strip article small {
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--muted)
}

html[data-theme="dark"] .trust-strip article>i {
  background: linear-gradient(135deg, rgba(19, 199, 215, .12), rgba(150, 102, 225, .18));
  color: #c3adff
}

.section-head.centered {
  text-align: center;
  max-width: 51.25rem;
  margin: 0 auto 3.375rem
}

.section-head.centered h2 {
  font-size: clamp(2.5rem, 4vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 1.25rem
}

.section-head.centered p {
  max-width: 43.125rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75
}

.motion-card {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease
}

.motion-card:hover {
  transform: translateY(-7px);
  border-color: rgba(116, 83, 204, .3) !important;
  box-shadow: 0 24px 60px rgba(55, 67, 96, .11) !important
}

.motion-card:hover>span i,
.motion-card:hover>.assistant-symbol i,
.motion-card:hover>.plan-icon i {
  animation: iconPulse .65s ease
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1) rotate(0)
  }

  45% {
    transform: scale(1.13) rotate(-5deg)
  }
}

.feature-four article {
  position: relative;
  overflow: hidden
}

.feature-four article:after {
  content: "";
  position: absolute;
  inset: auto -1.875rem -3.4375rem auto;
  width: 6.875rem;
  height: 6.875rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 88, 205, .09), transparent 70%)
}

.feature-four span {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 0.875rem;
  font-size: 1.0625rem
}

.feature-four h3 {
  margin-top: 2.8125rem
}

.workflow-steps {
  gap: 0.875rem
}

.workflow-steps article {
  padding: 1.5625rem;
  border: 1px solid var(--soft-line);
  border-radius: 1.1875rem;
  background: rgba(255, 255, 255, .48);
  grid-template-columns: 3.25rem 1fr
}

.workflow-steps article:first-child {
  padding-top: 1.5625rem
}

.workflow-steps>article>span {
  width: 2.875rem;
  height: 2.875rem;
  font-size: 1rem
}

.workflow-steps h3 {
  font-size: 1.25rem
}

.workflow-steps p {
  font-size: 0.875rem
}

html[data-theme="dark"] .workflow-steps article {
  background: rgba(255, 255, 255, .035)
}

.capability-block,
.plans-block {
  background: transparent !important;
  margin: 0;
  padding-left: 0;
  padding-right: 0
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem
}

.capability-grid article {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  min-height: 4.625rem;
  padding: 1rem 1.0625rem;
  border: 1px solid var(--soft-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .5)
}

.capability-grid article>i {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(18, 196, 214, .12), rgba(126, 84, 208, .12));
  color: #7256c9
}

.capability-grid article span {
  font-size: 0.75rem;
  font-weight: 750
}

.capability-grid article b {
  display: inline-flex;
  margin-left: 0.4375rem;
  color: #8468d0;
  font-size: 0.5rem
}

.capability-grid .motion-card:hover {
  transform: translateY(-4px)
}

html[data-theme="dark"] .capability-grid article {
  background: rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .capability-grid article>i {
  color: #c5b1ff
}

.assistant-cards article {
  min-height: 20.625rem
}

.assistant-symbol {
  width: 3rem;
  height: 3rem;
  margin: 2.6875rem 0 1.75rem;
  border-radius: 0.875rem;
  font-size: 1.0625rem;
  box-shadow: 0 10px 24px rgba(98, 76, 194, .17)
}

.assistant-cards h3 {
  font-size: 1.8125rem;
  letter-spacing: -.035em;
  margin: 0.6875rem 0
}

.assistant-cards small {
  font-size: 0.625rem;
  letter-spacing: .04em
}

.assistant-cards p {
  font-size: 0.875rem
}

.assistant-cards article:nth-child(2) .assistant-symbol {
  background: linear-gradient(135deg, #1dc0d0, #617ddd)
}

.assistant-cards article:nth-child(3) .assistant-symbol {
  background: linear-gradient(135deg, #725add, #b432cf)
}

.plans-block {
  border-bottom: 0
}

.plan-grid {
  margin: 0 auto;
  max-width: 60rem
}

.plan-card {
  padding: 2.25rem !important;
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid var(--soft-line) !important;
  box-shadow: 0 16px 45px rgba(41, 51, 76, .055)
}

.plan-card.pro-plan {
  border-color: rgba(117, 82, 206, .35) !important;
  box-shadow: 0 22px 60px rgba(91, 70, 180, .1)
}

.plan-icon {
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgba(19, 196, 213, .15), rgba(126, 83, 209, .15));
  color: #7256c9;
  margin-bottom: 1.5625rem
}

.plan-grid ul {
  display: grid;
  gap: 0.1875rem
}

.plan-grid li {
  display: flex;
  align-items: center;
  gap: 0.5625rem
}

.plan-grid li i {
  color: #7356ca;
  font-size: 0.6875rem
}

.plan-card .btn {
  border-radius: 0.6875rem;
  padding: 0.75rem
}

.plan-card .primary {
  background: linear-gradient(115deg, #15c9d8, #765ee8 55%, #b12bd8)
}

html[data-theme="dark"] .plan-card {
  background: rgba(255, 255, 255, .04) !important
}

.marketing-footer {
  border-top-color: rgba(119, 86, 204, .15)
}

.footer-contact-link i {
  color: #7459c6
}

.marketing-footer .social i {
  font-size: 0.875rem;
  line-height: 1
}

.marketing-footer .instagram i {
  color: #c13584
}

.marketing-footer .facebook i {
  color: #0866ff
}

.marketing-footer .x-social i {
  color: #0f1419
}

.marketing-footer .youtube i {
  color: #d14343
}

.marketing-footer .linkedin i {
  color: #3978a8
}

.marketing-footer .discord i {
  color: #5865f2
}

html[data-theme="dark"] .marketing-footer .x-social i {
  color: #dedede
}

@media(max-width:1040px) {
  .trust-strip {
    grid-template-columns: 1fr 1fr
  }

  .trust-strip article:nth-child(2) {
    border-right: 0
  }

  .trust-strip article {
    padding: 1rem 1.5rem
  }

  .trust-strip article:first-child {
    padding-left: 1.5rem
  }

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

@media(max-width:760px) {
  .brand-logo {
    width: 8.875rem
  }

  .start-btn {
    padding: 0.5rem 0.625rem
  }

  .trust-strip {
    grid-template-columns: 1fr
  }

  .trust-strip article {
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
    padding: 1.0625rem 0.25rem
  }

  .trust-strip article:first-child {
    padding-left: 0.25rem
  }

  .trust-strip article:last-child {
    border-bottom: 0
  }

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

  .section-head.centered h2 {
    font-size: 2.375rem
  }
}

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

  .workflow-steps article {
    grid-template-columns: 2.875rem 1fr;
    padding: 1.25rem
  }

  .feature-four {
    grid-template-columns: 1fr
  }

  .theme-toggle {
    width: 2rem;
    height: 2rem
  }

  .start-btn {
    font-size: 0.6875rem
  }
}

@media(prefers-reduced-motion:reduce) {

  .motion-card,
  .motion-card * {
    animation: none !important;
    transition: none !important
  }

  .motion-card:hover {
    transform: none
  }
}

/* Hero and benefit strip refinement */
.marketing-hero {
  min-height: 38.75rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(27.5rem, .92fr);
  gap: 4.875rem;
  padding-top: 4.625rem;
  padding-bottom: 3.625rem
}

.hero-copy {
  max-width: 43.75rem
}

.hero-copy h1 {
  max-width: 42.5rem;
  font-size: clamp(3.375rem, 4.8vw, 4.5rem);
  line-height: 1.015;
  letter-spacing: -.06em;
  margin-bottom: 1.6875rem
}

.hero-copy h1 span {
  display: block;
  background: linear-gradient(100deg, #304b78 0%, #735bc7 58%, #a534cd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero-copy>p {
  max-width: 38.125rem;
  color: #68758a;
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 1.9375rem
}

.hero-copy .hero-actions .secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem
}

.hero-pills {
  gap: 0.5625rem;
  margin-top: 1.5rem
}

.hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.6875rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(83, 96, 124, .12);
  color: #667187
}

.hero-pills i {
  color: #7659ca;
  font-size: 0.625rem
}

html[data-theme="dark"] .hero-copy h1 span {
  background: linear-gradient(100deg, #b9c9f1 0%, #b8a8ff 55%, #dd8aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .hero-copy>p {
  color: #a6b1c4
}

html[data-theme="dark"] .hero-pills span {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .11);
  color: #b3bdcc
}

html[data-theme="dark"] .hero-pills i {
  color: #c5b0ff
}

.ai-preview {
  position: relative;
  padding: 1.5625rem;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 28px 75px rgba(40, 57, 89, .14)
}

.preview-glow {
  position: absolute;
  right: -5.3125rem;
  top: -6.875rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113, 91, 208, .14), transparent 68%);
  pointer-events: none
}

.preview-top {
  position: relative;
  align-items: center
}

.preview-top>b {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: #45526b
}

.preview-top>b i {
  color: #7859ce
}

.preview-top>span {
  display: flex;
  align-items: center;
  gap: 0.4375rem
}

.preview-top>span>i {
  flex: 0 0 auto
}

.preview-cards {
  gap: 0.6875rem;
  margin: 1.25rem 0 0.875rem
}

.preview-cards article {
  display: grid;
  grid-template-columns: 2.375rem 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  border-radius: 0.9375rem
}

.preview-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(18, 198, 214, .12), rgba(123, 84, 209, .14));
  color: #7357c8;
  font-size: 0.8125rem
}

.preview-cards strong {
  font-size: 1.0625rem;
  margin: 0.25rem 0
}

.preview-cards em {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.5625rem
}

.preview-cards em>i {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: #35ce91
}

.task-progress {
  height: 0.25rem;
  margin-top: 0.375rem;
  border-radius: 62.4375rem;
  background: #e5e9f0;
  overflow: hidden
}

.task-progress i {
  display: block;
  width: 67%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #18c2d3, #7859d0)
}

.preview-chat {
  position: relative;
  padding: 0.9375rem;
  border-radius: 1.0625rem
}

.chat-label {
  display: block;
  margin: 0 0 0.5625rem;
  color: #7e899c;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: .12em
}

.chat-line {
  font-size: 0.625rem;
  border-radius: 0.6875rem
}

.user-line {
  padding: 0.625rem 0.75rem
}

.ai-line {
  padding: 0.6875rem 0.75rem
}

.ai-line b {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-bottom: 0.25rem
}

.preview-stats {
  gap: 0.5rem;
  margin-top: 0.75rem
}

.preview-stats span {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 0.625rem 0.6875rem
}

.preview-stats span>i {
  grid-row: 1/3;
  width: 1.5625rem;
  height: 1.5625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(116, 86, 202, .1);
  color: #7358c6;
  font-size: 0.625rem
}

.preview-stats b {
  font-size: 0.875rem;
  margin: 0
}

.preview-stats small {
  font-size: 0.5rem;
  color: #7d8798
}

html[data-theme="dark"] .preview-top>b {
  color: #c9d2e4
}

html[data-theme="dark"] .task-progress {
  background: #263248
}

html[data-theme="dark"] .chat-label {
  color: #8f9ab0
}

html[data-theme="dark"] .preview-stats span>i {
  background: rgba(166, 132, 239, .12);
  color: #c5b1ff
}

html[data-theme="dark"] .preview-stats small {
  color: #9ca7b8
}

.trust-strip {
  position: relative;
  margin: 0 auto 0.9375rem;
  padding: 0.625rem;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--soft-line);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 16px 45px rgba(46, 60, 87, .05)
}

.trust-strip article {
  min-height: 4.75rem;
  padding: 0.625rem 1.25rem
}

.trust-strip article:first-child {
  padding-left: 1.25rem
}

.trust-strip article>i {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.6875rem
}

.trust-strip article b {
  font-size: 0.8125rem
}

.trust-strip article small {
  font-size: 0.625rem
}

html[data-theme="dark"] .trust-strip {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14)
}

@media(max-width:1040px) {
  .marketing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 3rem
  }

  .hero-copy {
    max-width: 47.5rem
  }

  .ai-preview {
    max-width: 45rem
  }

  .trust-strip {
    grid-template-columns: 1fr 1fr
  }

  .trust-strip article:nth-child(2) {
    border-right: 0
  }
}

@media(max-width:760px) {
  .marketing-hero {
    padding-top: 3.625rem;
    padding-bottom: 2.75rem
  }

  .hero-copy h1 {
    font-size: 3rem
  }

  .trust-strip {
    grid-template-columns: 1fr;
    padding: 0.4375rem
  }

  .trust-strip article {
    border-right: 0;
    padding: 0.8125rem 0.625rem
  }

  .trust-strip article:first-child {
    padding-left: 0.625rem
  }

  .preview-cards {
    grid-template-columns: 1fr
  }
}

@media(max-width:480px) {
  .marketing-hero {
    grid-template-columns: minmax(0, 1fr)
  }

  .hero-copy h1 {
    font-size: 2.5rem
  }

  .hero-copy h1 span {
    display: inline
  }

  .hero-copy .hero-actions {
    display: grid;
    grid-template-columns: 1fr
  }

  .hero-copy .hero-actions .btn {
    justify-content: center
  }

  .hero-pills {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .hero-pills span:last-child {
    grid-column: 1/-1
  }

  .ai-preview {
    padding: 1.0625rem
  }

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

  .preview-stats span:last-child {
    grid-column: 1/-1
  }
}

.preview-top>b i {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none
}

/* Feature showcase refinement */
.feature-showcase {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 7.5rem
}

.feature-showcase:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5rem;
  transform: translateX(-50%);
  width: 42.5rem;
  height: 20rem;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(112, 86, 201, .07), transparent 68%);
  filter: blur(8px);
  z-index: -1
}

.feature-showcase .section-head {
  margin-bottom: 3rem
}

.feature-showcase .section-head h2 {
  max-width: 48.75rem;
  margin-left: auto;
  margin-right: auto
}

.feature-showcase .section-head h2 span {
  background: linear-gradient(100deg, #314e7b, #765ac8 58%, #a936cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.feature-showcase .section-head p {
  max-width: 40.625rem
}

.feature-showcase .feature-four {
  gap: 1rem;
  align-items: stretch
}

.feature-showcase .feature-card {
  display: flex;
  flex-direction: column;
  min-height: 18.25rem;
  padding: 1.375rem;
  border-radius: 1.375rem;
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(73, 88, 119, .1);
  box-shadow: 0 16px 48px rgba(43, 57, 87, .055);
  isolation: isolate
}

.feature-showcase .feature-card:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(22, 197, 214, .22), transparent 38%, rgba(132, 82, 211, .2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none
}

.feature-showcase .feature-card:after {
  right: -2.625rem;
  bottom: -3.25rem;
  width: 9.0625rem;
  height: 9.0625rem;
  background: radial-gradient(circle, rgba(113, 85, 202, .09), transparent 68%);
  z-index: -1
}

.feature-showcase .feature-card:hover:before {
  opacity: 1
}

.feature-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.feature-showcase .feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, rgba(17, 195, 212, .13), rgba(126, 83, 209, .15));
  color: #7255c8;
  font-size: 0.9375rem
}

.feature-card-top small {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #9aa3b3
}

.feature-card-body {
  margin-top: 2.875rem
}

.feature-showcase .feature-card h3 {
  margin: 0 0 0.8125rem;
  font-size: 1.3125rem;
  line-height: 1.15;
  letter-spacing: -.025em
}

.feature-showcase .feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.7
}

.feature-card-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.5rem;
  color: #667287;
  font-size: 0.625rem;
  font-weight: 700
}

.feature-card-foot i {
  width: 1.1875rem;
  height: 1.1875rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 190, 177, .11);
  color: #1aa895;
  font-size: 0.5rem
}

html[data-theme="dark"] .feature-showcase:before {
  background: radial-gradient(ellipse, rgba(119, 88, 214, .1), transparent 68%)
}

html[data-theme="dark"] .feature-showcase .section-head h2 span {
  background: linear-gradient(100deg, #bbcaf0, #b9a7ff 55%, #dd8bed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .feature-showcase .feature-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .047), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .075);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12)
}

html[data-theme="dark"] .feature-showcase .feature-icon {
  background: linear-gradient(135deg, rgba(20, 197, 213, .13), rgba(139, 91, 220, .19));
  color: #c3aeff
}

html[data-theme="dark"] .feature-card-top small {
  color: #68758b
}

html[data-theme="dark"] .feature-card-foot {
  color: #98a4b8
}

html[data-theme="dark"] .feature-card-foot i {
  background: rgba(34, 205, 184, .1);
  color: #54d6c4
}

@media(max-width:1040px) {
  .feature-showcase .feature-four {
    grid-template-columns: 1fr 1fr
  }

  .feature-showcase .feature-card {
    min-height: 16.875rem
  }
}

@media(max-width:620px) {
  .feature-showcase {
    padding-top: 5.125rem;
    padding-bottom: 5.5rem
  }

  .feature-showcase .feature-four {
    grid-template-columns: 1fr
  }

  .feature-showcase .feature-card {
    min-height: 15.3125rem
  }

  .feature-card-body {
    margin-top: 2.125rem
  }
}

/* Workflow timeline refinement */
.workflow-block {
  position: relative;
  grid-template-columns: minmax(0, .88fr) minmax(32.5rem, 1.12fr);
  gap: 5.75rem;
  padding-top: 7.375rem;
  padding-bottom: 7.75rem;
  align-items: center
}

.workflow-copy {
  top: 6.75rem
}

.workflow-copy h2 {
  max-width: 33.75rem;
  font-size: clamp(2.6875rem, 4vw, 3.625rem);
  line-height: 1.07
}

.workflow-copy h2 span {
  display: block;
  background: linear-gradient(100deg, #31517d, #745bc7 56%, #a635cc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.workflow-copy>p {
  max-width: 32.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.8
}

.workflow-note {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--soft-line);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, .48)
}

.workflow-note>i {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, rgba(20, 195, 211, .13), rgba(124, 83, 207, .15));
  color: #7156c8;
  font-size: 0.75rem
}

.workflow-note div {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem
}

.workflow-note b {
  font-size: 0.6875rem
}

.workflow-note small {
  font-size: 0.5625rem;
  color: var(--muted)
}

.workflow-copy .text-link {
  margin-top: 1.5625rem;
  font-size: 0.8125rem
}

.workflow-steps {
  position: relative;
  gap: 0.875rem;
  padding-left: 1.125rem
}

.workflow-line {
  position: absolute;
  left: 2.5rem;
  top: 3rem;
  bottom: 3rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(23, 194, 210, .35), rgba(119, 86, 204, .4), rgba(165, 52, 203, .25));
  z-index: 0
}

.workflow-steps .workflow-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.1875rem;
  min-height: 9.25rem;
  padding: 1.25rem 1.375rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .56);
  border: 1px solid rgba(72, 87, 117, .1);
  box-shadow: 0 15px 42px rgba(44, 57, 86, .045)
}

.workflow-steps .workflow-step:first-of-type {
  padding-top: 1.25rem
}

.step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4375rem
}

.step-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.9375rem;
  background: linear-gradient(135deg, rgba(19, 195, 212, .14), rgba(126, 83, 208, .17));
  color: #7255c8;
  font-size: 0.9375rem;
  box-shadow: 0 7px 20px rgba(82, 72, 151, .08)
}

.step-marker small {
  padding: 0.1875rem 0.4375rem;
  border-radius: 62.4375rem;
  background: var(--panel2);
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .08em
}

.step-content {
  min-width: 0;
  padding-top: 2px
}

.step-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem
}

.workflow-steps .step-heading h3 {
  margin: 0;
  font-size: 1.1875rem;
  letter-spacing: -.025em
}

.step-heading>span {
  flex: 0 0 auto;
  padding: 0.3125rem 0.5rem;
  border-radius: 62.4375rem;
  background: rgba(116, 86, 202, .08);
  color: #7154c5;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em
}

.workflow-steps .step-content>p {
  max-width: 30rem;
  margin: 0.5625rem 0 0.875rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.65
}

.step-result {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: #627086;
  font-size: 0.5625rem;
  font-weight: 750
}

.step-result i {
  color: #7055c5;
  font-size: 0.5rem
}

.workflow-steps .workflow-step:hover {
  transform: translateX(6px);
  box-shadow: 0 20px 52px rgba(52, 62, 91, .09) !important
}

html[data-theme="dark"] .workflow-copy h2 span {
  background: linear-gradient(100deg, #bbc9ef, #baa7ff 55%, #dc8bed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .workflow-note {
  background: rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .workflow-note>i {
  color: #c4afff
}

html[data-theme="dark"] .workflow-steps .workflow-step {
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .075);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12)
}

html[data-theme="dark"] .step-icon {
  background: linear-gradient(135deg, rgba(18, 196, 212, .13), rgba(138, 89, 219, .2));
  color: #c4afff
}

html[data-theme="dark"] .step-marker small {
  background: #111a2a;
  color: #7f8ba0
}

html[data-theme="dark"] .step-heading>span {
  background: rgba(150, 110, 229, .1);
  color: #bda7fa
}

html[data-theme="dark"] .step-result {
  color: #8996aa
}

html[data-theme="dark"] .step-result i {
  color: #b9a4f5
}

@media(max-width:1040px) {
  .workflow-block {
    grid-template-columns: 1fr;
    gap: 3.625rem;
    align-items: start
  }

  .workflow-copy {
    position: static;
    max-width: 43.75rem
  }

  .workflow-steps {
    width: 100%;
    padding-left: 0
  }

  .workflow-line {
    left: 1.375rem
  }
}

@media(max-width:620px) {
  .workflow-block {
    padding-top: 5.25rem;
    padding-bottom: 5.625rem;
    gap: 2.875rem
  }

  .workflow-copy h2 {
    font-size: 2.4375rem
  }

  .workflow-steps .workflow-step {
    grid-template-columns: 3rem 1fr;
    padding: 1.125rem 1rem;
    gap: 0.875rem
  }

  .step-icon {
    width: 2.625rem;
    height: 2.625rem
  }

  .step-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4375rem
  }

  .workflow-line {
    left: 1.25rem
  }

  .workflow-steps .step-content>p {
    font-size: 0.6875rem
  }
}

/* Workflow alignment and overflow fix */
.workflow-block {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
}

.workflow-copy {
  width: 100%;
  max-width: 33.75rem;
  justify-self: center;
  min-width: 0
}

.workflow-copy h2,
.workflow-copy>p {
  max-width: 100%
}

.workflow-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8125rem;
  margin-top: 1.5625rem
}

.workflow-actions .workflow-note {
  margin: 0;
  max-width: 100%;
  box-sizing: border-box
}

.workflow-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(115, 84, 201, .2);
  border-radius: 0.6875rem;
  background: rgba(115, 84, 201, .07);
  color: #7254c8;
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease
}

.workflow-cta i {
  font-size: 0.5625rem;
  transition: transform .2s ease
}

.workflow-cta:hover {
  transform: translateY(-2px);
  background: rgba(115, 84, 201, .11);
  border-color: rgba(115, 84, 201, .32)
}

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

.workflow-line {
  display: none !important
}

.workflow-steps {
  padding-left: 0;
  min-width: 0
}

.workflow-steps .workflow-step {
  min-width: 0
}

.step-content {
  overflow: hidden
}

.step-heading h3 {
  min-width: 0
}

.step-heading>span {
  max-width: 8.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

html[data-theme="dark"] .workflow-cta {
  background: rgba(146, 105, 225, .09);
  border-color: rgba(174, 141, 235, .18);
  color: #c2adfb
}

html[data-theme="dark"] .workflow-cta:hover {
  background: rgba(146, 105, 225, .15);
  border-color: rgba(174, 141, 235, .3)
}

@media(max-width:1040px) {
  .workflow-copy {
    justify-self: start;
    max-width: 42.5rem
  }

  .workflow-actions {
    max-width: 22.5rem
  }
}

@media(max-width:620px) {
  .workflow-actions {
    width: 100%
  }

  .workflow-note {
    width: 100%
  }

  .workflow-cta {
    width: 100%;
    white-space: normal
  }

  .step-heading>span {
    max-width: 100%
  }
}

/* Capabilities bento refinement */
.capability-block {
  position: relative;
  padding-top: 7.125rem !important;
  padding-bottom: 7.625rem !important
}

.capability-block:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5.125rem;
  transform: translateX(-50%);
  width: 45rem;
  height: 20.625rem;
  background: radial-gradient(ellipse, rgba(111, 85, 202, .075), transparent 68%);
  filter: blur(7px);
  pointer-events: none;
  z-index: -1
}

.capability-block .section-head {
  margin-bottom: 3.125rem
}

.capability-block .section-head h2 {
  max-width: 49.375rem;
  margin-left: auto;
  margin-right: auto
}

.capability-block .section-head h2 span {
  background: linear-gradient(100deg, #31517e, #765ac8 56%, #a736cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.capability-block .section-head p {
  max-width: 40.625rem
}

.capability-block .capability-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9375rem
}

.capability-block .capability-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 9.875rem;
  padding: 1.1875rem;
  border: 1px solid rgba(73, 87, 117, .1);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 15px 44px rgba(43, 57, 87, .045);
  overflow: hidden;
  isolation: isolate
}

.capability-block .capability-card:nth-child(1),
.capability-block .capability-card:nth-child(2),
.capability-block .capability-card:nth-child(11),
.capability-block .capability-card:nth-child(12) {
  grid-column: span 2
}

.capability-block .capability-card:after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4.0625rem;
  width: 9.375rem;
  height: 9.375rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113, 86, 202, .085), transparent 68%);
  z-index: -1;
  transition: transform .35s ease
}

.capability-block .capability-card:hover:after {
  transform: scale(1.2)
}

.capability-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem
}

.capability-block .capability-icon {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, rgba(17, 196, 213, .14), rgba(125, 84, 209, .16));
  color: #7155c7;
  font-size: 0.875rem
}

.capability-block .capability-badge {
  padding: 0.3125rem 0.4375rem;
  border-radius: 62.4375rem;
  background: rgba(88, 104, 133, .07);
  color: #8a94a5;
  font-size: 0.4375rem;
  font-weight: 850;
  letter-spacing: .1em
}

.capability-block .is-pro .capability-badge {
  background: rgba(126, 83, 209, .1);
  color: #7557c8
}

.capability-copy {
  margin-top: 1.5625rem
}

.capability-copy h3 {
  margin: 0 0 0.4375rem;
  font-size: 1rem;
  letter-spacing: -.02em
}

.capability-copy p {
  max-width: 22.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.625rem;
  line-height: 1.6
}

.capability-arrow {
  position: absolute;
  right: 1.125rem;
  bottom: 1.0625rem;
  width: 1.5625rem;
  height: 1.5625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(113, 86, 202, .07);
  color: #7357c7;
  font-size: 0.5rem;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .25s ease, transform .25s ease
}

.capability-card:hover .capability-arrow {
  opacity: 1;
  transform: translateX(0)
}

.capability-card:nth-child(3n+2) .capability-icon {
  background: linear-gradient(135deg, rgba(88, 125, 225, .14), rgba(158, 77, 214, .14))
}

.capability-card:nth-child(3n) .capability-icon {
  background: linear-gradient(135deg, rgba(27, 190, 171, .14), rgba(94, 119, 224, .14))
}

html[data-theme="dark"] .capability-block:before {
  background: radial-gradient(ellipse, rgba(118, 88, 213, .11), transparent 68%)
}

html[data-theme="dark"] .capability-block .section-head h2 span {
  background: linear-gradient(100deg, #bbc9ef, #b9a7ff 55%, #dd8bed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .capability-block .capability-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .046), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .075);
  box-shadow: 0 17px 46px rgba(0, 0, 0, .11)
}

html[data-theme="dark"] .capability-block .capability-icon {
  color: #c3aeff
}

html[data-theme="dark"] .capability-block .capability-badge {
  background: rgba(255, 255, 255, .05);
  color: #7f8ba0
}

html[data-theme="dark"] .capability-block .is-pro .capability-badge {
  background: rgba(150, 107, 226, .11);
  color: #bea8fa
}

html[data-theme="dark"] .capability-arrow {
  background: rgba(149, 109, 225, .1);
  color: #bca7f7
}

@media(max-width:1040px) {
  .capability-block .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .capability-block .capability-card:nth-child(n) {
    grid-column: span 1
  }
}

@media(max-width:620px) {
  .capability-block {
    padding-top: 5.25rem !important;
    padding-bottom: 5.625rem !important
  }

  .capability-block .capability-grid {
    grid-template-columns: 1fr
  }

  .capability-block .capability-card {
    min-height: 9.375rem
  }

  .capability-block .capability-card:nth-child(n) {
    grid-column: 1
  }
}

/* Assistant profile cards refinement */
.assistants-showcase {
  position: relative;
  padding-top: 7.25rem;
  padding-bottom: 7.75rem
}

.assistants-showcase:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5rem;
  transform: translateX(-50%);
  width: 43.75rem;
  height: 20.625rem;
  background: radial-gradient(ellipse, rgba(112, 85, 202, .075), transparent 68%);
  filter: blur(8px);
  z-index: -1
}

.assistants-showcase .section-head {
  margin-bottom: 3.125rem
}

.assistants-showcase .section-head h2 {
  max-width: 47.5rem;
  margin-left: auto;
  margin-right: auto
}

.assistants-showcase .section-head h2 span {
  background: linear-gradient(100deg, #31517e, #765ac8 56%, #a736cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.assistants-showcase .assistant-cards {
  gap: 1.125rem
}

.assistants-showcase .assistant-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 23.875rem;
  padding: 1.5rem;
  border-radius: 1.4375rem;
  background: rgba(255, 255, 255, .61);
  border: 1px solid rgba(73, 87, 117, .1);
  box-shadow: 0 17px 48px rgba(43, 57, 87, .05);
  overflow: hidden;
  isolation: isolate
}

.assistants-showcase .assistant-card:after {
  content: "";
  position: absolute;
  right: -3.625rem;
  bottom: -4.5rem;
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113, 85, 202, .1), transparent 69%);
  z-index: -1;
  transition: transform .35s ease
}

.assistants-showcase .assistant-card:hover:after {
  transform: scale(1.18)
}

.assistants-showcase .recommended {
  border-color: rgba(115, 83, 202, .25);
  box-shadow: 0 20px 55px rgba(94, 73, 178, .08)
}

.assistant-card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem
}

.assistants-showcase .assistant-symbol {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0;
  border-radius: 0.9375rem;
  font-size: 1rem
}

.assistant-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #758196;
  font-size: 0.5625rem;
  font-weight: 750
}

.assistant-status>i {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #31cd8d;
  box-shadow: 0 0 0 4px rgba(49, 205, 141, .1)
}

.assistant-badge {
  position: absolute;
  right: 1.375rem;
  top: 1.5625rem;
  padding: 0.375rem 0.5625rem;
  border-radius: 62.4375rem;
  background: rgba(117, 82, 204, .1);
  color: #7254c6;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .08em
}

.assistant-card-copy {
  margin-top: 2.375rem
}

.assistants-showcase .assistant-card-copy small {
  color: #795cc8;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .11em
}

.assistants-showcase .assistant-card h3 {
  margin: 0.625rem 0 0.75rem;
  font-size: 1.6875rem;
  letter-spacing: -.04em
}

.assistants-showcase .assistant-card p {
  min-height: 4.25rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.7
}

.assistant-tags {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 1.1875rem
}

.assistant-tags span {
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(77, 91, 120, .1);
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .45);
  color: #69758a;
  font-size: 0.5rem;
  font-weight: 750
}

.assistant-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--soft-line);
  color: #6f53c2;
  font-size: 0.625rem;
  font-weight: 850
}

.assistant-link i {
  font-size: 0.5rem;
  transition: transform .2s ease
}

.assistant-link:hover i {
  transform: translateX(4px)
}

.assistant-card:nth-child(2) .assistant-symbol {
  background: linear-gradient(135deg, #1bbdce, #5d7ee0)
}

.assistant-card:nth-child(3) .assistant-symbol {
  background: linear-gradient(135deg, #735bdd, #ae34cd)
}

html[data-theme="dark"] .assistants-showcase:before {
  background: radial-gradient(ellipse, rgba(118, 88, 213, .11), transparent 68%)
}

html[data-theme="dark"] .assistants-showcase .section-head h2 span {
  background: linear-gradient(100deg, #bbc9ef, #b9a7ff 55%, #dd8bed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .assistants-showcase .assistant-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .047), rgba(255, 255, 255, .025));
  border-color: rgba(255, 255, 255, .075);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12)
}

html[data-theme="dark"] .assistants-showcase .recommended {
  border-color: rgba(154, 115, 229, .22)
}

html[data-theme="dark"] .assistant-status {
  color: #8996a9
}

html[data-theme="dark"] .assistant-badge {
  background: rgba(151, 109, 227, .12);
  color: #c0aafb
}

html[data-theme="dark"] .assistant-tags span {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .08);
  color: #939fb2
}

html[data-theme="dark"] .assistant-link {
  color: #bda8f7
}

@media(max-width:900px) {
  .assistants-showcase .assistant-cards {
    grid-template-columns: 1fr
  }

  .assistants-showcase .assistant-card {
    min-height: 20.625rem
  }

  .assistants-showcase .assistant-card p {
    min-height: auto
  }

  .assistant-card-copy {
    margin-top: 1.8125rem
  }
}

@media(max-width:620px) {
  .assistants-showcase {
    padding-top: 5.25rem;
    padding-bottom: 5.625rem
  }

  .assistants-showcase .assistant-card {
    padding: 1.3125rem;
    min-height: 21.875rem
  }

  .assistant-badge {
    right: 1.125rem;
    top: 1.375rem
  }
}

/* Pricing and approval flow refinement */
.pricing-showcase {
  position: relative;
  padding-top: 7.25rem !important;
  padding-bottom: 8rem !important
}

.pricing-showcase:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5.125rem;
  transform: translateX(-50%);
  width: 45rem;
  height: 21.25rem;
  background: radial-gradient(ellipse, rgba(112, 85, 202, .08), transparent 68%);
  filter: blur(8px);
  z-index: -1
}

.pricing-showcase .section-head {
  margin-bottom: 3.25rem
}

.pricing-showcase .section-head h2 {
  max-width: 51.25rem;
  margin-left: auto;
  margin-right: auto
}

.pricing-showcase .section-head h2 span {
  background: linear-gradient(100deg, #31517e, #765ac8 56%, #a736cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.pricing-showcase .section-head p {
  max-width: 44.375rem
}

.pricing-showcase .plan-grid {
  max-width: 61.25rem;
  gap: 1.25rem;
  align-items: stretch
}

.pricing-showcase .plan-card {
  display: flex;
  flex-direction: column;
  min-height: 38.75rem;
  padding: 1.875rem !important;
  border-radius: 1.5625rem !important;
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(72, 87, 117, .11) !important;
  box-shadow: 0 18px 52px rgba(43, 57, 87, .055)
}

.pricing-showcase .pro-plan {
  border-color: rgba(116, 83, 203, .3) !important;
  box-shadow: 0 23px 64px rgba(92, 72, 178, .1)
}

.plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 1.5625rem
}

.pricing-showcase .plan-icon {
  width: 3rem;
  height: 3rem;
  margin: 0;
  border-radius: 0.9375rem
}

.plan-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5625rem;
  border-radius: 62.4375rem;
  background: rgba(28, 183, 157, .09);
  color: #169d87;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .04em
}

.plan-state.approval {
  background: rgba(116, 83, 203, .09);
  color: #7153c5
}

.pricing-showcase .plan-card>small {
  color: #758096;
  font-size: 0.5625rem;
  letter-spacing: .11em
}

.pricing-showcase .price {
  font-size: 3rem;
  margin: 0.9375rem 0 0.5rem
}

.pricing-showcase .plan-card>p {
  min-height: 2.875rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.65
}

.plan-divider {
  height: 1px;
  margin: 1.4375rem 0 1.125rem;
  background: var(--soft-line)
}

.pricing-showcase .plan-grid ul {
  margin: 0 0 1.375rem;
  gap: 0.25rem
}

.pricing-showcase .plan-grid li {
  font-size: 0.75rem;
  padding: 0.4375rem 0
}

.pricing-showcase .plan-grid li i {
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(28, 183, 157, .09);
  color: #159f87;
  font-size: 0.4375rem
}

.pricing-showcase .pro-plan li i {
  background: rgba(116, 83, 203, .09);
  color: #7254c7
}

.pricing-showcase .plan-badge {
  right: 1.375rem;
  top: -0.75rem;
  padding: 0.4375rem 0.6875rem;
  background: linear-gradient(100deg, #6954c5, #9c42ce);
  color: #fff;
  box-shadow: 0 8px 22px rgba(106, 73, 190, .2);
  font-size: 0.5rem
}

.approval-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 1.375rem;
  padding: 0.6875rem;
  border: 1px solid rgba(116, 83, 203, .12);
  border-radius: 0.8125rem;
  background: rgba(116, 83, 203, .045)
}

.approval-flow span {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  color: #758095;
  font-size: 0.5rem;
  font-weight: 750;
  white-space: nowrap
}

.approval-flow span b {
  width: 1.0625rem;
  height: 1.0625rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(116, 83, 203, .11);
  color: #7254c6;
  font-size: 0.4375rem
}

.approval-flow>i {
  color: #a7afbd;
  font-size: 0.375rem
}

.plan-action {
  margin-top: auto
}

.pricing-showcase .plan-action .btn {
  width: 100%;
  text-align: center;
  box-sizing: border-box
}

.pricing-showcase .plan-action>small {
  display: block;
  margin-top: 0.5625rem;
  color: #8a94a5;
  font-size: 0.5rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0
}

.pricing-showcase .pro-plan .plan-action .primary {
  background: linear-gradient(115deg, #15c9d8, #765ee8 55%, #b12bd8);
  box-shadow: 0 10px 28px rgba(101, 79, 195, .18)
}

html[data-theme="dark"] .pricing-showcase:before {
  background: radial-gradient(ellipse, rgba(118, 88, 213, .12), transparent 68%)
}

html[data-theme="dark"] .pricing-showcase .section-head h2 span {
  background: linear-gradient(100deg, #bbc9ef, #b9a7ff 55%, #dd8bed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .pricing-showcase .plan-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .047), rgba(255, 255, 255, .025)) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 19px 52px rgba(0, 0, 0, .13)
}

html[data-theme="dark"] .pricing-showcase .pro-plan {
  border-color: rgba(155, 116, 229, .24) !important
}

html[data-theme="dark"] .plan-state {
  background: rgba(38, 202, 175, .09);
  color: #55d4bd
}

html[data-theme="dark"] .plan-state.approval {
  background: rgba(151, 109, 227, .11);
  color: #c0aafa
}

html[data-theme="dark"] .approval-flow {
  background: rgba(150, 109, 227, .055);
  border-color: rgba(173, 139, 235, .12)
}

html[data-theme="dark"] .approval-flow span {
  color: #929eb1
}

html[data-theme="dark"] .approval-flow span b {
  background: rgba(151, 109, 227, .13);
  color: #c1abfb
}

@media(max-width:900px) {
  .pricing-showcase .plan-grid {
    grid-template-columns: 1fr;
    max-width: 38.75rem
  }

  .pricing-showcase .plan-card {
    min-height: 35.625rem
  }

  .pricing-showcase .plan-card>p {
    min-height: auto
  }
}

@media(max-width:620px) {
  .pricing-showcase {
    padding-top: 5.25rem !important;
    padding-bottom: 5.75rem !important
  }

  .pricing-showcase .plan-card {
    padding: 1.4375rem !important;
    min-height: 0
  }

  .approval-flow {
    grid-template-columns: 1fr;
    gap: 0.4375rem
  }

  .approval-flow>i {
    display: none
  }

  .approval-flow span {
    white-space: normal
  }

  .pricing-showcase .plan-badge {
    right: 1rem
  }
}

/* Simple pricing layout — aligned with supplied reference */
.pricing-showcase .simple-pricing {
  max-width: 61.25rem;
  gap: 1.5rem
}

.pricing-showcase .simple-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 32.5rem;
  padding: 2.125rem !important;
  border-radius: 1.6875rem !important;
  background: rgba(255, 255, 255, .48) !important;
  border: 1px solid rgba(114, 83, 199, .2) !important;
  box-shadow: 0 18px 50px rgba(42, 53, 80, .05);
  overflow: hidden
}

.pricing-showcase .simple-plan:after {
  content: "";
  position: absolute;
  right: -6.25rem;
  bottom: -7.8125rem;
  width: 17.5rem;
  height: 17.5rem;
  border-radius: 50%;
  border: 1px solid rgba(114, 83, 199, .09);
  box-shadow: 0 0 0 34px rgba(114, 83, 199, .025);
  pointer-events: none
}

.pricing-showcase .simple-plan.pro-plan {
  border-color: rgba(116, 83, 203, .38) !important
}

.simple-plan-label {
  align-self: flex-start;
  padding: 0.4375rem 0.6875rem;
  border: 1px solid rgba(114, 83, 199, .23);
  border-radius: 62.4375rem;
  background: rgba(114, 83, 199, .055);
  color: var(--text);
  font-size: 0.625rem;
  font-weight: 800
}

.pricing-showcase .simple-plan .price {
  margin: 1.5rem 0 0.5625rem;
  font-size: 3.0625rem;
  line-height: 1
}

.pricing-showcase .simple-plan .price span {
  font-size: 0.6875rem
}

.pricing-showcase .simple-plan>p {
  min-height: 2.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.65
}

.pricing-showcase .simple-plan ul {
  display: grid;
  gap: 0.5rem;
  margin: auto 0 1.5rem;
  padding: 0
}

.pricing-showcase .simple-plan li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.375rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(75, 88, 116, .12);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, .22);
  font-size: 0.625rem;
  box-sizing: border-box
}

.pricing-showcase .simple-plan li i {
  display: block;
  width: auto;
  height: auto;
  background: none;
  color: #7356c9;
  font-size: 0.5625rem
}

.pricing-showcase .simple-plan>.btn {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.8125rem 1rem;
  border-radius: 0.6875rem;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 850
}

.pricing-showcase .simple-plan>.secondary {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(75, 88, 116, .18)
}

.pricing-showcase .simple-plan>.primary {
  background: linear-gradient(115deg, #18bfd0, #765ee7 58%, #a92fd0);
  box-shadow: 0 10px 26px rgba(99, 78, 191, .18)
}

.pricing-showcase .simple-plan .plan-badge {
  top: 1.25rem;
  right: 1.5rem;
  padding: 0;
  background: none;
  color: #7659c9;
  box-shadow: none;
  font-size: 0.5rem;
  letter-spacing: .1em
}

html[data-theme="dark"] .pricing-showcase .simple-plan {
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .025)) !important;
  border-color: rgba(154, 116, 227, .2) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .12)
}

html[data-theme="dark"] .pricing-showcase .simple-plan.pro-plan {
  border-color: rgba(157, 117, 231, .34) !important
}

html[data-theme="dark"] .simple-plan-label {
  background: rgba(151, 109, 226, .09);
  border-color: rgba(177, 142, 236, .18)
}

html[data-theme="dark"] .pricing-showcase .simple-plan li {
  background: rgba(255, 255, 255, .018);
  border-color: rgba(255, 255, 255, .1)
}

html[data-theme="dark"] .pricing-showcase .simple-plan>.secondary {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .14)
}

html[data-theme="dark"] .pricing-showcase .simple-plan .plan-badge {
  color: #c2adfa
}

@media(max-width:900px) {
  .pricing-showcase .simple-plan {
    min-height: 31.25rem
  }
}

@media(max-width:620px) {
  .pricing-showcase .simple-plan {
    min-height: 30rem;
    padding: 1.5625rem !important
  }

  .pricing-showcase .simple-plan .plan-badge {
    top: 1.125rem;
    right: 1.125rem
  }

  .pricing-showcase .simple-plan .price {
    font-size: 2.6875rem
  }
}

/* Footer dark-theme color correction */
.footer-contact-link i {
  color: inherit !important
}

html[data-theme="dark"] .marketing-footer {
  background: #0b1220;
  color: #f1f4fa;
  border-top-color: rgba(126, 91, 214, .22)
}

html[data-theme="dark"] .marketing-footer strong {
  color: #f2f5fa
}

html[data-theme="dark"] .marketing-footer p,
html[data-theme="dark"] .marketing-footer a,
html[data-theme="dark"] .marketing-footer .footer-contact-link {
  color: #98a4b7
}

html[data-theme="dark"] .marketing-footer .footer-column>a:hover {
  color: #c5b1ff
}

html[data-theme="dark"] .marketing-footer .social {
  background: #121c2c;
  border-color: rgba(151, 119, 222, .14)
}

html[data-theme="dark"] .marketing-footer .social:hover {
  background: #18243a;
  border-color: rgba(151, 119, 222, .3)
}

html[data-theme="dark"] .marketing-footer .footer-bottom {
  border-top-color: rgba(142, 115, 205, .16);
  color: #7f8ca0
}

html[data-theme="dark"] .marketing-footer .footer-bottom a:hover {
  color: #bda8f7
}

/* Clean hero CTA and Mery-style theme icons */
.hero-copy .hero-actions .primary {
  background: #7657d6 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 8px 20px rgba(76, 58, 151, .22) !important;
  color: #fff;
  isolation: isolate
}

.hero-copy .hero-actions .primary:hover {
  background: #8263df !important;
  box-shadow: 0 10px 24px rgba(76, 58, 151, .28) !important
}

.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(120, 130, 151, .2);
  color: var(--text)
}

.theme-toggle .theme-icon {
  width: 1.125rem;
  height: 1.125rem;
  line-height: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.theme-toggle:hover {
  background: rgba(116, 84, 202, .08);
  border-color: rgba(116, 84, 202, .28)
}

html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, .5);
  border-color: rgba(46, 58, 80, .12);
  color: #172033
}

html[data-theme="light"] .theme-toggle:hover {
  background: #fff;
  border-color: rgba(116, 84, 202, .25)
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .12);
  color: #edf1f8
}

/* Unified theme-aware action buttons */
:root {
  --brand-action-gradient: linear-gradient(115deg, #19bed0 0%, #706ee4 52%, #a832cf 100%)
}

.start-btn,
.hero-copy .hero-actions .primary,
.pricing-showcase .simple-plan.pro-plan>.primary {
  background: var(--brand-action-gradient) !important;
  background-image: var(--brand-action-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(94, 73, 184, .2) !important
}

.start-btn:hover,
.hero-copy .hero-actions .primary:hover,
.pricing-showcase .simple-plan.pro-plan>.primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 11px 28px rgba(94, 73, 184, .28) !important
}

.pricing-showcase .simple-plan.free-plan>.secondary {
  background: rgba(112, 86, 201, .07) !important;
  border: 1px solid rgba(112, 86, 201, .27) !important;
  color: #664bb8 !important;
  box-shadow: none !important
}

.pricing-showcase .simple-plan.free-plan>.secondary:hover {
  background: rgba(112, 86, 201, .12) !important;
  border-color: rgba(112, 86, 201, .4) !important;
  color: #583cae !important
}

html[data-theme="dark"] .pricing-showcase .simple-plan.free-plan>.secondary {
  background: rgba(148, 108, 225, .09) !important;
  border-color: rgba(174, 141, 235, .23) !important;
  color: #c4b0fb !important
}

html[data-theme="dark"] .pricing-showcase .simple-plan.free-plan>.secondary:hover {
  background: rgba(148, 108, 225, .15) !important;
  border-color: rgba(174, 141, 235, .36) !important;
  color: #d2c2ff !important
}

/* Stable hover states for hero actions */
.start-btn,
.hero-copy .hero-actions .primary,
.pricing-showcase .simple-plan.pro-plan>.primary {
  filter: none !important;
  transition: transform .18s ease, box-shadow .18s ease !important
}

.start-btn:hover,
.hero-copy .hero-actions .primary:hover,
.pricing-showcase .simple-plan.pro-plan>.primary:hover {
  filter: none !important;
  background: var(--brand-action-gradient) !important;
  background-image: var(--brand-action-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(94, 73, 184, .28) !important
}

.hero-copy .hero-actions .how-it-works-btn {
  background: #f1edfb !important;
  border: 1px solid #d8cff0 !important;
  color: #654ab5 !important;
  box-shadow: none !important
}

.hero-copy .hero-actions .how-it-works-btn:hover {
  background: #e9e2f8 !important;
  border-color: #c8bae9 !important;
  color: #583ba9 !important;
  box-shadow: 0 7px 18px rgba(91, 65, 166, .09) !important;
  transform: translateY(-1px)
}

.hero-copy .hero-actions .how-it-works-btn i {
  color: inherit
}

html[data-theme="dark"] .hero-copy .hero-actions .how-it-works-btn {
  background: rgba(147, 107, 223, .09) !important;
  border-color: rgba(177, 144, 235, .2) !important;
  color: #c3aff9 !important
}

html[data-theme="dark"] .hero-copy .hero-actions .how-it-works-btn:hover {
  background: rgba(147, 107, 223, .16) !important;
  border-color: rgba(177, 144, 235, .34) !important;
  color: #d2c3ff !important;
  box-shadow: 0 8px 20px rgba(28, 20, 53, .2) !important
}

/* Account access */
html.auth-page,
html.auth-page body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none
}

html.auth-page #app {
  height: 100%;
  min-height: 0;
  overflow: hidden
}

.account-gate {
  height: 100dvh;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #f5f4f0;
  color: #152036;
  isolation: isolate
}

.account-gate:before,
.account-gate:after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none
}

.account-gate:before {
  width: 36.25rem;
  height: 36.25rem;
  left: -18.125rem;
  top: -13.125rem;
  background: radial-gradient(circle, rgba(26, 193, 213, .14), rgba(119, 84, 202, .07) 48%, transparent 72%)
}

.account-gate:after {
  width: 38.75rem;
  height: 38.75rem;
  right: -18.75rem;
  bottom: -20.625rem;
  background: radial-gradient(circle, rgba(157, 63, 216, .13), rgba(51, 169, 211, .06) 50%, transparent 72%)
}

.account-shell {
  width: min(70rem, calc(100% - 3rem));
  height: 100%;
  min-height: 0;
  margin: auto;
  padding: clamp(1.25rem, 5vh, 3rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(21.25rem, .75fr);
  gap: 5.5rem;
  align-items: center
}

.account-intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.25rem
}

.account-brand {
  display: block;
  width: max-content;
  line-height: 0
}

.account-logo {
  width: 16.25rem;
  height: auto;
  display: block
}

.account-logo-dark {
  display: none
}

.account-copy {
  max-width: 41.25rem
}

.account-kicker,
.account-form-kicker {
  display: block;
  color: #7554ca;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: .16em
}

.account-copy h1 {
  max-width: 40.625rem;
  margin: 1.125rem 0 1.125rem;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.06em;
  color: #111b2f
}

.account-copy p {
  max-width: 38.75rem;
  margin: 0;
  color: #66728a;
  font-size: 1rem;
  line-height: 1.75
}

.account-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5625rem;
  margin-top: 1.75rem
}

.account-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 0.8125rem;
  border: 1px solid rgba(68, 79, 105, .13);
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .56);
  color: #59667d;
  font-size: 0.6875rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(36, 45, 64, .04)
}

.account-benefits i {
  color: #7759cc
}

.account-card {
  width: 100%;
  padding: 1.375rem 1.75rem 1.75rem;
  border: 1px solid rgba(116, 85, 198, .2);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 28px 75px rgba(44, 37, 70, .13);
  backdrop-filter: blur(22px)
}

.account-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 0.875rem;
  color: #718097;
  font-size: 0.625rem;
  font-weight: 700
}

.account-back:hover {
  color: #7052c5
}

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3125rem;
  padding: 0.25rem;
  margin-bottom: 1.9375rem;
  border-radius: 0.75rem;
  background: rgba(29, 38, 57, .045)
}

.account-tabs a {
  padding: 0.625rem 0.75rem;
  border-radius: 0.5625rem;
  color: #7a8495;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition: .2s ease
}

.account-tabs a:hover {
  color: #59428f
}

.account-tabs a.active {
  background: #fff;
  color: #172136;
  box-shadow: 0 5px 16px rgba(38, 35, 54, .08)
}

.account-form-kicker {
  margin-bottom: 0.5625rem;
  font-size: 0.625rem
}

.account-form h2 {
  margin: 0;
  font-size: 1.5625rem;
  line-height: 1.15;
  letter-spacing: -.035em;
  color: #172136
}

.account-form>p {
  margin: 0.5625rem 0 1.4375rem;
  color: #778196;
  font-size: 0.75rem;
  line-height: 1.55
}

.account-fields {
  display: grid;
  gap: 0.875rem
}

.account-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem
}

.account-field label {
  display: block;
  margin: 0 0 0.4375rem;
  color: #4e5b70;
  font-size: 0.625rem;
  font-weight: 700
}

.account-field input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.8125rem;
  border: 1px solid rgba(55, 69, 94, .14);
  border-radius: 0.625rem;
  outline: none;
  background: rgba(255, 255, 255, .55);
  color: #172136;
  font: inherit;
  font-size: 0.75rem;
  transition: border-color .2s, box-shadow .2s, background .2s
}

.account-field input::placeholder {
  color: #9aa3b2
}

.account-field input:focus {
  border-color: rgba(117, 83, 204, .55);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(117, 83, 204, .1)
}

.password-control {
  position: relative
}

.password-control input {
  padding-right: 2.75rem
}

.password-toggle {
  position: absolute;
  right: 0.3125rem;
  top: 50%;
  width: 2.125rem;
  height: 2.125rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #7d899d;
  cursor: pointer
}

.password-toggle:hover {
  background: rgba(116, 84, 202, .08);
  color: #7052c5
}

.account-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  margin-top: 1.0625rem;
  color: #69758a;
  font-size: 0.625rem;
  line-height: 1.5;
  cursor: pointer
}

.account-consent input {
  width: 0.9375rem;
  height: 0.9375rem;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: #7655ce;
  cursor: pointer
}

.account-legal-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: #7052c5;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer
}

.account-legal-link:hover {
  color: #9a32cf
}

.account-submit {
  width: 100%;
  min-height: 2.875rem;
  margin-top: 1.375rem;
  padding: 0 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  border: 0;
  border-radius: 0.6875rem;
  background: linear-gradient(100deg, #20bfd3 0%, #547ee2 48%, #a72bd6 100%);
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(103, 67, 199, .22);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s
}

.account-submit:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 16px 34px rgba(103, 67, 199, .29)
}

.account-submit:focus-visible,
.account-tabs a:focus-visible,
.account-back:focus-visible,
.password-toggle:focus-visible {
  outline: 3px solid rgba(36, 188, 213, .3);
  outline-offset: 2px
}

.account-auth-divider {
  height: 1.5625rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #9aa3b1;
  font-size: 0.5rem
}

.account-auth-divider:before,
.account-auth-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(67, 80, 104, .09)
}

.account-passkey-login {
  width: 100%;
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  border: 1px solid rgba(61, 75, 101, .13);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, .5);
  color: #344157;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease
}

.account-passkey-login i {
  color: #7054c6;
  font-size: 0.8125rem
}

.account-passkey-login:hover {
  border-color: rgba(112, 84, 199, .28);
  background: #fff;
  transform: translateY(-1px)
}

.account-passkey-login:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none
}

html[data-theme="dark"] .account-gate {
  background: #0b1220;
  color: #f4f6fb
}

html[data-theme="dark"] .account-gate:before {
  background: radial-gradient(circle, rgba(27, 189, 210, .13), rgba(91, 76, 183, .08) 48%, transparent 72%)
}

html[data-theme="dark"] .account-gate:after {
  background: radial-gradient(circle, rgba(151, 56, 211, .13), rgba(38, 145, 191, .06) 50%, transparent 72%)
}

html[data-theme="dark"] .account-logo-light {
  display: none
}

html[data-theme="dark"] .account-logo-dark {
  display: block
}

html[data-theme="dark"] .account-kicker,
html[data-theme="dark"] .account-form-kicker {
  color: #bda8ff
}

html[data-theme="dark"] .account-copy h1,
html[data-theme="dark"] .account-form h2 {
  color: #f5f7fc
}

html[data-theme="dark"] .account-copy p {
  color: #9ba8bc
}

html[data-theme="dark"] .account-benefits span {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .09);
  color: #aeb8c8;
  box-shadow: none
}

html[data-theme="dark"] .account-benefits i {
  color: #c3aeff
}

html[data-theme="dark"] .account-card {
  background: rgba(17, 25, 39, .8);
  border-color: rgba(154, 116, 227, .22);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .34)
}

html[data-theme="dark"] .account-back {
  color: #8491a6
}

html[data-theme="dark"] .account-back:hover {
  color: #c5b1ff
}

html[data-theme="dark"] .account-tabs {
  background: rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .account-tabs a {
  color: #8793a7
}

html[data-theme="dark"] .account-tabs a:hover {
  color: #d0c3fa
}

html[data-theme="dark"] .account-tabs a.active {
  background: rgba(255, 255, 255, .07);
  color: #f3f5fa;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18)
}

html[data-theme="dark"] .account-form>p {
  color: #8f9caf
}

html[data-theme="dark"] .account-field label {
  color: #aab4c4
}

html[data-theme="dark"] .account-field input {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .1);
  color: #edf1f7
}

html[data-theme="dark"] .account-field input::placeholder {
  color: #667388
}

html[data-theme="dark"] .account-field input:focus {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(166, 132, 239, .55);
  box-shadow: 0 0 0 3px rgba(146, 105, 225, .11)
}

html[data-theme="dark"] .password-toggle {
  color: #8794a8
}

html[data-theme="dark"] .password-toggle:hover {
  background: rgba(150, 109, 226, .12);
  color: #c5b1ff
}

html[data-theme="dark"] .account-consent {
  color: #929db0
}

html[data-theme="dark"] .account-legal-link {
  color: #c0aafa
}

html[data-theme="dark"] .account-auth-divider:before,
html[data-theme="dark"] .account-auth-divider:after {
  background: rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .account-passkey-login {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035);
  color: #e5e9f0
}

html[data-theme="dark"] .account-passkey-login:hover {
  border-color: rgba(174, 140, 235, .24);
  background: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .account-passkey-login i {
  color: #c3aff9
}

.legal-modal-back {
  z-index: 100;
  padding: 1.5rem;
  background: rgba(5, 9, 16, .76);
  backdrop-filter: blur(8px)
}

.legal-modal {
  width: min(38.75rem, 100%);
  max-height: min(45rem, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-color: rgba(151, 115, 229, .24);
  background: #f8f7f4;
  color: #172136
}

.legal-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5625rem 1.625rem 1.125rem;
  border-bottom: 1px solid rgba(55, 69, 94, .1)
}

.legal-modal-head span {
  color: #7655ca;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: .16em
}

.legal-modal-head h2 {
  margin: 0.4375rem 0 0;
  font-size: 1.4375rem;
  letter-spacing: -.035em
}

.legal-modal-close {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(55, 69, 94, .12);
  border-radius: 0.625rem;
  background: #fff;
  color: #6d7788;
  cursor: pointer
}

.legal-modal-content {
  padding: 1.25rem 1.625rem;
  overflow: auto;
  color: #657087;
  font-size: 0.75rem;
  line-height: 1.65
}

.legal-modal-content h3 {
  margin: 1.125rem 0 0.3125rem;
  color: #263249;
  font-size: 0.8125rem
}

.legal-modal-content p {
  margin: 0 0 0.5625rem
}

.legal-accept {
  width: auto;
  margin: 1.0625rem 1.625rem 1.5625rem;
  flex: 0 0 auto
}

html[data-theme="dark"] .legal-modal {
  background: #111a29;
  color: #eef2f8
}

html[data-theme="dark"] .legal-modal-head {
  border-bottom-color: rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .legal-modal-close {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  color: #aeb8c8
}

html[data-theme="dark"] .legal-modal-content {
  color: #9da8ba
}

html[data-theme="dark"] .legal-modal-content h3 {
  color: #edf1f7
}

/* AI workspace */
.workspace-layout {
  grid-template-columns: 15.75rem 1fr;
  background: #f6f6f3;
  color: #172136
}

.workspace-sidebar {
  padding: 1.125rem 0.875rem 0.875rem;
  background: rgba(250, 250, 248, .94);
  border-right: 1px solid rgba(49, 63, 89, .1);
  box-shadow: 10px 0 35px rgba(35, 46, 68, .035);
  z-index: 4
}

.workspace-brand {
  height: 2.875rem;
  display: flex;
  align-items: center;
  margin: 0 0.4375rem 1rem;
  overflow: hidden
}

.workspace-logo {
  display: block;
  width: 11.25rem;
  height: auto
}

.workspace-logo-dark {
  display: none
}

.workspace-new-chat {
  height: 2.375rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid rgba(111, 82, 197, .18);
  border-radius: 0.6875rem;
  background: linear-gradient(105deg, rgba(25, 190, 210, .09), rgba(119, 83, 207, .1));
  color: #5f49ad;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease
}

.workspace-new-chat:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 82, 197, .32);
  background: linear-gradient(105deg, rgba(25, 190, 210, .14), rgba(119, 83, 207, .15))
}

.workspace-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem 0.4375rem 0.625rem;
  color: #8791a2;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase
}

.workspace-history-head small {
  min-width: 1.25rem;
  padding: 0.1875rem 0.375rem;
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .08);
  color: #7658c8;
  text-align: center;
  font-size: 0.5rem
}

.workspace-conversations {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  overflow: auto
}

.workspace-conversation {
  min-height: 2.4375rem;
  padding: 0.3125rem 0.375rem 0.3125rem 0.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  color: #667187;
  cursor: pointer;
  outline: none
}

.workspace-conversation>span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600
}

.workspace-conversation>span i {
  color: #909aaa;
  font-size: 0.625rem
}

.workspace-conversation:hover,
.workspace-conversation.active {
  background: rgba(112, 84, 199, .075);
  border-color: rgba(112, 84, 199, .09);
  color: #4f3d93
}

.workspace-conversation.active>span i {
  color: #7657c8
}

.conversation-delete {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #a2aab7;
  opacity: 0;
  cursor: pointer;
  transition: .18s ease
}

.workspace-conversation:hover .conversation-delete,
.workspace-conversation:focus-within .conversation-delete {
  opacity: 1
}

.conversation-delete:hover {
  background: rgba(203, 68, 93, .09);
  color: #c34b60
}

.workspace-empty-history {
  margin: 0.75rem 0.3125rem;
  padding: 1.5625rem 0.75rem;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  border: 1px dashed rgba(74, 88, 115, .13);
  border-radius: 0.8125rem;
  color: #98a1af;
  text-align: center
}

.workspace-empty-history i {
  font-size: 1.0625rem;
  color: #8266ce
}

.workspace-empty-history span {
  font-size: 0.6875rem;
  font-weight: 700
}

.workspace-empty-history small {
  font-size: 0.5625rem
}

.workspace-userbox {
  padding: 0.75rem 0 0;
  border-color: rgba(49, 63, 89, .1)
}

.workspace-userline {
  width: 100%;
  border: 0;
  background: transparent;
  color: #172136;
  text-align: left;
  cursor: pointer
}

.workspace-userline:hover {
  background: rgba(112, 84, 199, .055)
}

.workspace-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.6875rem;
  background: linear-gradient(140deg, #1fc2d3, #7561e4 58%, #a935d3);
  color: #fff;
  box-shadow: 0 7px 18px rgba(91, 75, 187, .18)
}

.workspace-userline .userinfo b {
  font-size: 0.6875rem
}

.workspace-userline .userinfo small {
  color: #798499;
  font-size: 0.5625rem;
  font-weight: 650
}

.account-gear {
  color: #8791a1;
  font-size: 0.75rem
}

.workspace-userline:hover .account-gear {
  color: #7053c5
}

.workspace-usermenu {
  left: 0;
  right: 0;
  bottom: 3.875rem;
  padding: 0.4375rem;
  background: rgba(255, 255, 255, .94);
  border-color: rgba(62, 75, 101, .12);
  box-shadow: 0 18px 45px rgba(35, 43, 66, .15);
  backdrop-filter: blur(18px)
}

.workspace-usermenu button {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  color: #536078;
  font-size: 0.6875rem;
  font-weight: 650;
  cursor: pointer
}

.workspace-usermenu button i {
  width: 0.9375rem;
  color: #8265ce
}

.workspace-usermenu button:hover {
  background: rgba(112, 84, 199, .07);
  color: #4f3c92
}

.workspace-usermenu .logout-action i,
.workspace-usermenu .logout-action {
  color: #bb4b62
}

.workspace-main {
  position: relative;
  background: radial-gradient(circle at 50% 34%, rgba(107, 85, 203, .07), transparent 28rem), radial-gradient(circle at 90% 10%, rgba(26, 190, 210, .055), transparent 24rem), #f7f7f4
}

.workspace-top {
  height: 3.625rem;
  padding: 0 1.3125rem;
  background: rgba(247, 247, 244, .76);
  border-color: rgba(49, 63, 89, .09)
}

.workspace-top>div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #68748a;
  font-size: 0.625rem
}

.workspace-top b {
  font-weight: 700
}

.workspace-status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #25c7af;
  box-shadow: 0 0 0 4px rgba(37, 199, 175, .1)
}

.workspace-theme {
  width: 2.125rem;
  height: 2.125rem
}

.workspace-chat-area {
  padding: 1.875rem 1.375rem 16.25rem;
  scroll-behavior: auto
}

.workspace-messages {
  max-width: 57.5rem
}

.workspace-welcome {
  padding: clamp(3.625rem, 10vh, 7.1875rem) 0.625rem 1.25rem
}

.workspace-orb {
  width: 4.75rem;
  height: 4.75rem;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #7059ec, #5a8ae5 52%, #20bfd0);
  color: #fff;
  font-size: 1.6875rem;
  box-shadow: 0 18px 42px rgba(83, 88, 208, .24), 0 0 50px rgba(31, 191, 208, .12)
}

.workspace-welcome-kicker {
  display: block;
  margin-top: 1.5rem;
  color: #7658c7;
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase
}

.workspace-welcome h1 {
  margin: 0.5rem 0 0.4375rem;
  color: #172136;
  font-size: clamp(1.6875rem, 3.1vw, 2.4375rem);
  letter-spacing: -.045em
}

.workspace-welcome p {
  margin: 0;
  color: #6e7b91;
  font-size: 1rem
}

.workspace-welcome-hint {
  width: max-content;
  max-width: 100%;
  margin: 1.375rem auto 0;
  padding: 0.5625rem 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(112, 84, 199, .11);
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .48);
  color: #7d889a;
  font-size: 0.5625rem
}

.workspace-welcome-hint i {
  color: #8062cc
}

.workspace-composer-wrap {
  left: 15.75rem;
  padding: 1.25rem 1.5rem 1.0625rem;
  background: linear-gradient(transparent, rgba(247, 247, 244, .94) 22%, #f7f7f4 48%)
}

.workspace-composer {
  max-width: 58.75rem;
  padding: 0.5rem 0.5625rem 0.5rem;
  border: 1px solid rgba(92, 76, 151, .17);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 55px rgba(42, 51, 76, .11), 0 0 0 1px rgba(255, 255, 255, .35) inset;
  backdrop-filter: blur(18px)
}

.workspace-composer:focus-within {
  border-color: rgba(112, 83, 203, .38);
  box-shadow: 0 20px 60px rgba(55, 50, 96, .13), 0 0 0 3px rgba(112, 83, 203, .055)
}

.workspace-composer textarea {
  height: auto;
  min-height: 4.875rem;
  max-height: 8.625rem;
  padding: 0.6875rem 0.75rem 0.375rem;
  color: #172136;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  overflow-y: hidden;
  transition: height .12s ease
}

.workspace-composer textarea::placeholder {
  color: #929bac
}

.workspace-composer textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 103, 122, .34) transparent
}

.workspace-composer textarea::-webkit-scrollbar {
  width: 0.3125rem
}

.workspace-composer textarea::-webkit-scrollbar-track {
  margin: 0.5625rem 0;
  background: transparent
}

.workspace-composer textarea::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 62.4375rem;
  background: rgba(92, 103, 122, .32);
  background-clip: padding-box
}

.workspace-composer textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 103, 122, .5);
  background-clip: padding-box
}

html[data-theme="dark"] .workspace-composer textarea {
  scrollbar-color: rgba(184, 194, 209, .26) transparent
}

html[data-theme="dark"] .workspace-composer textarea::-webkit-scrollbar-thumb {
  background: rgba(184, 194, 209, .25);
  background-clip: padding-box
}

html[data-theme="dark"] .workspace-composer textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 194, 209, .42);
  background-clip: padding-box
}

.workspace-compose-actions {
  padding-top: 0.25rem
}

.assistant-select {
  height: 2.375rem;
  max-width: 15.625rem;
  padding: 0 0.6875rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: #415069;
  cursor: pointer
}

.assistant-select>span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.assistant-select b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem
}

.assistant-select>span i {
  width: 1.5625rem;
  height: 1.5625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(28, 190, 210, .13), rgba(117, 84, 207, .14));
  color: #7356c7
}

.assistant-select>i {
  color: #939cab;
  font-size: 0.5rem
}

.assistant-select:hover {
  background: rgba(112, 84, 199, .055)
}

.workspace-tools {
  display: flex;
  align-items: center;
  gap: 0.3125rem
}

.workspace-tool,
.workspace-send {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background: transparent;
  border-color: transparent;
  color: #6d788c;
  cursor: pointer
}

.workspace-tool:hover {
  background: rgba(112, 84, 199, .07);
  color: #7054c5
}

.workspace-send {
  background: linear-gradient(135deg, #20bfd1, #725ee5 58%, #a831d2);
  color: #fff;
  box-shadow: 0 7px 18px rgba(99, 76, 194, .22)
}

.workspace-send:hover {
  transform: translateY(-1px)
}

.workspace-suggestions {
  max-width: 58.75rem;
  margin: 0.75rem auto 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  overflow: auto;
  padding: 0 2px 2px
}

.workspace-suggestions button {
  flex: 0 0 auto;
  padding: 0.5625rem 0.8125rem;
  border: 1px solid rgba(69, 83, 109, .11);
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .6);
  color: #66738a;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 650;
  cursor: pointer
}

.workspace-suggestions button:hover {
  border-color: rgba(112, 84, 199, .25);
  color: #5e47aa;
  background: #fff
}

.workspace-disclaimer {
  display: block;
  margin-top: 0.5625rem;
  color: #9ba3b0;
  font-size: 0.5rem;
  text-align: center
}

.workspace-messages .msg {
  margin: 1.1875rem 0
}

.workspace-messages .bubble {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(70, 83, 109, .1);
  color: #354157;
  box-shadow: 0 8px 24px rgba(41, 50, 70, .045)
}

.workspace-messages .msg.me .bubble {
  background: linear-gradient(135deg, #6755bd, #7952bd);
  border: 0;
  color: #fff
}

.workspace-messages .msg .avatar {
  background: linear-gradient(135deg, rgba(28, 190, 210, .16), rgba(117, 84, 207, .17));
  color: #7052c4
}

html[data-theme="dark"] .workspace-layout {
  background: #0b1220;
  color: #f3f5fa
}

html[data-theme="dark"] .workspace-sidebar {
  background: #0a111d;
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 10px 0 38px rgba(0, 0, 0, .12)
}

html[data-theme="dark"] .workspace-logo-light {
  display: none
}

html[data-theme="dark"] .workspace-logo-dark {
  display: block
}

html[data-theme="dark"] .workspace-new-chat {
  background: linear-gradient(105deg, rgba(26, 190, 210, .1), rgba(126, 89, 217, .13));
  border-color: rgba(157, 127, 226, .17);
  color: #c4b0fb
}

html[data-theme="dark"] .workspace-history-head {
  color: #69768b
}

html[data-theme="dark"] .workspace-history-head small {
  background: rgba(151, 110, 226, .12);
  color: #c0aafa
}

html[data-theme="dark"] .workspace-conversation {
  color: #93a0b4
}

html[data-theme="dark"] .workspace-conversation:hover,
html[data-theme="dark"] .workspace-conversation.active {
  background: rgba(147, 107, 223, .1);
  border-color: rgba(174, 140, 235, .1);
  color: #e2dbf7
}

html[data-theme="dark"] .workspace-conversation.active>span i {
  color: #bca7f8
}

html[data-theme="dark"] .workspace-empty-history {
  border-color: rgba(255, 255, 255, .08);
  color: #6f7d91
}

html[data-theme="dark"] .workspace-userbox {
  border-color: rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .workspace-userline {
  color: #f0f3f8
}

html[data-theme="dark"] .workspace-userline:hover {
  background: rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .workspace-userline .userinfo small {
  color: #8491a5
}

html[data-theme="dark"] .workspace-usermenu {
  background: rgba(16, 24, 38, .96);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
}

html[data-theme="dark"] .workspace-usermenu button {
  color: #aeb8c8
}

html[data-theme="dark"] .workspace-usermenu button:hover {
  background: rgba(148, 108, 224, .1);
  color: #e7e0fb
}

html[data-theme="dark"] .workspace-main {
  background: radial-gradient(circle at 50% 34%, rgba(113, 84, 208, .1), transparent 28rem), radial-gradient(circle at 90% 10%, rgba(25, 188, 207, .06), transparent 24rem), #0d1421
}

html[data-theme="dark"] .workspace-top {
  background: rgba(13, 20, 33, .76);
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .workspace-top>div {
  color: #8996aa
}

html[data-theme="dark"] .workspace-welcome-kicker {
  color: #bda8fa
}

html[data-theme="dark"] .workspace-welcome h1 {
  color: #f5f7fb
}

html[data-theme="dark"] .workspace-welcome p {
  color: #9da8ba
}

html[data-theme="dark"] .workspace-welcome-hint {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .075);
  color: #8794a8
}

html[data-theme="dark"] .workspace-composer-wrap {
  background: linear-gradient(transparent, rgba(13, 20, 33, .94) 22%, #0d1421 48%)
}

html[data-theme="dark"] .workspace-composer {
  background: rgba(17, 25, 40, .88);
  border-color: rgba(158, 126, 226, .17);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .28)
}

html[data-theme="dark"] .workspace-composer:focus-within {
  border-color: rgba(170, 137, 235, .38);
  box-shadow: 0 22px 65px rgba(0, 0, 0, .32), 0 0 0 3px rgba(148, 108, 224, .07)
}

html[data-theme="dark"] .workspace-composer textarea {
  color: #eef2f8
}

html[data-theme="dark"] .workspace-composer textarea::placeholder {
  color: #6e7b90
}

html[data-theme="dark"] .assistant-select {
  color: #b8c2d1
}

html[data-theme="dark"] .assistant-select:hover,
html[data-theme="dark"] .workspace-tool:hover {
  background: rgba(149, 109, 225, .1)
}

html[data-theme="dark"] .workspace-tool {
  color: #97a4b8
}

html[data-theme="dark"] .workspace-suggestions button {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .075);
  color: #929eb1
}

html[data-theme="dark"] .workspace-suggestions button:hover {
  background: rgba(148, 108, 224, .1);
  border-color: rgba(174, 140, 235, .18);
  color: #d6caf6
}

html[data-theme="dark"] .workspace-disclaimer {
  color: #647186
}

html[data-theme="dark"] .workspace-messages .bubble {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .07);
  color: #c7d0de;
  box-shadow: none
}

html[data-theme="dark"] .workspace-messages .msg.me .bubble {
  background: linear-gradient(135deg, #3d326b, #513276);
  color: #f7f5fc
}

@media(max-width:900px) {
  .workspace-layout {
    grid-template-columns: 4.75rem 1fr
  }

  .workspace-sidebar {
    padding: 0.9375rem 0.625rem
  }

  .workspace-brand {
    width: 2.75rem;
    margin: 0 auto 0.9375rem
  }

  .workspace-logo {
    width: 9.625rem;
    max-width: none
  }

  .workspace-new-chat {
    width: 2.75rem;
    margin: 0 auto
  }

  .workspace-new-chat span,
  .workspace-history-head,
  .workspace-conversations,
  .workspace-userline .userinfo,
  .account-gear {
    display: none !important
  }

  .workspace-userbox {
    margin-top: auto
  }

  .workspace-userline {
    justify-content: center;
    padding: 0.4375rem
  }

  .workspace-composer-wrap {
    left: 4.75rem
  }

  .workspace-usermenu {
    left: 3.625rem;
    right: auto;
    bottom: 0;
    width: 11.25rem
  }

  .workspace-chat-area {
    padding-left: 1rem;
    padding-right: 1rem
  }
}

@media(max-width:620px) {
  .workspace-layout {
    grid-template-columns: 3.875rem 1fr
  }

  .workspace-sidebar {
    padding-left: 0.4375rem;
    padding-right: 0.4375rem
  }

  .workspace-brand {
    width: 2.5rem
  }

  .workspace-logo {
    width: 9.0625rem
  }

  .workspace-new-chat {
    width: 2.5rem
  }

  .workspace-composer-wrap {
    left: 3.875rem;
    padding: 0.9375rem 0.6875rem 0.75rem
  }

  .workspace-composer {
    border-radius: 1rem
  }

  .workspace-suggestions {
    justify-content: flex-start
  }

  .workspace-welcome {
    padding-top: 4.375rem
  }

  .workspace-welcome h1 {
    font-size: 1.625rem
  }

  .workspace-welcome-hint {
    display: none
  }

  .workspace-top {
    padding: 0 0.8125rem
  }

  .workspace-top b {
    display: none
  }

  .workspace-chat-area {
    padding-bottom: 15.625rem
  }

  .workspace-disclaimer {
    display: none
  }
}

/* Workspace interaction refinements */
.workspace-sidebar-head {
  height: 2.875rem;
  margin: 0 2px 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.workspace-sidebar-head .workspace-brand {
  min-width: 0;
  flex: 1;
  height: 2.625rem;
  margin: 0
}

.sidebar-toggle {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(70, 83, 109, .11);
  border-radius: 0.5625rem;
  background: rgba(255, 255, 255, .42);
  color: #788397;
  cursor: pointer;
  transition: .18s ease
}

.sidebar-toggle:hover {
  background: #fff;
  border-color: rgba(112, 84, 199, .24);
  color: #7052c5;
  transform: translateX(-1px)
}

.workspace-new-chat {
  width: auto;
  min-width: 0;
  margin: 0 0.3125rem;
  height: 2.25rem;
  padding: 0 0.8125rem;
  justify-content: flex-start
}

.workspace-new-chat i {
  width: 1.375rem;
  text-align: center;
  font-size: 0.75rem
}

.workspace-new-chat span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.workspace-userline {
  cursor: default
}

.workspace-userline:hover {
  background: transparent
}

.account-menu-trigger {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  color: #8791a1;
  cursor: pointer;
  transition: .18s ease
}

.account-menu-trigger:hover,
.account-menu-trigger[aria-expanded="true"] {
  background: rgba(112, 84, 199, .09);
  color: #7053c5;
  transform: rotate(12deg)
}

.workspace-usermenu {
  padding: 0.5625rem;
  border-radius: 1rem
}

.workspace-menu-profile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.5rem 0.625rem
}

.workspace-menu-profile .avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: linear-gradient(140deg, #1fc2d3, #7561e4 58%, #a935d3);
  color: #fff
}

.workspace-menu-profile>div:last-child {
  min-width: 0
}

.workspace-menu-profile b,
.workspace-menu-profile span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.workspace-menu-profile b {
  color: #27334a;
  font-size: 0.625rem
}

.workspace-menu-profile span {
  margin-top: 0.1875rem;
  color: #8993a4;
  font-size: 0.5rem
}

.workspace-menu-separator {
  height: 1px;
  margin: 0.1875rem 0.3125rem;
  background: rgba(56, 69, 94, .09)
}

.workspace-usermenu button {
  min-height: 2.875rem;
  padding: 0.4375rem 0.5625rem
}

.workspace-usermenu button>i {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(112, 84, 199, .07)
}

.workspace-usermenu button>span {
  display: block
}

.workspace-usermenu button b,
.workspace-usermenu button small {
  display: block
}

.workspace-usermenu button b {
  font-size: 0.625rem
}

.workspace-usermenu button small {
  margin-top: 2px;
  color: #929cac;
  font-size: 0.5rem;
  font-weight: 500
}

.workspace-top {
  justify-content: flex-end
}

.workspace-top>div {
  display: none
}

.composer-shell {
  position: relative;
  width: min(58.75rem, 100%);
  margin: auto
}

.workspace-composer-wrap {
  transition: left .24s ease, top .24s ease, bottom .24s ease, transform .24s ease
}

.is-new-conversation .workspace-chat-area {
  padding-bottom: 20.625rem
}

.is-new-conversation .workspace-welcome {
  padding-top: clamp(2.75rem, 8vh, 5.5rem)
}

.is-new-conversation .workspace-composer-wrap {
  top: 48%;
  bottom: auto;
  transform: translateY(48px);
  background: transparent
}

.has-conversation .workspace-composer-wrap {
  top: auto;
  bottom: 0;
  transform: none
}

.assistant-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.625rem);
  z-index: 8;
  width: 17.8125rem;
  padding: 0.5rem;
  border: 1px solid rgba(65, 78, 104, .12);
  border-radius: 0.9375rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 55px rgba(39, 45, 66, .18);
  backdrop-filter: blur(20px)
}

.assistant-popover-title {
  padding: 0.4375rem 0.5625rem 0.5625rem;
  color: #8993a4;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase
}

.assistant-popover button {
  width: 100%;
  min-height: 3.125rem;
  padding: 0.4375rem 0.5625rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: #56637a;
  text-align: left;
  cursor: pointer
}

.assistant-popover button:hover,
.assistant-popover button.active {
  background: rgba(112, 84, 199, .07);
  color: #4e3b91
}

.assistant-popover button>i:first-child {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: linear-gradient(135deg, rgba(26, 190, 210, .13), rgba(116, 83, 204, .15));
  color: #7053c5
}

.assistant-popover button>span {
  min-width: 0;
  flex: 1
}

.assistant-popover button b,
.assistant-popover button small {
  display: block
}

.assistant-popover button b {
  font-size: 0.625rem
}

.assistant-popover button small {
  margin-top: 0.1875rem;
  color: #929cac;
  font-size: 0.5rem
}

.assistant-popover button>i:last-child {
  color: #27b89f;
  font-size: 0.5625rem;
  opacity: 0
}

.assistant-popover button.active>i:last-child {
  opacity: 1
}

.workspace-tool,
.workspace-send {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease
}

.workspace-tool:after,
.workspace-send:after {
  content: "";
  position: absolute;
  inset: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(.3);
  transition: .2s ease
}

.workspace-tool:hover:after,
.workspace-send:hover:after {
  opacity: .07;
  transform: scale(1.7)
}

.mic-tool {
  color: #2c93b6
}

.workspace-send {
  border-radius: 50%;
  background: linear-gradient(145deg, #23bdd0, #6d65e6 58%, #a63ad1);
  box-shadow: 0 8px 22px rgba(89, 78, 197, .25)
}

.workspace-send:hover {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 12px 28px rgba(89, 78, 197, .34)
}

.mic-tool.recording {
  background: rgba(213, 65, 92, .1);
  color: #d34b66;
  animation: micPulse 1.35s ease-in-out infinite
}

@keyframes micPulse {
  50% {
    box-shadow: 0 0 0 7px rgba(211, 75, 102, .08)
  }
}

.workspace-suggestions button {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5625rem 0.75rem;
  transition: .18s ease
}

.workspace-suggestions button i {
  color: #8063ca;
  font-size: 0.5625rem
}

.workspace-suggestions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(49, 57, 82, .07)
}

.sidebar-collapsed {
  grid-template-columns: 4.75rem 1fr
}

.sidebar-collapsed .workspace-sidebar {
  padding-left: 0.625rem;
  padding-right: 0.625rem
}

.sidebar-collapsed .workspace-sidebar-head {
  display: block;
  height: 5.375rem;
  margin: 0
}

.sidebar-collapsed .workspace-brand {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto;
  overflow: hidden
}

.sidebar-collapsed .workspace-logo {
  width: 9.625rem;
  max-width: none
}

.sidebar-collapsed .sidebar-toggle {
  margin: 0.375rem auto 0
}

.sidebar-collapsed .workspace-new-chat {
  width: 2.75rem;
  margin: 0 auto;
  padding: 0;
  justify-content: center
}

.sidebar-collapsed .workspace-new-chat span,
.sidebar-collapsed .workspace-history-head,
.sidebar-collapsed .workspace-empty-history span,
.sidebar-collapsed .workspace-empty-history small,
.sidebar-collapsed .workspace-userline .userinfo {
  display: none
}

.sidebar-collapsed .workspace-conversations {
  align-items: center
}

.sidebar-collapsed .workspace-conversation {
  width: 2.75rem;
  padding: 0.3125rem;
  justify-content: center
}

.sidebar-collapsed .workspace-conversation>span {
  width: 1.75rem;
  justify-content: center;
  font-size: 0
}

.sidebar-collapsed .workspace-conversation>span i {
  font-size: 0.6875rem
}

.sidebar-collapsed .conversation-delete,
.sidebar-collapsed .workspace-avatar {
  display: none
}

.sidebar-collapsed .workspace-userline {
  justify-content: center;
  padding: 0.375rem
}

.sidebar-collapsed .account-menu-trigger {
  display: grid
}

.sidebar-collapsed .workspace-usermenu {
  left: 3.625rem;
  right: auto;
  bottom: 0;
  width: 13.125rem
}

.sidebar-collapsed .workspace-composer-wrap {
  left: 4.75rem
}

html[data-theme="dark"] .sidebar-toggle {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .09);
  color: #8491a5
}

html[data-theme="dark"] .sidebar-toggle:hover {
  background: rgba(151, 110, 225, .1);
  border-color: rgba(174, 140, 235, .17);
  color: #c4b0fa
}

html[data-theme="dark"] .account-menu-trigger:hover,
html[data-theme="dark"] .account-menu-trigger[aria-expanded="true"] {
  background: rgba(150, 109, 225, .11);
  color: #c4b0fa
}

html[data-theme="dark"] .workspace-menu-profile b {
  color: #edf1f7
}

html[data-theme="dark"] .workspace-menu-profile span,
html[data-theme="dark"] .workspace-usermenu button small {
  color: #7f8ca1
}

html[data-theme="dark"] .workspace-menu-separator {
  background: rgba(255, 255, 255, .075)
}

html[data-theme="dark"] .workspace-usermenu button>i {
  background: rgba(151, 110, 225, .1)
}

html[data-theme="dark"] .assistant-popover {
  background: rgba(15, 23, 37, .97);
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34)
}

html[data-theme="dark"] .assistant-popover button {
  color: #aab5c5
}

html[data-theme="dark"] .assistant-popover button:hover,
html[data-theme="dark"] .assistant-popover button.active {
  background: rgba(149, 109, 225, .1);
  color: #ece7fa
}

html[data-theme="dark"] .assistant-popover button small {
  color: #78869a
}

@media(max-width:900px) {
  .workspace-sidebar-head {
    display: block;
    height: 5.375rem;
    margin: 0
  }

  .workspace-sidebar-head .workspace-brand {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto
  }

  .sidebar-toggle {
    margin: 0.375rem auto 0
  }

  .workspace-new-chat {
    padding: 0;
    justify-content: center
  }

  .workspace-userline .workspace-avatar {
    display: none
  }

  .account-menu-trigger {
    display: grid
  }

  .is-new-conversation .workspace-composer-wrap {
    top: 47%;
    transform: translateY(52px)
  }
}

@media(max-width:620px) {
  .is-new-conversation .workspace-composer-wrap {
    top: 46%;
    transform: translateY(60px)
  }

  .workspace-suggestions button {
    padding: 0.5rem 0.6875rem
  }

  .assistant-popover {
    width: min(17.8125rem, calc(100vw - 5.75rem))
  }
}

/* New conversation optical centering */
.is-new-conversation .workspace-welcome {
  padding-top: clamp(2.125rem, 5.5vh, 3.625rem);
  transform: translateX(-126px)
}

.is-new-conversation .workspace-composer-wrap {
  top: 38%;
  transform: translateY(20px)
}

.is-new-conversation .composer-shell {
  transform: translateX(-126px)
}

.sidebar-collapsed.is-new-conversation .workspace-welcome,
.sidebar-collapsed.is-new-conversation .composer-shell {
  transform: translateX(-38px)
}

@media(max-width:900px) {

  .is-new-conversation .workspace-welcome,
  .is-new-conversation .composer-shell,
  .sidebar-collapsed.is-new-conversation .workspace-welcome,
  .sidebar-collapsed.is-new-conversation .composer-shell {
    transform: none
  }

  .is-new-conversation .workspace-welcome {
    padding-top: 2.625rem
  }

  .is-new-conversation .workspace-composer-wrap {
    top: 40%;
    transform: translateY(28px)
  }
}

@media(max-width:620px) {
  .is-new-conversation .workspace-welcome {
    padding-top: 2.125rem
  }

  .is-new-conversation .workspace-composer-wrap {
    top: 42%;
    transform: translateY(26px)
  }
}

@media(max-width:900px) {
  .account-shell {
    width: min(38.75rem, calc(100% - 2.5rem));
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.5rem 0
  }

  .account-intro {
    display: none
  }

  .account-copy h1 {
    font-size: clamp(2.5rem, 8vw, 3.625rem)
  }

  .account-card {
    justify-self: center
  }
}

@media(max-width:560px) {
  .account-shell {
    width: min(100% - 1.75rem, 27.5rem);
    padding: 0.875rem 0;
    align-content: center;
    gap: 0
  }

  .account-logo {
    width: 12.8125rem
  }

  .account-copy {
    display: none
  }

  .account-card {
    padding: 1.125rem 1.125rem 1.375rem;
    border-radius: 1.25rem
  }

  .account-tabs {
    margin-bottom: 1.5625rem
  }

  .account-name-grid {
    grid-template-columns: 1fr
  }
}

@media(max-height:760px) {
  .account-shell {
    padding: 0.875rem 0
  }

  .account-intro {
    gap: 1.5rem
  }

  .account-card {
    padding: 1rem 1.375rem 1.125rem
  }

  .account-back {
    margin-bottom: 0.5625rem
  }

  .account-tabs {
    margin-bottom: 1.125rem
  }

  .account-form-kicker {
    margin-bottom: 0.3125rem
  }

  .account-form>p {
    margin: 0.375rem 0 0.8125rem
  }

  .account-fields {
    gap: 0.5625rem
  }

  .account-field label {
    margin-bottom: 0.25rem
  }

  .account-field input,
  .account-gate .account-field select {
    height: 2.375rem
  }

  .account-consent {
    margin-top: 0.625rem
  }

  .account-submit {
    min-height: 2.5rem;
    margin-top: 0.75rem
  }

  .account-register .account-card {
    padding-top: 0.6875rem;
    padding-bottom: 0.75rem
  }

  .account-register .account-back {
    margin-bottom: 0.3125rem
  }

  .account-register .account-tabs {
    margin-bottom: 0.625rem
  }

  .account-register .account-tabs a {
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem
  }

  .account-register .account-form-kicker {
    margin-bottom: 0.1875rem
  }

  .account-register .account-form h2 {
    font-size: 1.375rem
  }

  .account-register .account-form>p {
    margin: 0.25rem 0 0.5rem;
    line-height: 1.4
  }

  .account-register .account-fields {
    gap: 0.375rem
  }

  .account-register .account-field label {
    margin-bottom: 0.1875rem
  }

  .account-register .account-field input,
  .account-register .account-field select {
    height: 2.125rem
  }

  .account-register .account-consent {
    margin-top: 0.4375rem
  }

  .account-register .account-submit {
    min-height: 2.25rem;
    margin-top: 0.5rem
  }
}

/* Empty chat: shared horizontal axis and compact vertical rhythm */
.is-new-conversation .workspace-welcome,
.sidebar-collapsed.is-new-conversation .workspace-welcome {
  max-width: 58.75rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: clamp(1.5rem, 4vh, 2.75rem);
  transform: none;
  text-align: center
}

.is-new-conversation .composer-shell,
.sidebar-collapsed.is-new-conversation .composer-shell {
  transform: none
}

.is-new-conversation .workspace-welcome-hint {
  margin-top: 0.9375rem
}

.is-new-conversation .workspace-composer-wrap {
  top: clamp(19.375rem, 51vh, 26.875rem);
  bottom: auto;
  transform: none;
  background: transparent
}

@media(max-width:900px) {
  .is-new-conversation .workspace-welcome {
    padding-top: 2rem
  }

  .is-new-conversation .workspace-composer-wrap {
    top: clamp(18.75rem, 49vh, 24.375rem);
    transform: none
  }
}

@media(max-width:620px) {
  .is-new-conversation .workspace-welcome {
    padding-top: 1.5625rem
  }

  .is-new-conversation .workspace-composer-wrap {
    top: clamp(17.8125rem, 48vh, 21.875rem);
    transform: none
  }
}

/* Empty chat stage: keep the complete experience inside one focused area */
.is-new-conversation .workspace-welcome,
.sidebar-collapsed.is-new-conversation .workspace-welcome {
  max-width: 53.75rem;
  padding-top: clamp(6.875rem, 23vh, 14.0625rem)
}

.is-new-conversation .composer-shell,
.sidebar-collapsed.is-new-conversation .composer-shell {
  width: min(53.75rem, 100%)
}

.is-new-conversation .workspace-composer-wrap {
  top: clamp(22.5rem, 51vh, 31.25rem)
}

.is-new-conversation .workspace-suggestions {
  max-width: 53.75rem
}

@media(max-width:900px) {
  .is-new-conversation .workspace-welcome {
    padding-top: clamp(5rem, 16vh, 8.4375rem)
  }

  .is-new-conversation .workspace-composer-wrap {
    top: clamp(20.625rem, 49vh, 24.375rem)
  }

  .is-new-conversation .composer-shell {
    width: min(47.5rem, 100%)
  }
}

@media(max-width:620px) {
  .is-new-conversation .workspace-welcome {
    padding-top: 4.375rem
  }

  .is-new-conversation .workspace-composer-wrap {
    top: clamp(18.75rem, 48vh, 21.875rem)
  }
}

/* Fixed sidebar: center the empty-chat experience on the viewport */
@media(min-width:901px) {
  .is-new-conversation .workspace-composer-wrap {
    left: 0
  }

  .is-new-conversation .workspace-welcome {
    transform: translateX(-126px)
  }
}

@media(max-width:900px) {
  .is-new-conversation .workspace-composer-wrap {
    left: 0
  }

  .is-new-conversation .workspace-welcome {
    transform: translateX(-38px)
  }
}

@media(max-width:620px) {
  .is-new-conversation .workspace-welcome {
    transform: translateX(-31px)
  }
}

/* Anchor the greeting directly above the empty-chat composer */
.is-new-conversation .workspace-welcome {
  position: absolute;
  z-index: 2;
  left: calc(50% - 7.875rem);
  top: clamp(21.875rem, 50vh, 30.625rem);
  width: min(35rem, calc(100% - 2.5rem));
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -100%);
  text-align: center
}

.is-new-conversation .workspace-welcome-hint {
  display: none
}

.is-new-conversation .workspace-welcome-kicker {
  margin-top: 1rem
}

.is-new-conversation .workspace-welcome h1 {
  margin-top: 0.5rem;
  margin-bottom: 0.3125rem
}

.is-new-conversation .workspace-welcome p {
  margin: 0
}

@media(max-width:900px) {
  .is-new-conversation .workspace-welcome {
    left: calc(50% - 2.375rem);
    top: clamp(20rem, 48vh, 23.75rem);
    width: min(32.5rem, calc(100% - 1.625rem));
    padding: 0;
    transform: translate(-50%, -100%)
  }
}

@media(max-width:620px) {
  .is-new-conversation .workspace-welcome {
    left: calc(50% - 1.9375rem);
    top: clamp(18.125rem, 47vh, 21.25rem);
    width: calc(100% - 1.375rem);
    transform: translate(-50%, -100%)
  }

  .is-new-conversation .workspace-welcome h1 {
    font-size: 1.5625rem
  }
}

/* Assistant icons */
.assistant-select>span i,
.assistant-popover button>i:first-child {
  color: inherit
}

/* Top notification panel */
.toast {
  --toast-accent: #7255c7;
  --toast-soft: rgba(112, 84, 199, .1);
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 1.125rem;
  width: min(27.5rem, calc(100% - 1.75rem));
  min-height: 4.5rem;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(69, 82, 108, .12);
  border-radius: 1.1875rem;
  background: rgba(255, 255, 255, .92);
  color: #263249;
  box-shadow: 0 18px 55px rgba(31, 40, 62, .16), 0 1px 0 rgba(255, 255, 255, .8) inset;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -22px) scale(.97);
  transition: opacity .2s ease, transform .32s cubic-bezier(.2, .85, .3, 1), visibility .2s;
  overflow: hidden;
  pointer-events: none
}

.toast:before {
  content: "";
  position: absolute;
  left: 1.125rem;
  right: 1.125rem;
  top: 0;
  height: 2px;
  border-radius: 0 0 62.4375rem 62.4375rem;
  background: linear-gradient(90deg, transparent, var(--toast-accent), transparent);
  opacity: .75
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto
}

.toast-icon {
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 15%, transparent);
  border-radius: 50%;
  background: var(--toast-soft);
  color: var(--toast-accent);
  font-size: 0.875rem
}

.toast-copy {
  min-width: 0
}

.toast-copy b,
.toast-copy span {
  display: block
}

.toast-copy b {
  margin-bottom: 0.1875rem;
  color: #263249;
  font-size: 0.75rem;
  letter-spacing: -.01em
}

.toast-copy span {
  overflow-wrap: anywhere;
  color: #6e798d;
  font-size: 0.6875rem;
  line-height: 1.45
}

.toast-success {
  --toast-accent: #19a98b;
  --toast-soft: rgba(29, 183, 151, .1)
}

.toast-warning {
  --toast-accent: #c88918;
  --toast-soft: rgba(226, 164, 50, .12)
}

.toast-listening {
  --toast-accent: #7054c5;
  --toast-soft: linear-gradient(135deg, rgba(29, 190, 210, .12), rgba(116, 83, 204, .13))
}

.toast-listening .toast-icon i {
  animation: toastMic 1.1s ease-in-out infinite
}

@keyframes toastMic {
  50% {
    transform: scale(1.14)
  }
}

html[data-theme="dark"] .toast {
  background: rgba(15, 23, 37, .9);
  border-color: rgba(255, 255, 255, .09);
  color: #eef2f8;
  box-shadow: 0 20px 65px rgba(0, 0, 0, .32), 0 1px 0 rgba(255, 255, 255, .04) inset
}

html[data-theme="dark"] .toast-copy b {
  color: #eef2f8
}

html[data-theme="dark"] .toast-copy span {
  color: #98a4b7
}

@media(max-width:620px) {
  .toast {
    top: 0.625rem;
    width: calc(100% - 1.25rem);
    min-height: 4.125rem;
    padding: 0.625rem;
    grid-template-columns: 2.375rem 1fr;
    gap: 0.625rem;
    border-radius: 1rem
  }

  .toast-icon {
    width: 2.375rem;
    height: 2.375rem;
    font-size: 0.8125rem
  }

  .toast-copy b {
    font-size: 0.6875rem
  }

  .toast-copy span {
    font-size: 0.625rem
  }
}

/* Admin management */
.admin-intro {
  margin: -0.625rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.8125rem
}

.admin-stat {
  position: relative;
  overflow: hidden
}

.admin-stat-icon {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.875rem;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(26, 190, 210, .12), rgba(116, 83, 204, .15));
  color: #8063ce
}

.admin-stat strong {
  margin-top: 0.3125rem
}

.panel-head>div>small {
  display: block;
  margin-top: 0.3125rem;
  color: var(--muted);
  font-size: 0.625rem
}

.admin-request-list {
  display: grid;
  gap: 1px;
  padding: 0.5rem
}

.admin-request-list article {
  min-height: 4.125rem;
  padding: 0.625rem 0.75rem;
  display: grid;
  grid-template-columns: 2.25rem 1fr auto auto;
  align-items: center;
  gap: 0.6875rem;
  border-radius: 0.6875rem
}

.admin-request-list article:hover {
  background: rgba(112, 84, 199, .05)
}

.admin-request-list .avatar {
  width: 2.125rem;
  height: 2.125rem
}

.admin-request-list b,
.admin-request-list small {
  display: block
}

.admin-request-list b {
  font-size: 0.6875rem
}

.admin-request-list small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.5625rem
}

.admin-empty {
  padding: 2.75rem 1.25rem;
  display: grid;
  justify-items: center;
  gap: 0.4375rem;
  color: var(--muted);
  text-align: center
}

.admin-empty i {
  font-size: 1.5625rem;
  color: #28b69a
}

.admin-empty b {
  color: var(--text);
  font-size: 0.75rem
}

.admin-empty span {
  font-size: 0.625rem
}

.table-scroll {
  overflow: auto
}

.admin-users-table {
  min-width: 55rem
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 0.5625rem
}

.admin-user-cell>span {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: linear-gradient(135deg, #22bfd1, #755fe4 60%, #a432d1);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 850
}

.package-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5625rem;
  background: rgba(78, 91, 116, .07);
  color: var(--muted);
  font-size: 0.5625rem;
  font-weight: 750
}

.package-chip.pro {
  background: rgba(116, 83, 204, .1);
  color: #7455c7
}

.package-chip i {
  font-size: 0.5rem
}

.badge.admin-role {
  background: rgba(116, 83, 204, .11);
  color: #7455c7
}

.admin-settings-grid .settings-card {
  position: relative;
  padding: 1.5625rem
}

.admin-settings-grid .settings-card>p,
.assistant-edit-modal>p {
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.55
}

.settings-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(27, 190, 210, .13), rgba(116, 83, 204, .16));
  color: #7658c9
}

.admin-identity {
  margin: 1.25rem 0;
  padding: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.8125rem
}

.admin-identity>div:nth-child(2) {
  min-width: 0;
  flex: 1
}

.admin-identity b,
.admin-identity small {
  display: block
}

.admin-identity b {
  font-size: 0.6875rem
}

.admin-identity small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.5625rem
}

.admin-permissions {
  display: grid;
  gap: 0.5625rem
}

.admin-permissions span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.625rem
}

.admin-permissions i {
  color: #25b598
}

.assistant-edit-modal {
  width: min(35rem, 100%)
}

.assistant-active-toggle {
  margin: 1.0625rem 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem
}

.assistant-active-toggle input {
  accent-color: #7658ca
}

.assistant-active-toggle b,
.assistant-active-toggle small {
  display: block
}

.assistant-active-toggle b {
  font-size: 0.6875rem
}

.assistant-active-toggle small {
  margin-top: 0.1875rem;
  color: var(--muted);
  font-size: 0.5625rem
}

html[data-theme="dark"] .badge.admin-role,
html[data-theme="dark"] .package-chip.pro {
  background: rgba(151, 110, 226, .13);
  color: #c2adfa
}

html[data-theme="dark"] .admin-request-list article:hover {
  background: rgba(149, 109, 225, .07)
}

@media(max-width:760px) {
  .admin-request-list article {
    grid-template-columns: 2.125rem 1fr auto
  }

  .admin-request-list article>.badge {
    display: none
  }
}

.subscription-settings {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: center;
  gap: 0.875rem
}

.subscription-settings .settings-icon {
  margin: 0
}

.subscription-settings h3,
.subscription-settings p {
  margin: 0
}

.subscription-settings p {
  margin-top: 0.3125rem;
  color: var(--muted);
  font-size: 0.6875rem
}

@media(max-width:620px) {
  .subscription-settings {
    grid-template-columns: 2.5rem 1fr
  }

  .subscription-settings>.btn,
  .subscription-settings>.badge {
    grid-column: 1/-1;
    justify-self: start
  }
}

/* Admin workspace redesign */
.admin-workspace {
  height: 100vh;
  grid-template-columns: 15.75rem 1fr;
  background: #f6f6f3;
  color: #172136;
  overflow: hidden
}

.admin-sidebar {
  height: 100vh;
  padding: 1.125rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  background: rgba(250, 250, 248, .96);
  border-color: rgba(49, 63, 89, .1);
  box-shadow: 10px 0 35px rgba(35, 46, 68, .035)
}

.admin-brand {
  height: 3rem;
  display: flex;
  align-items: center;
  margin: 0 0.4375rem 1.0625rem;
  overflow: hidden
}

.admin-logo {
  display: block;
  width: 11.25rem;
  height: auto
}

.admin-logo-dark {
  display: none
}

.admin-nav {
  display: grid;
  gap: 0.4375rem
}

.admin-nav button {
  height: 2.5rem;
  margin: 0;
  padding: 0 0.75rem;
  align-items: center;
  border: 1px solid rgba(76, 88, 113, .08);
  border-radius: 0.6875rem;
  background: transparent;
  color: #66738a;
  font-size: 0.6875rem;
  font-weight: 720;
  cursor: pointer;
  transition: .18s ease
}

.admin-nav button i {
  width: 1.3125rem;
  color: #8264ce;
  font-size: 0.6875rem;
  text-align: center
}

.admin-nav button:hover {
  background: rgba(112, 84, 199, .055);
  border-color: rgba(112, 84, 199, .12);
  color: #55419d;
  transform: translateX(2px)
}

.admin-nav button.active {
  background: linear-gradient(105deg, rgba(26, 190, 210, .09), rgba(116, 83, 204, .11));
  border-color: rgba(116, 83, 204, .17);
  color: #5843a2;
  box-shadow: 0 8px 22px rgba(68, 56, 119, .06)
}

.admin-sidebar-bottom {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(49, 63, 89, .09)
}

.admin-return {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.6875rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(76, 88, 113, .1);
  border-radius: 0.625rem;
  background: transparent;
  color: #6c778b;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  cursor: pointer
}

.admin-return:hover {
  background: rgba(112, 84, 199, .06);
  border-color: rgba(112, 84, 199, .17);
  color: #5a44a4
}

.admin-return i {
  color: #8163cc
}

.admin-profile {
  margin-top: 0.625rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.6875rem
}

.admin-profile .avatar {
  width: 2.125rem;
  height: 2.125rem;
  background: linear-gradient(140deg, #1fc2d3, #7561e4 58%, #a935d3);
  color: #fff
}

.admin-profile b,
.admin-profile small {
  display: block
}

.admin-profile b {
  font-size: 0.625rem
}

.admin-profile small {
  margin-top: 0.1875rem;
  color: #7f8a9d;
  font-size: 0.5rem
}

.admin-content {
  height: 100vh;
  padding: 1.625rem 1.875rem 2.625rem;
  overflow: auto;
  background: radial-gradient(circle at 90% 2%, rgba(29, 190, 210, .055), transparent 27rem), radial-gradient(circle at 48% 18%, rgba(112, 84, 199, .055), transparent 30rem), #f7f7f4
}

.admin-head {
  height: 3.625rem;
  margin-bottom: 1.4375rem
}

.admin-head small {
  color: #7659c8;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .13em
}

.admin-head h1 {
  margin-top: 0.3125rem;
  color: #172136;
  font-size: 1.6875rem
}

.admin-theme-toggle {
  width: 2.1875rem;
  height: 2.1875rem
}

.admin-intro {
  margin-top: -0.5rem
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6875rem;
  margin-bottom: 1.0625rem
}

.admin-metric {
  position: relative;
  min-height: 8.4375rem;
  padding: 1rem;
  border: 1px solid rgba(67, 80, 105, .1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 12px 32px rgba(41, 50, 72, .045);
  overflow: hidden;
  transition: .2s ease
}

.admin-metric:hover {
  transform: translateY(-3px);
  border-color: rgba(116, 83, 204, .2);
  box-shadow: 0 18px 40px rgba(48, 53, 86, .08)
}

.admin-metric>span {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.875rem;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(25, 190, 210, .12), rgba(116, 83, 204, .15));
  color: #7658c9
}

.admin-metric small,
.admin-metric strong {
  display: block
}

.admin-metric small {
  color: #778399;
  font-size: 0.5625rem
}

.admin-metric strong {
  margin-top: 0.3125rem;
  color: #182238;
  font-size: 1.5625rem;
  letter-spacing: -.04em
}

.admin-metric em {
  position: absolute;
  right: -2.1875rem;
  bottom: -3.125rem;
  width: 7.1875rem;
  height: 7.1875rem;
  border: 1px solid rgba(116, 83, 204, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(116, 83, 204, .025)
}

.admin-demand-panel,
.admin-assistant-panel,
.admin-users-panel {
  background: rgba(255, 255, 255, .64);
  border-color: rgba(67, 80, 105, .1);
  box-shadow: 0 13px 36px rgba(41, 50, 72, .045)
}

.request-actions,
.table-request-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem
}

.btn.reject {
  background: rgba(202, 68, 89, .06);
  border-color: rgba(202, 68, 89, .14);
  color: #b64458
}

.admin-create-btn {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 9px 24px rgba(93, 73, 187, .2)
}

.assistant-admin-cell {
  display: flex;
  align-items: center;
  gap: 0.5625rem
}

.assistant-admin-cell>span {
  width: 1.9375rem;
  height: 1.9375rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: linear-gradient(135deg, rgba(25, 190, 210, .15), rgba(116, 83, 204, .18));
  color: #7053c5
}

.voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #707c91;
  font-size: 0.625rem
}

.voice-chip i {
  color: #8265cd
}

.edit-row-btn {
  background: transparent;
  color: #624bad
}

.admin-user-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem
}

.admin-user-metrics article {
  padding: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(67, 80, 105, .1);
  border-radius: 0.9375rem;
  background: rgba(255, 255, 255, .6)
}

.admin-user-metrics article>span {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(25, 190, 210, .12), rgba(116, 83, 204, .15));
  color: #7557c8
}

.admin-user-metrics small,
.admin-user-metrics strong {
  display: block
}

.admin-user-metrics small {
  color: #7b8698;
  font-size: 0.5625rem
}

.admin-user-metrics strong {
  margin-top: 0.1875rem;
  font-size: 1.25rem
}

.admin-users-table.detailed {
  min-width: 76.875rem
}

.admin-initial {
  width: 1.9375rem;
  height: 1.9375rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: linear-gradient(140deg, #1fc2d3, #7561e4 58%, #a935d3);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 850
}

.mini-action {
  width: 1.6875rem;
  height: 1.6875rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.5625rem;
  cursor: pointer
}

.mini-action.reject {
  background: rgba(202, 68, 89, .08);
  color: #be4a5e
}

.mini-action.approve {
  background: rgba(31, 181, 151, .1);
  color: #19a388
}

.limit-value {
  font-size: 0.625rem
}

.limit-unlimited {
  color: #7658c8;
  font-size: 0.5625rem;
  font-weight: 750
}

.admin-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem
}

.system-card {
  padding: 1.0625rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(67, 80, 105, .1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .6)
}

.system-card>span {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(25, 190, 210, .12), rgba(116, 83, 204, .15));
  color: #7558c8
}

.system-card small {
  color: #7c8799;
  font-size: 0.4375rem;
  font-weight: 850;
  letter-spacing: .1em
}

.system-card h3 {
  margin: 0.3125rem 0 0.1875rem;
  font-size: 0.75rem
}

.system-card p {
  margin: 0;
  color: #8b95a5;
  font-size: 0.5rem
}

.status-online {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #20a98e;
  font-size: 0.5rem
}

.status-online i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #28bea1;
  box-shadow: 0 0 0 4px rgba(40, 190, 161, .08)
}

.limit-modal>p {
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.55
}

.limit-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem
}

.reset-limit {
  width: 100%;
  margin-bottom: 0.875rem;
  background: rgba(116, 83, 204, .06);
  color: #7053c4
}

html[data-theme="dark"] .admin-workspace {
  background: #0b1220;
  color: #eef2f8
}

html[data-theme="dark"] .admin-sidebar {
  background: #0a111d;
  border-color: rgba(255, 255, 255, .07);
  box-shadow: 10px 0 38px rgba(0, 0, 0, .13)
}

html[data-theme="dark"] .admin-logo-light {
  display: none
}

html[data-theme="dark"] .admin-logo-dark {
  display: block
}

html[data-theme="dark"] .admin-nav button {
  border-color: rgba(255, 255, 255, .035);
  color: #8e9bae
}

html[data-theme="dark"] .admin-nav button:hover,
html[data-theme="dark"] .admin-nav button.active {
  background: linear-gradient(105deg, rgba(25, 190, 210, .08), rgba(148, 108, 224, .12));
  border-color: rgba(173, 140, 235, .13);
  color: #ded6f5
}

html[data-theme="dark"] .admin-sidebar-bottom {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .admin-return {
  border-color: rgba(255, 255, 255, .08);
  color: #929eb1
}

html[data-theme="dark"] .admin-return:hover {
  background: rgba(149, 109, 225, .09);
  color: #d6caf5
}

html[data-theme="dark"] .admin-content {
  background: radial-gradient(circle at 90% 2%, rgba(25, 188, 207, .06), transparent 27rem), radial-gradient(circle at 48% 18%, rgba(113, 84, 208, .08), transparent 30rem), #0d1421
}

html[data-theme="dark"] .admin-head h1 {
  color: #f3f6fa
}

html[data-theme="dark"] .admin-metric,
html[data-theme="dark"] .admin-demand-panel,
html[data-theme="dark"] .admin-assistant-panel,
html[data-theme="dark"] .admin-users-panel,
html[data-theme="dark"] .admin-user-metrics article,
html[data-theme="dark"] .system-card {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .075);
  box-shadow: none
}

html[data-theme="dark"] .admin-metric:hover {
  border-color: rgba(174, 140, 235, .19);
  background: rgba(255, 255, 255, .05)
}

html[data-theme="dark"] .admin-metric strong {
  color: #f3f5fa
}

html[data-theme="dark"] .admin-metric small,
html[data-theme="dark"] .admin-user-metrics small {
  color: #8794a8
}

html[data-theme="dark"] .system-card h3 {
  color: #eef2f7
}

@media(max-width:1200px) {
  .admin-metrics {
    grid-template-columns: repeat(3, 1fr)
  }

  .admin-system-grid {
    grid-template-columns: 1fr
  }

  .admin-content {
    padding: 1.5rem 1.25rem 2.25rem
  }
}

@media(max-width:900px) {
  .admin-workspace {
    grid-template-columns: 4.75rem 1fr
  }

  .admin-sidebar {
    padding: 0.875rem 0.625rem
  }

  .admin-brand {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.125rem
  }

  .admin-logo {
    width: 9.625rem;
    max-width: none
  }

  .admin-nav button {
    width: 2.75rem;
    padding: 0;
    justify-content: center;
    margin: auto
  }

  .admin-nav button span,
  .admin-return span,
  .admin-profile>div:not(.avatar) {
    display: none
  }

  .admin-nav button i {
    width: auto
  }

  .admin-sidebar-bottom {
    display: grid;
    justify-items: center
  }

  .admin-return {
    width: 2.75rem;
    justify-content: center
  }

  .admin-profile {
    padding: 0.5rem 0
  }

  .admin-user-metrics {
    grid-template-columns: 1fr
  }

  .admin-metrics {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:620px) {
  .admin-content {
    padding: 1.125rem 0.75rem 1.875rem
  }

  .admin-metrics {
    grid-template-columns: 1fr 1fr
  }

  .admin-metric {
    min-height: 7.1875rem
  }

  .admin-head h1 {
    font-size: 1.4375rem
  }

  .limit-form-grid {
    grid-template-columns: 1fr
  }
}

.admin-profile>div:nth-child(2) {
  min-width: 0;
  flex: 1
}

.admin-profile>button {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  color: #7c889b;
  cursor: pointer;
  transition: .18s ease
}

.admin-profile>button:hover {
  background: rgba(112, 84, 199, .09);
  color: #6f52c3;
  transform: rotate(18deg)
}

/* User and package management */
.users-page-lead {
  margin: -0.5rem 0 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem
}

.users-page-lead>div>small {
  color: #7255c4;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .14em
}

.users-page-lead p {
  max-width: 42.5rem;
  margin: 0.5rem 0 0;
  color: #758197;
  font-size: 0.75rem;
  line-height: 1.65
}

.users-page-lead>span {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(113, 85, 198, .2);
  border-radius: 62.4375rem;
  background: rgba(113, 85, 198, .06);
  color: #654bb0;
  font-size: 0.5625rem;
  font-weight: 760;
  white-space: nowrap
}

.users-page-lead>span i {
  margin-right: 0.3125rem
}

.users-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6875rem;
  margin-bottom: 1.0625rem
}

.users-overview article {
  min-height: 6.625rem;
  padding: 1.0625rem 1.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(67, 80, 105, .11);
  border-radius: 0.9375rem;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 10px 30px rgba(42, 50, 70, .035);
  transition: .2s ease
}

.users-overview article:hover {
  transform: translateY(-2px);
  border-color: rgba(112, 84, 199, .2);
  box-shadow: 0 16px 34px rgba(49, 53, 84, .07)
}

.users-overview small,
.users-overview span {
  color: #7d8798;
  font-size: 0.5rem
}

.users-overview strong {
  margin: 0.5rem 0 0.3125rem;
  color: #192338;
  font-size: 1.5rem;
  line-height: 1
}

.users-control-panel {
  padding: 1.125rem;
  border-color: rgba(112, 84, 199, .16);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 18px 50px rgba(46, 49, 78, .055)
}

.users-control-head {
  padding: 0.1875rem 2px 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem
}

.users-control-head>div>small,
.users-control-head label>span {
  display: block;
  color: #7456c4;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .13em
}

.users-control-head h3 {
  margin: 0.4375rem 0 0;
  font-size: 0.9375rem
}

.users-control-head label {
  width: min(18.125rem, 100%)
}

.users-control-head label>span {
  margin-bottom: 0.4375rem;
  color: #818b9b
}

.users-control-head label>div {
  display: grid;
  grid-template-columns: 1fr 2.375rem;
  gap: 0.4375rem
}

.users-control-head input {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(67, 80, 105, .12);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, .56);
  color: var(--text);
  font: inherit;
  font-size: 0.5625rem;
  outline: 0
}

.users-control-head input:focus {
  border-color: rgba(112, 84, 199, .38);
  box-shadow: 0 0 0 3px rgba(112, 84, 199, .07)
}

.users-control-head button {
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 0.625rem;
  background: rgba(112, 84, 199, .07);
  color: #7052bf;
  cursor: pointer;
  transition: .18s ease
}

.users-control-head button:hover {
  background: linear-gradient(135deg, #22bfd1, #775ee3);
  border-color: transparent;
  color: #fff;
  transform: rotate(18deg)
}

.users-management-table {
  min-width: 66.25rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(67, 80, 105, .1);
  border-radius: 0.8125rem;
  overflow: hidden
}

.users-management-table thead {
  background: rgba(72, 83, 105, .035)
}

.users-management-table th {
  padding: 0.75rem 0.8125rem;
  color: #7f8999;
  font-size: 0.5rem;
  letter-spacing: .06em
}

.users-management-table td {
  padding: 0.6875rem 0.8125rem;
  border-top: 1px solid rgba(67, 80, 105, .08);
  font-size: 0.5625rem
}

.users-management-table tbody tr {
  transition: .16s ease
}

.users-management-table tbody tr:hover {
  background: rgba(112, 84, 199, .035)
}

.management-user {
  min-width: 15.3125rem;
  display: flex;
  align-items: center;
  gap: 0.625rem
}

.management-user>span {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.625rem;
  background: linear-gradient(140deg, rgba(31, 192, 210, .18), rgba(117, 91, 220, .17));
  color: #6e51be;
  font-size: 0.625rem;
  font-weight: 900
}

.management-user b,
.management-user small,
.usage-copy b,
.usage-copy small {
  display: block
}

.management-user b {
  font-size: 0.625rem
}

.management-user small {
  margin-top: 0.25rem;
  color: #808a9b;
  font-size: 0.5rem
}

.user-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #7c8799;
  white-space: nowrap
}

.user-status i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: #8190a5;
  box-shadow: 0 0 0 3px rgba(129, 144, 165, .09)
}

.user-status.active {
  color: #249b84
}

.user-status.active i {
  background: #22bc99;
  box-shadow: 0 0 0 3px rgba(34, 188, 153, .1)
}

.management-plan {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(77, 89, 111, .06);
  color: #788396;
  font-size: 0.5rem;
  font-weight: 750;
  white-space: nowrap
}

.management-plan.pro {
  background: rgba(112, 84, 199, .1);
  color: #6c4fbb
}

.usage-copy {
  min-width: 7rem
}

.usage-copy b {
  font-size: 0.5625rem
}

.usage-copy small {
  margin-top: 0.25rem;
  color: #8993a3;
  font-size: 0.4375rem
}

.user-row-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap
}

.row-action {
  height: 1.8125rem;
  padding: 0 0.5625rem;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 0.5rem;
  background: transparent;
  color: #6e50ba;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 760;
  cursor: pointer;
  transition: .16s ease
}

.row-action:hover {
  transform: translateY(-1px);
  background: rgba(112, 84, 199, .07)
}

.row-action.approve {
  border-color: rgba(27, 170, 141, .22);
  color: #15977e
}

.row-action.reject,
.row-action.cancel {
  border-color: rgba(199, 66, 87, .2);
  color: #b74357
}

.no-request,
.full-access {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .055);
  color: #7f8999;
  font-size: 0.5rem
}

.full-access {
  gap: 0.3125rem;
  background: rgba(112, 84, 199, .1);
  color: #6d50bb;
  font-weight: 760
}

.users-management-table tr[hidden] {
  display: none
}

html[data-theme="dark"] .users-page-lead p {
  color: #8995a8
}

html[data-theme="dark"] .users-page-lead>span {
  border-color: rgba(161, 126, 228, .2);
  background: rgba(141, 102, 218, .08);
  color: #c0a8ef
}

html[data-theme="dark"] .users-overview article,
html[data-theme="dark"] .users-control-panel {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .075);
  box-shadow: none
}

html[data-theme="dark"] .users-overview article:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(167, 132, 232, .17)
}

html[data-theme="dark"] .users-overview strong {
  color: #f1f4f8
}

html[data-theme="dark"] .users-control-head input {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .users-management-table {
  border-color: rgba(255, 255, 255, .075)
}

html[data-theme="dark"] .users-management-table thead {
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .users-management-table td {
  border-color: rgba(255, 255, 255, .055)
}

html[data-theme="dark"] .users-management-table tbody tr:hover {
  background: rgba(156, 116, 229, .045)
}

html[data-theme="dark"] .management-user>span {
  background: linear-gradient(140deg, rgba(31, 192, 210, .15), rgba(151, 105, 224, .2));
  color: #d2c1f4
}

@media(max-width:1000px) {
  .users-overview {
    grid-template-columns: repeat(2, 1fr)
  }

  .users-control-head {
    align-items: flex-start;
    flex-direction: column
  }

  .users-control-head label {
    width: 100%
  }
}

@media(max-width:620px) {
  .users-page-lead {
    align-items: flex-start;
    flex-direction: column
  }

  .users-overview {
    grid-template-columns: 1fr 1fr
  }

  .users-overview article {
    min-height: 5.75rem;
    padding: 0.875rem
  }

  .users-control-panel {
    padding: 0.6875rem
  }
}

/* Admin fixed top bar and softer light table separators */
.admin-content {
  padding: 0 1.875rem 2.625rem
}

.admin-head {
  position: sticky;
  top: 0;
  z-index: 25;
  height: 3.625rem;
  margin: 0 -1.875rem 1.4375rem;
  padding: 0 1.875rem;
  border-bottom: 1px solid rgba(62, 75, 99, .09);
  background: rgba(247, 247, 244, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px)
}

.admin-theme-toggle {
  position: absolute;
  right: 1.875rem;
  top: 0.6875rem
}

.users-management-table th,
.users-management-table td {
  border-bottom: 0
}

.users-management-table thead th {
  border-bottom: 1px solid rgba(76, 88, 110, .09)
}

.users-management-table tbody td {
  border-top: 1px solid rgba(76, 88, 110, .075)
}

.users-management-table tbody tr:first-child td {
  border-top: 0
}

html[data-theme="dark"] .admin-head {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(13, 20, 33, .86)
}

html[data-theme="dark"] .users-management-table thead th {
  border-bottom-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .users-management-table tbody td {
  border-top-color: rgba(255, 255, 255, .055)
}

@media(max-width:1200px) {
  .admin-content {
    padding: 0 1.25rem 2.25rem
  }

  .admin-head {
    margin: 0 -1.25rem 1.4375rem;
    padding: 0 1.25rem
  }

  .admin-theme-toggle {
    right: 1.25rem
  }
}

@media(max-width:620px) {
  .admin-content {
    padding: 0 0.75rem 1.875rem
  }

  .admin-head {
    margin: 0 -0.75rem 1.25rem;
    padding: 0 0.75rem
  }

  .admin-theme-toggle {
    right: 0.75rem
  }
}

/* Usage allowance modal */
.limit-modal-back {
  z-index: 100;
  background: rgba(13, 18, 29, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalFade .18s ease
}

.limit-modal {
  width: min(30rem, 100%);
  padding: 1.75rem 1.875rem 1.875rem;
  border: 1px solid rgba(105, 81, 184, .16);
  border-radius: 1.5rem;
  background: radial-gradient(circle at 50% 0, rgba(28, 192, 210, .085), transparent 150px), #fbfbf9;
  color: #172136;
  text-align: center;
  box-shadow: 0 32px 90px rgba(24, 30, 46, .24);
  animation: modalLift .24s cubic-bezier(.2, .75, .25, 1)
}

.limit-count {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.0625rem;
  padding: 0.5rem;
  display: grid;
  place-items: center;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(29, 190, 210, .1), rgba(114, 83, 204, .12));
  box-shadow: 0 12px 30px rgba(76, 68, 139, .12)
}

.limit-count span {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 1.0625rem;
  background: linear-gradient(140deg, #22bfd1, #7760e2 62%, #a932d1);
  color: #fff;
  font-size: 1.4375rem;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(101, 74, 190, .22)
}

.limit-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  color: #7354c4;
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: .17em
}

.limit-modal h2 {
  margin: 0;
  color: #182238;
  font-size: 1.4375rem;
  letter-spacing: -.035em
}

.limit-modal>p {
  margin: 0.625rem auto 1.4375rem;
  color: #7b8698;
  font-size: 0.6875rem;
  line-height: 1.55
}

.limit-input-group {
  display: block;
  text-align: left
}

.limit-input-group b,
.limit-input-group small {
  display: block
}

.limit-input-group b {
  margin-bottom: 0.5rem;
  color: #273147;
  font-size: 0.625rem
}

.limit-input-group input {
  width: 100%;
  height: 3.25rem;
  border: 1px solid rgba(71, 83, 105, .14);
  border-radius: 0.8125rem;
  background: #f0f0ed;
  color: #172136;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 850;
  text-align: center;
  outline: 0;
  transition: .18s ease
}

.limit-input-group input:focus {
  border-color: rgba(112, 84, 199, .42);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(112, 84, 199, .075)
}

.limit-input-group small {
  margin: 0.5rem 0 1.375rem;
  color: #8993a3;
  font-size: 0.5rem
}

.limit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem
}

.limit-actions button {
  height: 2.75rem;
  border-radius: 0.75rem;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease
}

.limit-cancel {
  border: 1px solid rgba(71, 83, 105, .13);
  background: #f0f0ed;
  color: #273147
}

.limit-cancel:hover {
  background: #e9e9e5;
  transform: translateY(-1px)
}

.limit-save {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 12px 25px rgba(94, 73, 188, .2)
}

.limit-save:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(94, 73, 188, .27)
}

.limit-save i {
  margin-right: 0.3125rem
}

@keyframes modalFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes modalLift {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

html[data-theme="dark"] .limit-modal {
  border-color: rgba(176, 139, 235, .18);
  background: radial-gradient(circle at 50% 0, rgba(27, 190, 210, .09), transparent 150px), #111927;
  color: #eef2f8;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .48)
}

html[data-theme="dark"] .limit-modal h2 {
  color: #f2f4f8
}

html[data-theme="dark"] .limit-modal>p {
  color: #8e9aab
}

html[data-theme="dark"] .limit-input-group b {
  color: #dce2ec
}

html[data-theme="dark"] .limit-input-group input {
  border-color: rgba(255, 255, 255, .085);
  background: #0c1421;
  color: #f2f5f9
}

html[data-theme="dark"] .limit-input-group input:focus {
  border-color: rgba(169, 129, 232, .4);
  background: #0e1726
}

html[data-theme="dark"] .limit-cancel {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #dce2ec
}

html[data-theme="dark"] .limit-cancel:hover {
  background: rgba(255, 255, 255, .07)
}

@media(max-width:520px) {
  .limit-modal {
    padding: 1.5rem 1.125rem;
    border-radius: 1.25rem
  }

  .limit-modal h2 {
    font-size: 1.25rem
  }

  .limit-actions {
    grid-template-columns: 1fr
  }
}

/* Admin visual refinement */
.admin-nav {
  gap: 0.3125rem
}

.admin-nav button {
  height: 2.1875rem;
  padding: 0 0.625rem;
  border-radius: 0.5625rem
}

.admin-nav button i {
  width: 1.1875rem;
  color: currentColor;
  font-size: 0.625rem
}

.admin-return {
  height: 2.125rem
}

.admin-return i {
  color: currentColor
}

.admin-head {
  height: 3rem;
  margin-bottom: 0
}

.admin-head>span {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: #788497;
  font-size: 0.5625rem;
  font-weight: 700
}

.admin-head>span i {
  color: currentColor
}

.admin-theme-toggle {
  top: 0.375rem
}

.admin-page-title {
  padding: 1.5rem 0 1.125rem
}

.admin-page-title small {
  color: #7457c7;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .14em
}

.admin-page-title h1 {
  margin: 0.375rem 0 0;
  color: #172136;
  font-size: 1.6875rem;
  letter-spacing: -.04em
}

.admin-intro {
  margin: 0 0 1.125rem
}

.admin-create-btn.compact {
  height: 2.125rem;
  padding: 0 0.8125rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .18);
  transition: .18s ease
}

.admin-create-btn.compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(93, 73, 187, .25)
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-bottom: 0.875rem
}

.overview-panel {
  padding: 1.1875rem;
  border: 1px solid rgba(67, 80, 105, .1);
  border-radius: 1.0625rem;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 13px 36px rgba(41, 50, 72, .04)
}

.overview-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem
}

.overview-panel-head small {
  color: #7658c8;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.overview-panel-head h3 {
  margin: 0.375rem 0 0;
  font-size: 0.875rem
}

.overview-panel-head>span {
  padding: 0.375rem 0.5625rem;
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .08);
  color: #6d50bb;
  font-size: 0.5rem;
  font-weight: 750
}

.distribution-chart {
  min-height: 10.75rem;
  display: grid;
  grid-template-columns: 9.0625rem 1fr;
  align-items: center;
  gap: 1.25rem
}

.donut {
  width: 7.25rem;
  height: 7.25rem;
  margin: auto;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, #fafaf8 0 55%, transparent 56%), conic-gradient(#755ee0 calc(var(--rate)*1%), #21bfd1 0);
  box-shadow: 0 10px 30px rgba(72, 67, 128, .09)
}

.donut b,
.donut small {
  display: block;
  text-align: center
}

.donut b {
  font-size: 1.5625rem
}

.donut small {
  color: #8490a1;
  font-size: 0.5rem
}

.distribution-list {
  display: grid;
  gap: 0.625rem
}

.distribution-list>div {
  padding: 0.5625rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(75, 87, 108, .07);
  font-size: 0.5625rem
}

.distribution-list>div:last-child {
  border: 0
}

.distribution-list span {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  color: #788396
}

.distribution-list i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%
}

.pro-dot {
  background: #755ee0
}

.free-dot {
  background: #21bfd1
}

.request-dot {
  background: #a534d0
}

.service-list {
  display: grid;
  gap: 0.4375rem;
  margin-top: 1.0625rem
}

.service-list article {
  min-height: 3rem;
  padding: 0.5625rem 0.625rem;
  display: grid;
  grid-template-columns: 1.875rem 1fr auto;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(71, 83, 105, .075);
  border-radius: 0.6875rem;
  background: rgba(75, 87, 108, .025)
}

.service-list article>i {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(112, 84, 199, .08);
  color: #6d50bb
}

.service-list b,
.service-list small {
  display: block
}

.service-list b {
  font-size: 0.5625rem
}

.service-list small {
  margin-top: 0.1875rem;
  color: #8791a1;
  font-size: 0.4375rem
}

.service-list article>span,
.live-status {
  color: #1b9f84 !important;
  background: rgba(28, 170, 141, .08) !important
}

.live-status i {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background: #20b996
}

.overview-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem
}

.overview-shortcuts button {
  min-height: 4rem;
  padding: 0.625rem 0.75rem;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(67, 80, 105, .09);
  border-radius: 0.8125rem;
  background: rgba(255, 255, 255, .55);
  color: #59667a;
  text-align: left;
  cursor: pointer;
  transition: .18s ease
}

.overview-shortcuts button:hover {
  transform: translateY(-2px);
  border-color: rgba(112, 84, 199, .2);
  background: rgba(112, 84, 199, .045)
}

.overview-shortcuts>button>i:first-child {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: linear-gradient(135deg, rgba(31, 190, 210, .12), rgba(112, 84, 199, .14));
  color: currentColor
}

.overview-shortcuts>button>i:last-child {
  font-size: 0.5rem
}

.overview-shortcuts b,
.overview-shortcuts small {
  display: block
}

.overview-shortcuts b {
  color: #263147;
  font-size: 0.5625rem
}

.overview-shortcuts small {
  margin-top: 0.1875rem;
  color: #8792a3;
  font-size: 0.4375rem
}

.assistants-lead {
  margin-bottom: 0.9375rem;
  padding: 0.9375rem 1.0625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border: 1px solid rgba(67, 80, 105, .09);
  border-radius: 0.9375rem;
  background: linear-gradient(105deg, rgba(31, 190, 210, .045), rgba(112, 84, 199, .055))
}

.assistants-lead p {
  margin: 0 0 0.5625rem;
  color: #748095;
  font-size: 0.6875rem
}

.assistants-lead>div>div {
  display: flex;
  gap: 0.4375rem
}

.assistants-lead span {
  padding: 0.3125rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .055);
  color: #788497;
  font-size: 0.5rem
}

.assistants-lead span i {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-right: 0.3125rem;
  border-radius: 50%;
  background: #22b995
}

.assistant-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8125rem
}

.assistant-manage-card {
  position: relative;
  min-height: 16.875rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(67, 80, 105, .1);
  border-radius: 1.0625rem;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 13px 35px rgba(41, 50, 72, .04);
  overflow: hidden;
  transition: .2s ease
}

.assistant-manage-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.1875rem;
  background: linear-gradient(90deg, #21bfd1, #755ee1)
}

.assistant-manage-card.tone-1:before {
  background: linear-gradient(90deg, #755ee1, #a534d0)
}

.assistant-manage-card.tone-2:before {
  background: linear-gradient(90deg, #21bfd1, #a534d0)
}

.assistant-manage-card:hover {
  transform: translateY(-3px);
  border-color: rgba(112, 84, 199, .2);
  box-shadow: 0 18px 42px rgba(49, 53, 84, .08)
}

.assistant-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.assistant-card-icon {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(31, 190, 210, .14), rgba(112, 84, 199, .16));
  color: #263147
}

.assistant-card-top .badge {
  gap: 0.3125rem
}

.assistant-card-top .badge i {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: currentColor
}

.assistant-manage-card>small {
  margin-top: 1.25rem;
  color: #7658c8;
  font-size: 0.5rem;
  font-weight: 800
}

.assistant-manage-card h3 {
  margin: 0.375rem 0 0.5rem;
  font-size: 1.0625rem
}

.assistant-manage-card p {
  min-height: 2.5rem;
  margin: 0;
  color: #7c8799;
  font-size: 0.5625rem;
  line-height: 1.55
}

.assistant-meta {
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem
}

.assistant-meta span {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .05);
  color: #737f92;
  font-size: 0.5rem
}

.assistant-meta i {
  margin-right: 0.25rem;
  color: currentColor
}

.assistant-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 2rem;
  margin-top: auto;
  border: 0;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(93, 73, 187, .14);
  transition: .18s ease
}

.assistant-edit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05)
}

.users-overview article {
  position: relative;
  overflow: hidden
}

.users-overview article:after {
  content: "";
  position: absolute;
  right: -1.75rem;
  bottom: -2.375rem;
  width: 5.625rem;
  height: 5.625rem;
  border: 1px solid rgba(112, 84, 199, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(31, 190, 210, .025)
}

.users-control-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, .74), rgba(247, 247, 244, .68))
}

.admin-workspace .settings-card {
  border-color: rgba(67, 80, 105, .1) !important;
  background: rgba(255, 255, 255, .62) !important;
  color: #172136;
  box-shadow: 0 13px 35px rgba(41, 50, 72, .04)
}

.admin-workspace .settings-card h3 {
  color: #1d283d
}

.admin-workspace .settings-card>p {
  color: #7e899a !important
}

.system-card:nth-child(1)>span {
  background: rgba(31, 190, 210, .12);
  color: #159eb2
}

.system-card:nth-child(2)>span {
  background: rgba(112, 84, 199, .13);
  color: #7052bd
}

.system-card:nth-child(3)>span {
  background: rgba(165, 52, 208, .11);
  color: #9a37bf
}

.admin-settings-grid .settings-card:first-child .settings-icon {
  background: linear-gradient(135deg, rgba(31, 190, 210, .14), rgba(31, 190, 210, .05));
  color: #159eb2
}

.admin-settings-grid .settings-card:last-child .settings-icon {
  background: linear-gradient(135deg, rgba(165, 52, 208, .13), rgba(112, 84, 199, .08));
  color: #8d42ba
}

.admin-identity {
  background: rgba(75, 87, 108, .025)
}

html[data-theme="dark"] .admin-page-title h1 {
  color: #f2f5f9
}

html[data-theme="dark"] .overview-panel,
html[data-theme="dark"] .overview-shortcuts button,
html[data-theme="dark"] .assistants-lead,
html[data-theme="dark"] .assistant-manage-card,
html[data-theme="dark"] .admin-workspace .settings-card {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .075) !important;
  box-shadow: none
}

html[data-theme="dark"] .donut {
  background: radial-gradient(circle, #111927 0 55%, transparent 56%), conic-gradient(#8067e7 calc(var(--rate)*1%), #23bfd1 0)
}

html[data-theme="dark"] .overview-shortcuts b,
html[data-theme="dark"] .assistant-manage-card h3,
html[data-theme="dark"] .admin-workspace .settings-card h3 {
  color: #edf1f7
}

html[data-theme="dark"] .service-list article {
  border-color: rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .distribution-list>div {
  border-color: rgba(255, 255, 255, .055)
}

html[data-theme="dark"] .users-control-panel {
  background: rgba(255, 255, 255, .035)
}

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

  .overview-shortcuts {
    grid-template-columns: 1fr
  }

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

@media(max-width:700px) {
  .admin-page-title {
    padding: 1.25rem 0 0.9375rem
  }

  .assistant-card-grid {
    grid-template-columns: 1fr
  }

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

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

  .distribution-chart {
    grid-template-columns: 7.1875rem 1fr
  }

  .donut {
    width: 6.25rem;
    height: 6.25rem
  }
}

.assistant-card-icon,
.assistant-meta i,
.overview-shortcuts>button>i:first-child {
  color: var(--text)
}

.continue-btn {
  height: 2.375rem;
  padding: 0 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap
}

.continue-btn i {
  font-size: 0.6875rem;
  color: #fff
}

@media(max-width:720px) {
  .continue-btn {
    padding: 0 0.6875rem;
    font-size: 0.625rem
  }

  .continue-btn i {
    display: none
  }
}

/* Session CTA, pricing distinction and definitive chat centering */
.continue-btn {
  height: 2.125rem !important;
  padding: 0 0.75rem !important;
  border: 0 !important;
  border-radius: 0.625rem !important;
  background: linear-gradient(105deg, #20bfd1, #735ee4 60%, #a730d2) !important;
  background-clip: padding-box !important;
  box-shadow: 0 7px 18px rgba(91, 72, 183, .17) !important;
  font-size: 0.625rem !important
}

.continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(91, 72, 183, .23) !important
}

.pricing-showcase .free-plan {
  background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(241, 244, 246, .54)) !important;
  border-color: rgba(67, 80, 105, .13) !important
}

.pricing-showcase .pro-plan {
  background: linear-gradient(145deg, rgba(116, 83, 203, .075), rgba(30, 190, 210, .045)) !important;
  border-color: rgba(116, 83, 203, .34) !important
}

.pricing-showcase .pro-plan .price {
  background: linear-gradient(100deg, #18afc2, #755ee1 64%, #a630ce);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.pricing-showcase .pro-plan .price span {
  -webkit-text-fill-color: var(--muted)
}

html[data-theme="dark"] .pricing-showcase .free-plan {
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .018)) !important
}

html[data-theme="dark"] .pricing-showcase .pro-plan {
  background: linear-gradient(145deg, rgba(126, 93, 211, .105), rgba(26, 185, 205, .045)) !important
}

.is-new-conversation .workspace-welcome,
.sidebar-collapsed.is-new-conversation .workspace-welcome {
  position: fixed;
  z-index: 2;
  left: 15.75rem;
  right: 0;
  top: calc(50% - 12.8125rem);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none !important;
  text-align: center
}

.is-new-conversation .workspace-welcome>* {
  margin-right: auto;
  margin-left: auto
}

.is-new-conversation .workspace-welcome-kicker {
  margin-top: 1.0625rem
}

.is-new-conversation .workspace-welcome h1 {
  margin-top: 0.4375rem
}

.is-new-conversation .workspace-welcome-hint {
  margin-top: 0.875rem
}

.is-new-conversation .workspace-composer-wrap {
  top: 50%;
  transform: translateY(25px)
}

@media(max-width:900px) {

  .is-new-conversation .workspace-welcome,
  .sidebar-collapsed.is-new-conversation .workspace-welcome {
    left: 4.75rem;
    top: calc(50% - 12.1875rem)
  }
}

@media(max-width:620px) {

  .is-new-conversation .workspace-welcome,
  .sidebar-collapsed.is-new-conversation .workspace-welcome {
    left: 3.875rem;
    top: calc(50% - 11.25rem)
  }

  .is-new-conversation .workspace-composer-wrap {
    top: 50%;
    transform: translateY(18px)
  }
}

/* Assistant create/edit modal */
.assistant-modal-back {
  z-index: 100;
  background: rgba(13, 18, 29, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.assistant-edit-modal {
  width: min(38.125rem, 100%);
  max-height: calc(100vh - 2.25rem);
  padding: 1.625rem 1.75rem;
  overflow: auto;
  border: 1px solid rgba(105, 81, 184, .17);
  border-radius: 1.4375rem;
  background: radial-gradient(circle at 8% 0, rgba(30, 190, 210, .09), transparent 190px), #fbfbf9;
  color: #172136;
  box-shadow: 0 32px 90px rgba(24, 30, 46, .25);
  animation: modalLift .24s cubic-bezier(.2, .75, .25, 1)
}

.assistant-modal-icon {
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.8125rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgba(30, 190, 210, .15), rgba(115, 84, 204, .17));
  color: #263147
}

.assistant-modal-kicker {
  display: block;
  margin-bottom: 0.4375rem;
  color: #7354c4;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .15em
}

.assistant-edit-modal h2 {
  margin: 0;
  color: #182238;
  font-size: 1.4375rem;
  letter-spacing: -.035em
}

.assistant-edit-modal>p {
  margin: 0.5625rem 0 1.25rem;
  color: #7d8899;
  font-size: 0.625rem
}

.assistant-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8125rem
}

.assistant-form-grid .wide {
  grid-column: 1/-1
}

.assistant-edit-modal .field label {
  display: block;
  margin-bottom: 0.4375rem;
  color: #3c485d;
  font-size: 0.5625rem;
  font-weight: 750
}

.assistant-edit-modal input,
.assistant-edit-modal textarea,
.assistant-edit-modal select {
  width: 100%;
  border: 1px solid rgba(65, 78, 102, .14);
  border-radius: 0.6875rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.6875rem;
  outline: 0
}

.assistant-edit-modal input,
.assistant-edit-modal select {
  height: 2.6875rem;
  padding: 0 0.75rem
}

.assistant-edit-modal textarea {
  min-height: 5.75rem;
  padding: 0.75rem;
  resize: vertical
}

.assistant-edit-modal input:focus,
.assistant-edit-modal textarea:focus,
.assistant-edit-modal select:focus {
  border-color: rgba(112, 84, 199, .42);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(112, 84, 199, .07)
}

.assistant-active-toggle {
  margin: 0.875rem 0;
  padding: 0.6875rem 0.75rem;
  background: rgba(75, 87, 108, .035);
  border-color: rgba(65, 78, 102, .12)
}

.assistant-active-toggle b {
  color: #273247
}

.assistant-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0.5625rem
}

.assistant-modal-actions button {
  height: 2.5625rem;
  border-radius: 0.6875rem;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 800;
  cursor: pointer
}

.assistant-modal-cancel {
  border: 1px solid rgba(65, 78, 102, .13);
  background: #efefec;
  color: #273247
}

.assistant-modal-save {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 10px 22px rgba(93, 73, 187, .18)
}

html[data-theme="dark"] .assistant-edit-modal {
  border-color: rgba(176, 139, 235, .18);
  background: radial-gradient(circle at 8% 0, rgba(27, 190, 210, .08), transparent 190px), #111927;
  color: #edf1f7
}

html[data-theme="dark"] .assistant-edit-modal h2,
html[data-theme="dark"] .assistant-active-toggle b {
  color: #f0f3f8
}

html[data-theme="dark"] .assistant-edit-modal>p {
  color: #8d99aa
}

html[data-theme="dark"] .assistant-edit-modal .field label {
  color: #b8c1cf
}

html[data-theme="dark"] .assistant-edit-modal input,
html[data-theme="dark"] .assistant-edit-modal textarea,
html[data-theme="dark"] .assistant-edit-modal select {
  border-color: rgba(255, 255, 255, .09);
  background: #0b1320;
  color: #eef2f7;
  color-scheme: dark
}

html[data-theme="dark"] .assistant-edit-modal input:focus,
html[data-theme="dark"] .assistant-edit-modal textarea:focus,
html[data-theme="dark"] .assistant-edit-modal select:focus {
  background: #0d1725;
  border-color: rgba(169, 129, 232, .42)
}

html[data-theme="dark"] .assistant-active-toggle {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .assistant-modal-cancel {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #dfe5ee
}

/* Admin settings form fields */
.admin-workspace .field label {
  color: #536075
}

.admin-workspace .field input,
.admin-workspace .field textarea,
.admin-workspace .field select {
  border: 1px solid rgba(65, 78, 102, .13);
  background: #f0f1ef;
  color: #172136;
  outline: 0
}

.admin-workspace .field input:focus,
.admin-workspace .field textarea:focus,
.admin-workspace .field select:focus {
  border-color: rgba(112, 84, 199, .4);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(112, 84, 199, .07)
}

html[data-theme="dark"] .admin-workspace .field label {
  color: #aeb8c7
}

html[data-theme="dark"] .admin-workspace .field input,
html[data-theme="dark"] .admin-workspace .field textarea,
html[data-theme="dark"] .admin-workspace .field select {
  border-color: rgba(255, 255, 255, .09);
  background: #0b1320;
  color: #edf1f7;
  color-scheme: dark
}

html[data-theme="dark"] .admin-workspace .field input:focus,
html[data-theme="dark"] .admin-workspace .field textarea:focus,
html[data-theme="dark"] .admin-workspace .field select:focus {
  background: #0e1725;
  border-color: rgba(169, 129, 232, .42)
}

/* Account settings center */
.account-settings-page {
  min-height: 100vh;
  background: radial-gradient(circle at 4% 0, rgba(30, 190, 210, .08), transparent 28rem), radial-gradient(circle at 96% 100%, rgba(157, 54, 210, .08), transparent 28rem), #f6f6f3;
  color: #172136
}

.account-settings-top {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 3.625rem;
  padding: 0 max(1.375rem, calc((100vw - 73.75rem)/2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(64, 77, 101, .09);
  background: rgba(247, 247, 244, .86);
  backdrop-filter: blur(18px)
}

.account-settings-top>a {
  height: 2.375rem;
  overflow: hidden
}

.settings-logo {
  display: block;
  width: 10.3125rem;
  height: auto
}

.settings-logo-dark {
  display: none
}

.account-settings-top>div {
  display: flex;
  align-items: center;
  gap: 0.5625rem
}

.settings-back {
  height: 2.125rem;
  padding: 0 0.6875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 1px solid rgba(66, 79, 102, .11);
  border-radius: 0.5625rem;
  color: #667389;
  font-size: 0.5625rem;
  font-weight: 750
}

.account-settings-main {
  width: min(66.25rem, calc(100% - 2.25rem));
  margin: auto;
  padding: 3rem 0 4.375rem
}

.account-settings-title {
  margin-bottom: 1.5625rem
}

.account-settings-title>span {
  color: #7456c5;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .15em
}

.account-settings-title h1 {
  margin: 0.4375rem 0 0.5rem;
  font-size: 2.125rem;
  letter-spacing: -.045em
}

.account-settings-title p {
  margin: 0;
  color: #758196;
  font-size: 0.75rem
}

.account-settings-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 0.875rem
}

.account-setting-card {
  position: relative;
  padding: 1.375rem;
  border: 1px solid rgba(66, 79, 102, .1);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .65);
  box-shadow: 0 14px 38px rgba(40, 49, 70, .045);
  overflow: hidden
}

.profile-setting {
  grid-row: span 2
}

.setting-card-head {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  margin-bottom: 1.25rem
}

.setting-card-head>span {
  width: 2.4375rem;
  height: 2.4375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(30, 190, 210, .14), rgba(115, 84, 204, .15));
  color: #263147
}

.setting-card-head small,
.setting-card-head h3 {
  display: block
}

.setting-card-head small {
  color: #7557c6;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.setting-card-head h3 {
  margin: 0.25rem 0 0;
  font-size: 0.875rem
}

.setting-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8125rem
}

.setting-fields .wide {
  grid-column: 1/-1
}

.setting-fields label {
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.setting-fields input {
  width: 100%;
  height: 2.6875rem;
  margin-top: 0.4375rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.6875rem;
  outline: 0
}

.setting-fields input:focus {
  border-color: rgba(112, 84, 199, .4);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(112, 84, 199, .07)
}

.setting-fields input:disabled {
  opacity: .7
}

.setting-primary,
.setting-secondary {
  height: 2.375rem;
  margin-top: 1.125rem;
  padding: 0 0.8125rem;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.setting-primary {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 9px 21px rgba(93, 73, 187, .17)
}

.setting-secondary {
  border: 1px solid rgba(112, 84, 199, .17);
  background: rgba(112, 84, 199, .06);
  color: #654ab2
}

.security-row {
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(67, 80, 104, .08)
}

.security-row b,
.security-row small {
  display: block
}

.security-row b {
  font-size: 0.5625rem
}

.security-row small {
  margin-top: 0.25rem;
  color: #8792a2;
  font-size: 0.4375rem
}

.setting-status {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .055);
  color: #7c8798;
  font-size: 0.5rem
}

.setting-status i {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background: currentColor
}

.setting-status.success {
  background: rgba(27, 170, 141, .09);
  color: #17977e
}

.subscription-setting {
  grid-column: 1/-1;
  min-height: 13.125rem
}

.subscription-setting.is-pro {
  border-color: rgba(112, 84, 199, .25);
  background: linear-gradient(125deg, rgba(112, 84, 199, .09), rgba(30, 190, 210, .055))
}

.subscription-glow {
  position: absolute;
  right: -5.625rem;
  bottom: -8.125rem;
  width: 18.125rem;
  height: 18.125rem;
  border: 1px solid rgba(112, 84, 199, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(30, 190, 210, .025)
}

.subscription-price {
  position: absolute;
  right: 1.5rem;
  top: 1.4375rem
}

.subscription-price strong {
  font-size: 1.875rem;
  letter-spacing: -.04em
}

.subscription-price span {
  color: #7c8799;
  font-size: 0.5625rem
}

.subscription-setting>p {
  max-width: 35.625rem;
  color: #788497;
  font-size: 0.625rem;
  line-height: 1.6
}

.subscription-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5625rem;
  background: rgba(27, 170, 141, .09);
  color: #17977e;
  font-size: 0.5rem;
  font-weight: 750
}

.subscription-state.pending {
  background: rgba(112, 84, 199, .09);
  color: #6c4fbb
}

html[data-theme="dark"] .account-settings-page {
  background: radial-gradient(circle at 4% 0, rgba(28, 187, 207, .06), transparent 28rem), radial-gradient(circle at 96% 100%, rgba(145, 53, 204, .07), transparent 28rem), #0d1421;
  color: #eef2f7
}

html[data-theme="dark"] .account-settings-top {
  background: rgba(13, 20, 33, .86);
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .settings-logo-light {
  display: none
}

html[data-theme="dark"] .settings-logo-dark {
  display: block
}

html[data-theme="dark"] .settings-back {
  border-color: rgba(255, 255, 255, .08);
  color: #96a2b4
}

html[data-theme="dark"] .account-settings-title h1,
html[data-theme="dark"] .setting-card-head h3 {
  color: #f0f3f8
}

html[data-theme="dark"] .account-settings-title p {
  color: #8d99ab
}

html[data-theme="dark"] .account-setting-card {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .075);
  box-shadow: none
}

html[data-theme="dark"] .subscription-setting.is-pro {
  background: linear-gradient(125deg, rgba(126, 92, 210, .1), rgba(28, 183, 203, .045))
}

html[data-theme="dark"] .setting-fields label {
  color: #aeb8c7
}

html[data-theme="dark"] .setting-fields input {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1220;
  color: #eef2f7;
  color-scheme: dark
}

html[data-theme="dark"] .setting-fields input:focus {
  background: #0d1725;
  border-color: rgba(169, 129, 232, .42)
}

html[data-theme="dark"] .security-row {
  border-color: rgba(255, 255, 255, .06)
}

html[data-theme="dark"] .setting-card-head>span {
  color: #eef2f7
}

@media(max-width:800px) {
  .account-settings-grid {
    grid-template-columns: 1fr
  }

  .profile-setting {
    grid-row: auto
  }

  .subscription-setting {
    grid-column: auto
  }
}

@media(max-width:560px) {
  .account-settings-top {
    padding: 0 0.75rem
  }

  .settings-logo {
    width: 8.4375rem
  }

  .settings-back {
    font-size: 0;
    width: 2.125rem;
    padding: 0;
    justify-content: center
  }

  .account-settings-main {
    width: min(100% - 1.5rem, 31.25rem);
    padding-top: 1.875rem
  }

  .setting-fields {
    grid-template-columns: 1fr
  }

  .setting-fields .wide {
    grid-column: auto
  }

  .subscription-price {
    position: static;
    margin-bottom: 0.8125rem
  }

  .account-setting-card {
    padding: 1.125rem
  }
}

/* Keep the active conversation composer centered in the viewport */
.has-conversation .workspace-composer-wrap,
.sidebar-collapsed.has-conversation .workspace-composer-wrap {
  left: 0;
  right: 0;
  bottom: 0;
  transform: none
}

.has-conversation .composer-shell,
.sidebar-collapsed.has-conversation .composer-shell {
  width: min(58.75rem, calc(100% - 2rem));
  margin-right: auto;
  margin-left: auto;
  transform: none
}

@media(max-width:900px) {

  .has-conversation .composer-shell,
  .sidebar-collapsed.has-conversation .composer-shell {
    width: min(47.5rem, calc(100% - 1.5rem))
  }
}

/* Assistant modal and admin settings polish */
.assistant-edit-modal {
  width: min(34.375rem, 100%);
  padding: 1.5rem 1.625rem;
  border-radius: 1.3125rem
}

.assistant-modal-icon {
  width: 2.625rem;
  height: 2.625rem;
  margin-bottom: 0.6875rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(30, 190, 210, .2), rgba(115, 84, 204, .24));
  color: #5a45a5
}

.assistant-modal-icon i {
  font-size: 0.875rem
}

.assistant-edit-modal h2 {
  font-size: 1.3125rem
}

.assistant-edit-modal>p {
  margin-bottom: 1.0625rem
}

.assistant-form-grid {
  gap: 0.6875rem 0.75rem
}

.assistant-edit-modal input,
.assistant-edit-modal select {
  height: 2.5rem
}

.assistant-edit-modal textarea {
  min-height: 4.75rem;
  max-height: 7.8125rem
}

.assistant-active-toggle {
  min-height: 3.375rem;
  margin: 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.625rem 0.75rem;
  cursor: pointer
}

.assistant-active-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.25rem;
  height: 1.3125rem;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 62.4375rem;
  background: #aeb7c4;
  box-shadow: inset 0 0 0 1px rgba(38, 50, 70, .1);
  cursor: pointer;
  position: relative;
  transition: .2s ease
}

.assistant-active-toggle input:before {
  content: "";
  position: absolute;
  width: 0.9375rem;
  height: 0.9375rem;
  left: 0.1875rem;
  top: 0.1875rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
  transition: .2s ease
}

.assistant-active-toggle input:checked {
  background: linear-gradient(90deg, #21bfd1, #765ee2)
}

.assistant-active-toggle input:checked:before {
  transform: translateX(15px)
}

.assistant-active-toggle span {
  min-width: 0;
  text-align: left
}

.assistant-active-toggle b {
  font-size: 0.5625rem
}

.assistant-active-toggle small {
  font-size: 0.4375rem;
  line-height: 1.4
}

.assistant-modal-actions {
  grid-template-columns: 1fr 1.5fr
}

.assistant-modal-actions button {
  height: 2.375rem
}

.assistant-modal-save i {
  margin-right: 0.3125rem;
  font-size: 0.5rem
}

.assistant-modal-save:hover,
.assistant-modal-cancel:hover {
  transform: translateY(-1px)
}

html[data-theme="dark"] .assistant-modal-icon {
  background: linear-gradient(135deg, rgba(30, 190, 210, .18), rgba(126, 92, 211, .25));
  color: #d4c8f6
}

html[data-theme="dark"] .assistant-active-toggle input {
  background: #3c485c
}

html[data-theme="dark"] .assistant-active-toggle input:checked {
  background: linear-gradient(90deg, #22bed0, #8166e6)
}

.admin-settings-grid .settings-card {
  padding: 1.3125rem !important
}

.admin-settings-grid .settings-icon {
  width: 2.375rem;
  height: 2.375rem;
  margin-bottom: 0.8125rem
}

.admin-settings-grid .btn.primary {
  width: auto;
  min-width: 7.75rem;
  height: 2.25rem;
  padding: 0 0.8125rem;
  border: 0 !important;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 60%, #a730d2) !important;
  background-clip: padding-box !important;
  color: #fff !important;
  font-size: 0.5625rem;
  box-shadow: 0 8px 18px rgba(93, 73, 187, .16) !important
}

.admin-settings-grid .btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 22px rgba(93, 73, 187, .22) !important
}

.admin-identity {
  padding: 0.6875rem 0.75rem;
  border-color: rgba(67, 80, 105, .1);
  background: linear-gradient(105deg, rgba(30, 190, 210, .045), rgba(112, 84, 199, .055))
}

.admin-identity .avatar {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: linear-gradient(140deg, #20bfd1, #765fe3 62%, #a632d0) !important;
  color: #fff !important;
  font-size: 0.6875rem;
  font-weight: 850
}

.admin-identity b {
  color: #273247
}

.admin-permissions {
  padding: 0.1875rem 2px
}

.admin-permissions span {
  min-height: 1.5625rem;
  padding: 0.3125rem 0.4375rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .035)
}

.admin-permissions i {
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(27, 170, 141, .09);
  font-size: 0.4375rem
}

html[data-theme="dark"] .admin-identity {
  border-color: rgba(255, 255, 255, .075);
  background: linear-gradient(105deg, rgba(28, 185, 205, .035), rgba(126, 92, 211, .055))
}

html[data-theme="dark"] .admin-identity b {
  color: #eef2f7
}

html[data-theme="dark"] .admin-permissions span {
  background: rgba(255, 255, 255, .025)
}

@media(max-width:620px) {
  .assistant-edit-modal {
    padding: 1.25rem 1rem
  }

  .assistant-form-grid {
    grid-template-columns: 1fr
  }

  .assistant-form-grid .wide {
    grid-column: auto
  }

  .assistant-modal-actions {
    grid-template-columns: 1fr 1fr
  }
}

/* Assistant builder form */
.assistant-builder-modal {
  width: min(32.5rem, 100%);
  padding: 1.375rem 1.5rem 1.5rem
}

.assistant-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.125rem
}

.assistant-builder-head h2 {
  margin-top: 0.3125rem
}

.assistant-builder-head>button {
  width: 1.9375rem;
  height: 1.9375rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  color: #7e8999;
  cursor: pointer
}

.assistant-builder-head>button:hover {
  background: rgba(112, 84, 199, .08);
  color: #684db6
}

.assistant-builder-fields {
  display: grid;
  gap: 0.75rem
}

.assistant-builder-fields .field label {
  margin-bottom: 0.375rem
}

.assistant-builder-fields .field label span {
  color: #8a94a4;
  font-weight: 500
}

.assistant-builder-fields input,
.assistant-builder-fields select {
  height: 2.4375rem
}

.assistant-builder-fields textarea {
  min-height: 4.625rem
}

.assistant-color-field {
  margin: 0;
  padding: 0;
  border: 0
}

.assistant-color-field legend {
  margin-bottom: 0.5rem;
  color: #3c485d;
  font-size: 0.5625rem;
  font-weight: 750
}

.assistant-color-field>div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem
}

.assistant-color-field label {
  display: block;
  width: 1.8125rem;
  height: 1.8125rem;
  cursor: pointer
}

.assistant-color-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none
}

.assistant-color-field label span {
  width: 1.8125rem;
  height: 1.8125rem;
  display: block;
  border-radius: 50%;
  background: var(--choice);
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px rgba(51, 64, 87, .08);
  transition: .16s ease
}

.assistant-color-field input:checked+span {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--choice), 0 5px 12px color-mix(in srgb, var(--choice) 28%, transparent);
  transform: scale(1.04)
}

.assistant-public-check {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.25rem 0;
  cursor: pointer
}

.assistant-public-check>input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #765ee1
}

.assistant-public-check b,
.assistant-public-check small {
  display: block
}

.assistant-public-check b {
  color: #273247;
  font-size: 0.5625rem
}

.assistant-public-check small {
  margin-top: 0.1875rem;
  color: #8791a2;
  font-size: 0.4375rem
}

.assistant-builder-submit {
  width: 100%;
  height: 2.5rem;
  margin-top: 1rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 9px 21px rgba(93, 73, 187, .18);
  transition: .18s ease
}

.assistant-builder-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(93, 73, 187, .24)
}

.assistant-builder-submit i {
  margin-right: 0.375rem;
  font-size: 0.5rem
}

.assistant-manage-card:before {
  background: linear-gradient(90deg, var(--assistant-color), color-mix(in srgb, var(--assistant-color) 55%, #8b5cf6))
}

.assistant-manage-card .assistant-card-icon {
  background: color-mix(in srgb, var(--assistant-color) 13%, transparent)
}

html[data-theme="dark"] .assistant-builder-head>button {
  color: #8996a8
}

html[data-theme="dark"] .assistant-builder-head>button:hover {
  background: rgba(151, 109, 225, .1);
  color: #c8b6f8
}

html[data-theme="dark"] .assistant-color-field legend {
  color: #b8c1cf
}

html[data-theme="dark"] .assistant-color-field label span {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .assistant-public-check b {
  color: #eef2f7
}

@media(max-width:560px) {
  .assistant-builder-modal {
    padding: 1.1875rem 1rem
  }

  .assistant-color-field>div {
    gap: 0.4375rem
  }

  .assistant-color-field label,
  .assistant-color-field label span {
    width: 1.6875rem;
    height: 1.6875rem
  }
}

/* Assistant deletion flow */
.assistant-delete-trigger {
  width: 100%;
  height: 2.1875rem;
  margin-top: 0.5rem;
  border: 1px solid rgba(200, 65, 85, .15);
  border-radius: 0.5625rem;
  background: rgba(200, 65, 85, .045);
  color: #b54256;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease
}

.assistant-delete-trigger:hover {
  background: rgba(200, 65, 85, .09);
  border-color: rgba(200, 65, 85, .25);
  transform: translateY(-1px)
}

.assistant-delete-trigger i {
  margin-right: 0.3125rem
}

.delete-confirm-back {
  z-index: 120;
  background: rgba(13, 18, 29, .66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px)
}

.delete-confirm-modal {
  width: min(26.25rem, 100%);
  padding: 1.6875rem;
  border: 1px solid rgba(199, 67, 87, .18);
  border-radius: 1.375rem;
  background: radial-gradient(circle at 50% 0, rgba(199, 67, 87, .08), transparent 150px), #fbfbf9;
  color: #172136;
  text-align: center;
  box-shadow: 0 34px 100px rgba(24, 29, 44, .3);
  animation: modalLift .22s ease
}

.delete-confirm-modal>span {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.9375rem;
  background: rgba(199, 67, 87, .1);
  color: #bc4559;
  font-size: 1.0625rem
}

.delete-confirm-modal>small {
  display: block;
  color: #b84458;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .15em
}

.delete-confirm-modal h2 {
  margin: 0.4375rem 0;
  color: #1b2539;
  font-size: 1.375rem
}

.delete-confirm-modal p {
  margin: 0 auto 1.375rem;
  color: #7d8798;
  font-size: 0.625rem;
  line-height: 1.6
}

.delete-confirm-modal p b {
  color: #394458
}

.delete-confirm-modal>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5625rem
}

.delete-confirm-modal button {
  height: 2.4375rem;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.delete-confirm-modal #cancelDelete {
  border: 1px solid rgba(65, 78, 102, .13);
  background: #efefec;
  color: #303b4f
}

.delete-confirm-modal #confirmDelete {
  border: 0;
  background: linear-gradient(105deg, #d85669, #b63751);
  color: #fff;
  box-shadow: 0 9px 20px rgba(184, 55, 78, .2)
}

.delete-confirm-modal button:hover {
  transform: translateY(-1px)
}

html[data-theme="dark"] .assistant-delete-trigger {
  border-color: rgba(224, 91, 111, .17);
  background: rgba(211, 70, 91, .06);
  color: #ec8b9b
}

html[data-theme="dark"] .delete-confirm-modal {
  border-color: rgba(226, 100, 119, .2);
  background: radial-gradient(circle at 50% 0, rgba(211, 70, 91, .09), transparent 150px), #111927;
  color: #edf1f7
}

html[data-theme="dark"] .delete-confirm-modal h2 {
  color: #f2f4f8
}

html[data-theme="dark"] .delete-confirm-modal p {
  color: #929dad
}

html[data-theme="dark"] .delete-confirm-modal p b {
  color: #dce2eb
}

html[data-theme="dark"] .delete-confirm-modal #cancelDelete {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #dce2eb
}

/* Assistant picker placement, conversation lock and neutral new-chat action */
.assistant-popover {
  top: auto !important;
  bottom: calc(100% + 0.75rem) !important;
  z-index: 40;
  max-height: min(21.25rem, calc(100vh - 11.875rem));
  overflow: auto;
  transform: none !important
}

.assistant-popover-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem
}

.assistant-popover-title span {
  font: inherit
}

.assistant-popover-title small {
  color: #9aa3b1;
  font-size: 0.4375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none
}

.assistant-select.assistant-locked {
  opacity: .72;
  cursor: not-allowed
}

.assistant-select.assistant-locked>i:last-child {
  font-size: 0.5rem
}

.assistant-select.assistant-locked:hover {
  background: transparent
}

.workspace-new-chat {
  border-color: rgba(86, 101, 124, .12);
  background: rgba(85, 100, 123, .035);
  color: #6e7b91
}

.workspace-new-chat i,
.workspace-new-chat span {
  color: inherit
}

.workspace-new-chat:hover {
  border-color: rgba(86, 101, 124, .2);
  background: rgba(85, 100, 123, .065);
  color: #5f6d83
}

html[data-theme="dark"] .workspace-new-chat {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025);
  color: #9da8ba
}

html[data-theme="dark"] .workspace-new-chat:hover {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045);
  color: #b2bccb
}

html[data-theme="dark"] .assistant-popover-title small {
  color: #6f7d91
}

@media(max-width:620px) {
  .assistant-popover {
    left: 0;
    bottom: calc(100% + 0.5625rem) !important;
    max-height: 17.5rem
  }
}

/* Account security, password, OTP and remember-me */
.remember-login {
  align-items: center;
  margin-top: 0.9375rem
}

.remember-login span b,
.remember-login span small {
  display: block
}

.remember-login span b {
  color: #4f5c71;
  font-size: 0.625rem
}

.remember-login span small {
  margin-top: 2px;
  color: #8b95a5;
  font-size: 0.5rem
}

.account-settings-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem
}

.account-settings-stack .otp-setting-card {
  grid-column: 1/-1
}

.email-verification {
  margin-top: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem
}

.email-verification>small {
  color: #8893a3;
  font-size: 0.5rem
}

.password-setting-fields {
  grid-template-columns: 1fr 1fr
}

.otp-setting-card .setting-card-head>span {
  background: linear-gradient(135deg, rgba(30, 190, 210, .14), rgba(112, 84, 199, .16))
}

.otp-login-back,
.otp-setup-back {
  z-index: 140;
  background: rgba(13, 18, 29, .68);
  backdrop-filter: blur(10px)
}

.otp-login-modal,
.otp-setup-modal {
  width: min(26.875rem, 100%);
  padding: 1.6875rem;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 1.375rem;
  background: radial-gradient(circle at 50% 0, rgba(30, 190, 210, .08), transparent 160px), #fbfbf9;
  color: #172136;
  text-align: center;
  box-shadow: 0 34px 100px rgba(20, 27, 42, .3)
}

.otp-login-modal>span {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0 auto 0.8125rem;
  display: grid;
  place-items: center;
  border-radius: 0.9375rem;
  background: linear-gradient(135deg, rgba(30, 190, 210, .15), rgba(112, 84, 199, .17));
  color: #674eb5
}

.otp-login-modal>small,
.otp-setup-modal>small:first-child {
  color: #7456c5;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .14em
}

.otp-login-modal h2,
.otp-setup-modal h2 {
  margin: 0.4375rem 0;
  color: #1b2539;
  font-size: 1.3125rem
}

.otp-login-modal p,
.otp-setup-modal p {
  color: #7e899a;
  font-size: 0.625rem;
  line-height: 1.6
}

.otp-login-modal input,
.otp-setup-modal input {
  width: 100%;
  height: 3.0625rem;
  margin: 0.625rem 0;
  padding: 0 0.75rem;
  border: 1px solid rgba(66, 79, 102, .14);
  border-radius: 0.6875rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: .28em;
  text-align: center;
  outline: 0
}

.otp-login-modal>button,
.otp-setup-modal>div:last-child button:last-child {
  height: 2.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.otp-login-modal>button {
  width: 100%
}

.otp-login-modal>a {
  display: inline-block;
  margin-top: 0.75rem;
  color: #7e8999;
  font-size: 0.5rem
}

.demo-qr {
  width: 9.375rem;
  height: 9.375rem;
  margin: 1.125rem auto;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1875rem;
  border: 8px solid #fff;
  border-radius: 0.75rem;
  background: repeating-conic-gradient(#162137 0 25%, #fff 0 50%) 0/22px 22px;
  box-shadow: 0 10px 30px rgba(40, 50, 70, .12)
}

.demo-qr i {
  width: 2.125rem;
  height: 2.125rem;
  border: 7px solid #162137;
  background: #fff
}

.demo-qr i:nth-child(2) {
  grid-column: 6
}

.demo-qr i:nth-child(3) {
  grid-column: 1;
  grid-row: 6
}

.otp-setup-modal code {
  display: block;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .06);
  color: #657188;
  font-size: 0.4375rem;
  overflow-wrap: anywhere
}

.otp-demo-hint {
  display: block;
  margin: 0 0 0.8125rem;
  color: #7e8999;
  font-size: 0.5rem
}

.otp-setup-modal>div:last-child {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.5rem
}

.otp-setup-modal>div:last-child button:first-child {
  border: 1px solid rgba(66, 79, 102, .13);
  border-radius: 0.625rem;
  background: #efefec;
  color: #303b4f;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800
}

html[data-theme="dark"] .remember-login span b {
  color: #adb7c7
}

html[data-theme="dark"] .otp-login-modal,
html[data-theme="dark"] .otp-setup-modal {
  border-color: rgba(170, 132, 232, .2);
  background: radial-gradient(circle at 50% 0, rgba(28, 186, 207, .07), transparent 160px), #111927;
  color: #edf1f7
}

html[data-theme="dark"] .otp-login-modal h2,
html[data-theme="dark"] .otp-setup-modal h2 {
  color: #f0f3f8
}

html[data-theme="dark"] .otp-login-modal p,
html[data-theme="dark"] .otp-setup-modal p {
  color: #929dae
}

html[data-theme="dark"] .otp-login-modal input,
html[data-theme="dark"] .otp-setup-modal input {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1320;
  color: #eef2f7
}

html[data-theme="dark"] .otp-setup-modal code {
  background: rgba(255, 255, 255, .035);
  color: #9ba7b9
}

html[data-theme="dark"] .otp-setup-modal>div:last-child button:first-child {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #dce2eb
}

@media(max-width:800px) {
  .account-settings-stack {
    grid-template-columns: 1fr
  }

  .account-settings-stack .otp-setting-card {
    grid-column: auto
  }
}

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

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

  .otp-login-modal,
  .otp-setup-modal {
    padding: 1.375rem 1rem
  }
}

.otp-qr-image {
  display: block;
  width: 10.625rem;
  height: 10.625rem;
  margin: 1.0625rem auto;
  padding: 0.5rem;
  border-radius: 0.8125rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(40, 50, 70, .13)
}

.otp-inline-layout {
  grid-template-columns: 20.625rem 1fr
}

.otp-inline .otp-qr-image {
  width: 20rem;
  height: 20rem;
  max-width: 100%;
  padding: 0;
  image-rendering: auto
}

.account-settings-stack.single-column {
  grid-template-columns: 1fr
}

.account-settings-stack.single-column .otp-setting-card {
  grid-column: auto
}

.account-settings-stack.single-column .account-setting-card {
  padding: 1.375rem 1.5rem
}

.setting-primary.align-right {
  display: block;
  margin-left: auto
}

.email-security-card .setting-card-head>span {
  background: linear-gradient(135deg, rgba(30, 190, 210, .13), rgba(30, 190, 210, .05));
  color: #149db0
}

.otp-inline {
  margin-top: 1rem;
  padding: 1.125rem;
  border: 1px solid rgba(67, 80, 104, .1);
  border-radius: 0.875rem;
  background: rgba(75, 87, 108, .025)
}

.otp-inline-layout {
  display: grid;
  grid-template-columns: 11.875rem 1fr;
  align-items: center;
  gap: 1.5rem
}

.otp-inline .otp-qr-image {
  width: 11.25rem;
  height: 11.25rem;
  margin: 0
}

.otp-inline h4 {
  margin: 0 0 0.375rem;
  color: #263147;
  font-size: 0.6875rem
}

.otp-inline h4:nth-of-type(2) {
  margin-top: 1.125rem
}

.otp-inline p {
  margin: 0 0 0.625rem;
  color: #818c9d;
  font-size: 0.5rem
}

.otp-inline code {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .06);
  color: #59667a;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: .08em;
  word-spacing: .25em
}

.otp-inline form {
  display: flex;
  gap: 0.5rem
}

.otp-inline input {
  width: 9.375rem;
  height: 2.4375rem;
  padding: 0 0.625rem;
  border: 1px solid rgba(66, 79, 102, .13);
  border-radius: 0.5625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: .25em;
  text-align: center;
  outline: 0
}

.otp-inline button {
  height: 2.4375rem;
  padding: 0 0.8125rem;
  border: 0;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

html[data-theme="dark"] .otp-inline {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .022)
}

html[data-theme="dark"] .otp-inline h4 {
  color: #edf1f7
}

html[data-theme="dark"] .otp-inline code {
  background: rgba(255, 255, 255, .035);
  color: #a7b2c2
}

html[data-theme="dark"] .otp-inline input {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1320;
  color: #eef2f7
}

@media(max-width:700px) {
  .otp-inline-layout {
    grid-template-columns: 1fr
  }

  .otp-inline .otp-qr-image {
    margin: auto
  }

  .otp-inline form {
    align-items: stretch;
    flex-direction: column
  }

  .otp-inline input {
    width: 100%
  }
}

.otp-setting-card {
  padding: 0 !important
}

.otp-accordion-toggle {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer
}

.otp-accordion-toggle .setting-card-head {
  margin: 0
}

.otp-accordion-toggle .setting-card-head>span:first-child {
  width: 2.4375rem;
  height: 2.4375rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(30, 190, 210, .14), rgba(112, 84, 199, .16))
}

.otp-accordion-toggle .setting-card-head>span:last-child small,
.otp-accordion-toggle .setting-card-head>span:last-child b {
  display: block
}

.otp-accordion-toggle .setting-card-head>span:last-child small {
  color: #7557c6;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.otp-accordion-toggle .setting-card-head>span:last-child b {
  margin-top: 0.25rem;
  font-size: 0.875rem
}

.otp-accordion-summary {
  display: flex;
  align-items: center;
  gap: 0.875rem
}

.otp-chevron {
  color: #8490a1;
  font-size: 0.5625rem;
  transition: transform .2s ease
}

.otp-accordion-toggle[aria-expanded="true"] .otp-chevron {
  transform: rotate(180deg)
}

.otp-accordion-panel {
  padding: 0 1.5rem 1.375rem;
  border-top: 1px solid rgba(67, 80, 104, .08)
}

.otp-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 0.875rem
}

.otp-option-grid:has(.otp-option:only-child) {
  grid-template-columns: 1fr
}

.otp-option {
  min-height: 4.0625rem;
  padding: 0.75rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  border: 1px solid rgba(112, 84, 199, .15);
  border-radius: 0.75rem;
  background: rgba(112, 84, 199, .045);
  color: #596579;
  text-align: left;
  cursor: pointer
}

.otp-option>i:first-child {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.625rem;
  background: rgba(112, 84, 199, .1);
  color: #674db7
}

.otp-option>span {
  min-width: 0;
  flex: 1
}

.otp-option b,
.otp-option small {
  display: block
}

.otp-option b {
  font-size: 0.5625rem
}

.otp-option small {
  margin-top: 0.25rem;
  color: #8792a2;
  font-size: 0.4375rem;
  line-height: 1.4
}

.otp-option>i:last-child {
  font-size: 0.5rem
}

.otp-option:hover {
  border-color: rgba(112, 84, 199, .3);
  background: rgba(112, 84, 199, .08)
}

.otp-option.danger {
  border-color: rgba(195, 75, 96, .14);
  background: rgba(195, 75, 96, .035)
}

.otp-option.danger>i:first-child {
  background: rgba(195, 75, 96, .09);
  color: #b74357
}

.otp-security-note {
  margin-top: 0.875rem !important;
  color: #7b8798 !important
}

.otp-security-note i {
  margin-right: 0.3125rem;
  color: #17977e
}

html[data-theme="dark"] .otp-accordion-panel {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .otp-option {
  border-color: rgba(255, 255, 255, .09);
  background: #292929;
  color: #dedede
}

html[data-theme="dark"] .otp-option:hover {
  background: #303030;
  border-color: rgba(255, 255, 255, .16)
}

html[data-theme="dark"] .otp-option>i:first-child {
  background: #353535;
  color: #ededed
}

html[data-theme="dark"] .otp-option.danger {
  background: rgba(195, 75, 96, .055)
}

@media(max-width:600px) {
  .otp-accordion-toggle {
    padding: 1.0625rem
  }

  .otp-accordion-summary .setting-status {
    display: none
  }

  .otp-accordion-panel {
    padding: 0 1.0625rem 1.0625rem
  }

  .otp-option-grid {
    grid-template-columns: 1fr
  }
}

/* Polished OTP accordion */
.account-settings-stack .otp-setting-card {
  border-color: rgba(88, 74, 139, .13);
  background: linear-gradient(115deg, rgba(255, 255, 255, .78), rgba(249, 248, 252, .66));
  box-shadow: 0 16px 42px rgba(42, 49, 69, .055)
}

.account-settings-stack .otp-accordion-toggle {
  min-height: 5.5rem;
  padding: 1.125rem 1.375rem;
  position: relative;
  transition: background .2s ease
}

.account-settings-stack .otp-accordion-toggle:hover {
  background: rgba(112, 84, 199, .025)
}

.account-settings-stack .otp-accordion-toggle:focus-visible {
  outline: 3px solid rgba(36, 188, 213, .22);
  outline-offset: -0.1875rem
}

.account-settings-stack .otp-accordion-toggle>.setting-card-head {
  min-width: 0;
  flex: 1;
  gap: 0.8125rem;
  margin: 0
}

.account-settings-stack .otp-accordion-toggle>.setting-card-head>span:first-child {
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid rgba(112, 84, 199, .08);
  border-radius: 0.875rem;
  color: #2b3851;
  font-size: 1rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7)
}

.account-settings-stack .otp-accordion-toggle>.setting-card-head>.otp-heading {
  width: auto !important;
  height: auto !important;
  min-width: 13.75rem !important;
  padding: 0 !important;
  display: block !important;
  place-items: initial !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: left !important
}

.account-settings-stack .otp-heading small {
  white-space: nowrap;
  color: #7557c6;
  font-size: 0.5rem;
  line-height: 1.2;
  letter-spacing: .15em
}

.account-settings-stack .otp-heading b {
  margin-top: 0.3125rem;
  color: #172136;
  font-size: 0.9375rem;
  line-height: 1.15;
  white-space: nowrap
}

.account-settings-stack .otp-heading em {
  display: block;
  margin-top: 0.3125rem;
  color: #8791a2;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal
}

.account-settings-stack .otp-accordion-summary {
  flex: 0 0 auto;
  gap: 0.625rem
}

.account-settings-stack .otp-accordion-summary .setting-status {
  padding: 0.4375rem 0.625rem;
  border: 1px solid rgba(27, 170, 141, .08);
  border-radius: 62.4375rem;
  white-space: nowrap
}

.otp-toggle-label {
  color: #758095;
  font-size: 0.5rem;
  font-weight: 750;
  white-space: nowrap
}

.otp-chevron-wrap {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67, 80, 104, .1);
  border-radius: 0.5625rem;
  background: rgba(255, 255, 255, .58)
}

.account-settings-stack .otp-chevron {
  font-size: 0.5rem
}

.account-settings-stack .otp-accordion-toggle[aria-expanded="true"] {
  background: rgba(112, 84, 199, .028)
}

.account-settings-stack .otp-accordion-panel {
  padding: 1.125rem 1.375rem 1.375rem;
  background: linear-gradient(180deg, rgba(112, 84, 199, .018), transparent 80px)
}

.otp-panel-intro {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.6875rem 0.8125rem;
  border: 1px solid rgba(31, 160, 181, .11);
  border-radius: 0.6875rem;
  background: rgba(31, 160, 181, .035)
}

.otp-panel-intro>span {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.5625rem;
  background: rgba(31, 160, 181, .1);
  color: #1598ad;
  font-size: 0.625rem
}

.otp-panel-intro b,
.otp-panel-intro small {
  display: block
}

.otp-panel-intro b {
  color: #344055;
  font-size: 0.5625rem
}

.otp-panel-intro small {
  margin-top: 0.1875rem;
  color: #818c9d;
  font-size: 0.4375rem
}

.account-settings-stack .otp-option-grid {
  gap: 0.75rem;
  margin-top: 0.75rem
}

.account-settings-stack .otp-option {
  min-height: 4.5rem;
  padding: 0.8125rem 0.9375rem;
  border-radius: 0.8125rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease
}

.account-settings-stack .otp-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(48, 52, 73, .06)
}

.account-settings-stack .otp-option:disabled {
  cursor: default;
  transform: none;
  box-shadow: none
}

.account-settings-stack .otp-option.is-showing {
  border-color: rgba(22, 157, 129, .2);
  background: rgba(22, 157, 129, .055);
  color: #287866
}

.account-settings-stack .otp-option.is-showing>i:first-child {
  background: rgba(22, 157, 129, .11);
  color: #168e76
}

.account-settings-stack .otp-option.is-showing>i:last-child {
  color: #168e76
}

.account-settings-stack .otp-option>i:first-child {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.6875rem;
  font-size: 0.75rem
}

.account-settings-stack .otp-option b {
  font-size: 0.5625rem
}

.account-settings-stack .otp-option small {
  font-size: 0.4375rem
}

html[data-theme="dark"] .account-settings-stack .otp-setting-card {
  border-color: rgba(255, 255, 255, .08);
  background: #252525;
  box-shadow: none
}

html[data-theme="dark"] .account-settings-stack .otp-accordion-toggle:hover,
html[data-theme="dark"] .account-settings-stack .otp-accordion-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .account-settings-stack .otp-heading b {
  color: #ededed
}

html[data-theme="dark"] .account-settings-stack .otp-heading em {
  color: #919191
}

html[data-theme="dark"] .account-settings-stack .otp-option.is-showing {
  border-color: rgba(50, 190, 156, .2);
  background: rgba(50, 190, 156, .07);
  color: #8bd6c3
}

html[data-theme="dark"] .account-settings-stack .otp-option.is-showing>i:first-child {
  background: rgba(50, 190, 156, .12);
  color: #8bd6c3
}

html[data-theme="dark"] .otp-chevron-wrap {
  border-color: rgba(255, 255, 255, .09);
  background: #2c2c2c
}

html[data-theme="dark"] .account-settings-stack .otp-accordion-panel {
  background: rgba(255, 255, 255, .012)
}

html[data-theme="dark"] .otp-panel-intro {
  border-color: rgba(255, 255, 255, .08);
  background: #292929
}

html[data-theme="dark"] .otp-panel-intro>span {
  background: #343434;
  color: #dedede
}

html[data-theme="dark"] .otp-panel-intro b {
  color: #e5e5e5
}

html[data-theme="dark"] .otp-panel-intro small {
  color: #929292
}

@media(max-width:700px) {
  .account-settings-stack .otp-accordion-toggle {
    min-height: 4.875rem;
    padding: 0.9375rem 1.0625rem
  }

  .account-settings-stack .otp-accordion-toggle>.setting-card-head>.otp-heading {
    min-width: 0 !important
  }

  .account-settings-stack .otp-heading em,
  .otp-toggle-label {
    display: none
  }

  .account-settings-stack .otp-accordion-panel {
    padding: 0.875rem 1.0625rem 1.0625rem
  }
}

@media(max-width:430px) {
  .account-settings-stack .otp-accordion-summary .setting-status {
    display: none
  }

  .account-settings-stack .otp-heading small {
    font-size: 0.4375rem
  }

  .account-settings-stack .otp-heading b {
    font-size: 0.875rem
  }
}

/* Passkey security */
.passkey-setting-card .setting-card-head {
  margin-bottom: 1rem
}

.passkey-setting-card .setting-card-head>span:first-child {
  background: linear-gradient(135deg, rgba(33, 188, 207, .14), rgba(112, 84, 199, .15));
  color: #5d48aa
}

.passkey-setting-card .setting-card-head>div {
  min-width: 0;
  flex: 1
}

.passkey-support-status {
  flex: 0 0 auto
}

.passkey-intro {
  padding: 0.8125rem 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;
  border: 1px solid rgba(67, 80, 104, .09);
  border-radius: 0.75rem;
  background: rgba(75, 87, 108, .025)
}

.passkey-intro b,
.passkey-intro small {
  display: block
}

.passkey-intro b {
  color: #344055;
  font-size: 0.5625rem
}

.passkey-intro small {
  max-width: 38.75rem;
  margin-top: 0.25rem;
  color: #818c9d;
  font-size: 0.4375rem;
  line-height: 1.5
}

.passkey-intro>button {
  height: 2.25rem;
  padding: 0 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .17)
}

.passkey-intro>button:disabled {
  opacity: .5;
  cursor: not-allowed
}

.passkey-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem
}

.passkey-item {
  min-height: 3.625rem;
  padding: 0.5625rem 0.6875rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid rgba(67, 80, 104, .09);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, .35)
}

.passkey-item>span {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.625rem;
  background: rgba(112, 84, 199, .08);
  color: #674db7
}

.passkey-item>div {
  min-width: 0;
  flex: 1
}

.passkey-item b,
.passkey-item small {
  display: block
}

.passkey-item b {
  color: #344055;
  font-size: 0.5625rem
}

.passkey-item small {
  margin-top: 0.25rem;
  overflow: hidden;
  color: #8792a2;
  font-size: 0.4375rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.passkey-item>button {
  width: 1.9375rem;
  height: 1.9375rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(195, 75, 96, .12);
  border-radius: 0.5625rem;
  background: rgba(195, 75, 96, .035);
  color: #b74357;
  cursor: pointer
}

.passkey-item>button:hover {
  background: rgba(195, 75, 96, .09)
}

.passkey-empty,
.passkey-loading {
  min-height: 3.25rem;
  padding: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px dashed rgba(67, 80, 104, .12);
  border-radius: 0.6875rem;
  color: #8792a2;
  font-size: 0.5rem;
  text-align: center
}

.passkey-empty i {
  color: #7054c6
}

.passkey-setting-card .setting-card-head>.passkey-support-status {
  width: auto !important;
  height: auto !important;
  min-width: max-content !important;
  margin-left: auto !important;
  padding: 0.4375rem 0.625rem !important;
  display: inline-flex !important;
  place-items: initial !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 62.4375rem !important;
  background: rgba(27, 170, 141, .09) !important;
  background-image: none !important;
  color: #17977e !important;
  box-shadow: none !important;
  font-size: 0.5rem !important;
  line-height: 1 !important;
  white-space: nowrap !important
}

.passkey-setting-card .setting-card-head>.passkey-support-status.muted {
  background: rgba(75, 87, 108, .055) !important;
  color: #7c8798 !important
}

html[data-theme="dark"] .passkey-setting-card .setting-card-head>span:first-child {
  background: #303030;
  color: #ededed
}

html[data-theme="dark"] .passkey-intro {
  border-color: rgba(255, 255, 255, .08);
  background: #292929
}

html[data-theme="dark"] .passkey-intro b,
html[data-theme="dark"] .passkey-item b {
  color: #e5e5e5
}

html[data-theme="dark"] .passkey-intro small,
html[data-theme="dark"] .passkey-item small {
  color: #929292
}

html[data-theme="dark"] .passkey-intro>button {
  background: #e5e5e5;
  color: #181818;
  box-shadow: none
}

html[data-theme="dark"] .passkey-item {
  border-color: rgba(255, 255, 255, .08);
  background: #292929
}

html[data-theme="dark"] .passkey-item>span {
  background: #343434;
  color: #dedede
}

html[data-theme="dark"] .passkey-empty,
html[data-theme="dark"] .passkey-loading {
  border-color: rgba(255, 255, 255, .09);
  color: #929292
}

@media(max-width:600px) {
  .passkey-intro {
    align-items: flex-start;
    flex-direction: column
  }

  .passkey-intro>button {
    width: 100%;
    justify-content: center
  }

  .passkey-item small {
    white-space: normal
  }
}

@media(max-width:480px) {
  .passkey-setting-card .setting-card-head>.passkey-support-status {
    display: none !important
  }
}

.passkey-name-back {
  z-index: 170;
  padding: 1.25rem;
  background: rgba(10, 15, 25, .68);
  backdrop-filter: blur(10px)
}

.passkey-name-modal {
  width: min(28.75rem, 100%);
  padding: 1.5rem;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 1.3125rem;
  background: #fbfbf9;
  color: #172136;
  box-shadow: 0 32px 95px rgba(16, 23, 38, .32)
}

.passkey-name-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8125rem
}

.passkey-name-head>span {
  width: 2.6875rem;
  height: 2.6875rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, rgba(30, 190, 210, .14), rgba(112, 84, 199, .16));
  color: #654bb2;
  font-size: 0.9375rem
}

.passkey-name-head>div {
  min-width: 0;
  flex: 1
}

.passkey-name-head small {
  color: #7557c6;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .14em
}

.passkey-name-head h2 {
  margin: 0.3125rem 0 0.3125rem;
  font-size: 1.25rem;
  letter-spacing: -.035em
}

.passkey-name-head p {
  margin: 0;
  color: #818c9d;
  font-size: 0.5625rem;
  line-height: 1.5
}

.passkey-name-head>button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(67, 80, 104, .11);
  border-radius: 0.5625rem;
  background: transparent;
  color: #758095;
  cursor: pointer
}

.passkey-name-modal>label {
  display: block;
  margin-top: 1.3125rem;
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 800
}

.passkey-name-input {
  height: 2.8125rem;
  margin-top: 0.4375rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(65, 78, 102, .14);
  border-radius: 0.6875rem;
  background: #f0f1ef
}

.passkey-name-input>i {
  color: #7054c6;
  font-size: 0.6875rem
}

.passkey-name-input input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  background: transparent;
  color: #172136;
  font: inherit;
  font-size: 0.6875rem;
  outline: 0
}

.passkey-name-input:focus-within {
  border-color: rgba(112, 84, 199, .42);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(112, 84, 199, .07)
}

.passkey-name-hint {
  margin-top: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #8792a2;
  font-size: 0.4375rem
}

.passkey-name-hint i {
  color: #17977e
}

.passkey-name-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.375rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(67, 80, 104, .08)
}

.passkey-name-actions button {
  height: 2.375rem;
  padding: 0 0.9375rem;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.passkey-name-actions button:first-child {
  border: 1px solid rgba(67, 80, 104, .12);
  background: #efefec;
  color: #596579
}

.passkey-name-actions button:last-child {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .18)
}

.passkey-name-actions button:disabled {
  opacity: .55;
  cursor: not-allowed
}

html[data-theme="dark"] .passkey-name-modal {
  border-color: rgba(255, 255, 255, .1);
  background: #252525;
  color: #ededed
}

html[data-theme="dark"] .passkey-name-head>span {
  background: #303030;
  color: #ededed
}

html[data-theme="dark"] .passkey-name-head h2 {
  color: #ededed
}

html[data-theme="dark"] .passkey-name-head p,
html[data-theme="dark"] .passkey-name-hint {
  color: #929292
}

html[data-theme="dark"] .passkey-name-head>button {
  border-color: rgba(255, 255, 255, .09);
  color: #bdbdbd
}

html[data-theme="dark"] .passkey-name-modal>label {
  color: #bdbdbd
}

html[data-theme="dark"] .passkey-name-input {
  border-color: rgba(255, 255, 255, .1);
  background: #1b1b1b
}

html[data-theme="dark"] .passkey-name-input input {
  color: #f0f0f0
}

html[data-theme="dark"] .passkey-name-input:focus-within {
  border-color: rgba(255, 255, 255, .24);
  background: #202020;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .045)
}

html[data-theme="dark"] .passkey-name-actions {
  border-color: rgba(255, 255, 255, .08)
}

html[data-theme="dark"] .passkey-name-actions button:first-child {
  border-color: rgba(255, 255, 255, .1);
  background: #2c2c2c;
  color: #d9d9d9
}

html[data-theme="dark"] .passkey-name-actions button:last-child {
  background: #e5e5e5;
  color: #181818;
  box-shadow: none
}

@media(max-width:520px) {
  .passkey-name-back {
    padding: 0.875rem
  }

  .passkey-name-modal {
    padding: 1.1875rem
  }

  .passkey-name-head p {
    font-size: 0.5rem
  }

  .passkey-name-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr
  }

  .passkey-name-actions button {
    width: 100%;
    justify-content: center
  }
}

.passkey-name-input input::placeholder {
  color: #9aa3b2
}

html[data-theme="dark"] .passkey-name-input input::placeholder {
  color: #777
}

/* Subscription center */
.subscription-center-head {
  width: min(47.5rem, 100%);
  margin: 0.875rem auto 1.75rem;
  text-align: center
}

.subscription-center-head>span,
.plan-change-intro small,
.current-plan-card small {
  display: block;
  color: #7256c8;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .17em
}

.subscription-center-head h1 {
  margin: 0.625rem 0 0.75rem;
  color: #182238;
  font-size: clamp(1.8125rem, 4vw, 2.625rem);
  letter-spacing: -.045em
}

.subscription-center-head p {
  max-width: 38.75rem;
  margin: auto;
  color: #748096;
  font-size: 0.75rem;
  line-height: 1.7
}

.current-plan-card {
  position: relative;
  width: min(61.25rem, 100%);
  min-height: 9.375rem;
  margin: 0 auto;
  padding: 1.6875rem 1.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5625rem;
  overflow: hidden;
  border: 1px solid rgba(111, 84, 199, .16);
  border-radius: 1.3125rem;
  background: linear-gradient(125deg, rgba(255, 255, 255, .92), rgba(247, 247, 252, .78));
  box-shadow: 0 20px 55px rgba(39, 48, 73, .07)
}

.current-plan-card:after {
  content: "";
  position: absolute;
  right: -4.0625rem;
  bottom: -6.5625rem;
  width: 15.625rem;
  height: 15.625rem;
  border: 1px solid rgba(111, 84, 199, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(31, 190, 209, .025)
}

.current-plan-card>div,
.current-plan-card>button {
  position: relative;
  z-index: 1
}

.current-plan-card h2 {
  margin: 0.4375rem 0 0.3125rem;
  color: #1c273c;
  font-size: 1.3125rem
}

.current-plan-card p {
  margin: 0;
  color: #7b8698;
  font-size: 0.625rem
}

.current-request-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.8125rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .08);
  color: #6950b6;
  font-size: 0.5rem;
  font-weight: 750
}

.current-plan-card.pro-current {
  border-color: rgba(40, 181, 205, .22);
  background: linear-gradient(125deg, rgba(31, 190, 209, .055), rgba(112, 84, 199, .06), rgba(255, 255, 255, .88))
}

#changePlan {
  height: 2.375rem;
  padding: 0 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  flex: 0 0 auto;
  border: 1px solid rgba(64, 77, 102, .13);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, .72);
  color: #425069;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease
}

#changePlan:hover,
#changePlan.active {
  border-color: rgba(112, 84, 199, .25);
  background: #fff;
  color: #6249ae;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(60, 51, 103, .08)
}

.plan-change-panel {
  width: min(61.25rem, 100%);
  margin: 1.4375rem auto 0;
  padding: 1.375rem;
  border: 1px solid rgba(112, 84, 199, .15);
  border-radius: 1.4375rem;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 22px 65px rgba(38, 46, 68, .08);
  animation: modalLift .25s ease
}

.plan-change-panel.hidden {
  display: none
}

.plan-change-intro {
  position: relative;
  padding: 1.25rem 1.4375rem 1.3125rem;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(110deg, rgba(31, 190, 209, .08), rgba(112, 84, 199, .09))
}

.plan-change-intro:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.125rem;
  bottom: 1.125rem;
  width: 0.1875rem;
  border-radius: 0.3125rem;
  background: linear-gradient(#21bfd1, #815ee1)
}

.plan-change-intro h2 {
  margin: 0.4375rem 0 0.3125rem;
  color: #202a3e;
  font-size: 1.4375rem;
  letter-spacing: -.025em
}

.plan-change-intro p {
  margin: 0;
  color: #7b8697;
  font-size: 0.625rem
}

.subscription-plan-grid {
  margin-top: 1.0625rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.0625rem
}

.subscription-choice {
  position: relative;
  min-height: 28.4375rem;
  padding: 1.5625rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(63, 76, 100, .12);
  border-radius: 1.25rem;
  background: rgba(252, 252, 250, .85)
}

.subscription-choice:after {
  content: "";
  position: absolute;
  right: -4.6875rem;
  bottom: -7.1875rem;
  width: 14.375rem;
  height: 14.375rem;
  border: 1px solid rgba(112, 84, 199, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(112, 84, 199, .025)
}

.subscription-choice>* {
  position: relative;
  z-index: 1
}

.subscription-choice.selected {
  border-color: rgba(111, 84, 199, .25);
  box-shadow: 0 14px 38px rgba(67, 53, 115, .07)
}

.pro-choice {
  border-color: rgba(111, 84, 199, .27);
  background: linear-gradient(145deg, rgba(31, 190, 209, .045), rgba(112, 84, 199, .065), rgba(252, 252, 250, .9))
}

.admin-approved {
  position: absolute;
  right: 1.375rem;
  top: 1.5rem;
  color: #7256c8;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .12em
}

.choice-label {
  width: max-content;
  padding: 0.4375rem 0.625rem;
  border: 1px solid rgba(112, 84, 199, .16);
  border-radius: 62.4375rem;
  color: #364158;
  font-size: 0.5rem;
  font-weight: 800
}

.choice-price {
  margin: 1.375rem 0 0.5rem;
  display: flex;
  align-items: flex-end;
  gap: 0.4375rem
}

.choice-price strong {
  color: #182238;
  font-size: 2.6875rem;
  line-height: .9;
  letter-spacing: -.045em
}

.pro-choice .choice-price strong {
  background: linear-gradient(105deg, #20bcd0, #765ee3 62%, #a632d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.choice-price span {
  color: #7f8999;
  font-size: 0.5625rem
}

.subscription-choice>p {
  min-height: 2.125rem;
  margin: 0.5rem 0 1.1875rem;
  color: #788396;
  font-size: 0.625rem;
  line-height: 1.55
}

.subscription-choice ul {
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  list-style: none
}

.subscription-choice li {
  min-height: 2.375rem;
  padding: 0 0.6875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(65, 78, 102, .1);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, .45);
  color: #4d596e;
  font-size: 0.5625rem
}

.subscription-choice li i {
  color: #7054c7;
  font-size: 0.5rem
}

.subscription-choice>button {
  width: 100%;
  height: 2.5rem;
  margin-top: auto;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.625rem;
  background: rgba(75, 87, 108, .055);
  color: #536078;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 850;
  cursor: pointer;
  transition: .18s ease
}

.subscription-choice>button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(64, 53, 106, .12)
}

.subscription-choice>button.request-pro {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 10px 24px rgba(93, 73, 187, .18)
}

.subscription-choice>button:disabled {
  cursor: default;
  opacity: .62
}

.subscription-choice>button.pending {
  color: #6b52b9;
  background: rgba(112, 84, 199, .08)
}

.subscription-management-actions {
  width: 100%;
  margin-top: auto;
  display: grid;
  gap: .55rem;
}

.subscription-management-actions > button {
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid rgba(207, 72, 87, .2);
  border-radius: .625rem;
  color: #bd4553;
  background: rgba(207, 72, 87, .065);
  font: inherit;
  font-size: .5625rem;
  font-weight: 850;
  cursor: pointer;
  transition: .18s ease;
}

.subscription-management-actions > button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(125, 53, 66, .12);
}

.subscription-management-actions > button:disabled {
  cursor: wait;
  opacity: .62;
}

.subscription-management-actions > button.subscription-resume-button {
  border-color: rgba(30, 171, 128, .2);
  color: #168a69;
  background: rgba(30, 171, 128, .08);
}

.subscription-cancellation-state {
  padding: .62rem .68rem;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: center;
  gap: .48rem;
  border: 1px solid rgba(229, 157, 51, .2);
  border-radius: .625rem;
  background: rgba(229, 157, 51, .07);
}

.subscription-cancellation-state > i {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: .48rem;
  color: #bd7605;
  background: rgba(229, 157, 51, .11);
  font-size: .58rem;
}

.subscription-cancellation-state b,
.subscription-cancellation-state small {
  display: block;
}

.subscription-cancellation-state b {
  color: #a96805;
  font-size: .52rem;
}

.subscription-cancellation-state small {
  margin-top: .16rem;
  color: #8a7658;
  font-size: .47rem;
  line-height: 1.45;
}

html[data-theme="dark"] .subscription-management-actions > button.subscription-cancel-button {
  border-color: rgba(255, 108, 126, .2);
  color: #ff8997;
  background: rgba(207, 72, 87, .09);
}

html[data-theme="dark"] .subscription-management-actions > button.subscription-resume-button {
  border-color: rgba(75, 211, 169, .2);
  color: #71d9b9;
  background: rgba(30, 171, 128, .1);
}

html[data-theme="dark"] .subscription-cancellation-state {
  border-color: rgba(239, 174, 77, .19);
  background: rgba(229, 157, 51, .085);
}

html[data-theme="dark"] .subscription-cancellation-state b { color: #f2b95e; }
html[data-theme="dark"] .subscription-cancellation-state small { color: #c4b28f; }

html[data-theme="dark"] .subscription-center-head h1,
html[data-theme="dark"] .current-plan-card h2,
html[data-theme="dark"] .plan-change-intro h2,
html[data-theme="dark"] .choice-price strong {
  color: #f1f4f8
}

html[data-theme="dark"] .subscription-center-head p,
html[data-theme="dark"] .current-plan-card p,
html[data-theme="dark"] .plan-change-intro p,
html[data-theme="dark"] .subscription-choice>p {
  color: #929daf
}

html[data-theme="dark"] .subscription-center-head>span,
html[data-theme="dark"] .plan-change-intro small,
html[data-theme="dark"] .current-plan-card small {
  color: #bca8f5
}

html[data-theme="dark"] .current-plan-card {
  border-color: rgba(166, 129, 229, .17);
  background: linear-gradient(125deg, rgba(255, 255, 255, .035), rgba(125, 91, 207, .045));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18)
}

html[data-theme="dark"] #changePlan {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  color: #b0bac9
}

html[data-theme="dark"] #changePlan:hover,
html[data-theme="dark"] #changePlan.active {
  background: rgba(149, 109, 225, .1);
  color: #d5c8f7
}

html[data-theme="dark"] .plan-change-panel {
  border-color: rgba(166, 129, 229, .16);
  background: rgba(13, 20, 33, .64);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24)
}

html[data-theme="dark"] .plan-change-intro {
  background: linear-gradient(110deg, rgba(29, 185, 205, .07), rgba(126, 92, 211, .09))
}

html[data-theme="dark"] .subscription-choice {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .027)
}

html[data-theme="dark"] .subscription-choice.selected,
html[data-theme="dark"] .pro-choice {
  border-color: rgba(169, 132, 232, .22);
  background: linear-gradient(145deg, rgba(29, 185, 205, .035), rgba(126, 92, 211, .06), rgba(255, 255, 255, .025))
}

html[data-theme="dark"] .choice-label {
  border-color: rgba(181, 149, 237, .2);
  color: #d7cdf0
}

html[data-theme="dark"] .subscription-choice li {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025);
  color: #aeb8c7
}

html[data-theme="dark"] .subscription-choice>button {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #b6c0cf
}

@media(max-width:760px) {
  .subscription-center-head {
    margin-top: 0.3125rem
  }

  .current-plan-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 1.375rem
  }

  .current-plan-card #changePlan {
    width: 100%;
    justify-content: center
  }

  .plan-change-panel {
    padding: 0.75rem
  }

  .plan-change-intro {
    padding: 1.125rem
  }

  .subscription-plan-grid {
    grid-template-columns: 1fr
  }

  .subscription-choice {
    min-height: 26.875rem;
    padding: 1.3125rem
  }
}

@media(max-width:460px) {
  .subscription-center-head h1 {
    font-size: 1.8125rem
  }

  .subscription-center-head p br {
    display: none
  }

  .admin-approved {
    right: 1.125rem;
    top: 1.3125rem
  }

  .choice-price strong {
    font-size: 2.375rem
  }
}

/* Full subscription pages */
.account-settings-main:has(.subscription-page-content) {
  width: 100%;
  padding: 0
}

.subscription-page-content {
  position: relative;
  min-height: calc(100vh - 3.625rem - 16.25rem);
  padding: 3.4375rem max(1.375rem, calc((100vw - 66.25rem)/2)) 4.6875rem;
  overflow: hidden
}

.subscription-page-content:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(92, 76, 151, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 76, 151, .04) 1px, transparent 1px), linear-gradient(116deg, transparent 0 49.8%, rgba(112, 84, 199, .055) 50%, transparent 50.2%);
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, 100% 100%
}

.subscription-page-content:after {
  content: "";
  position: absolute;
  right: -10.625rem;
  top: -11.25rem;
  width: 31.25rem;
  height: 31.25rem;
  border: 1px solid rgba(112, 84, 199, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(31, 190, 209, .025);
  pointer-events: none
}

.subscription-page-content>* {
  position: relative;
  z-index: 1
}

.subscription-hero,
.plans-page-head {
  max-width: 47.5rem;
  margin: 0 auto 1.875rem;
  text-align: center
}

.subscription-hero>span,
.plans-page-head>span {
  display: block;
  color: #7357c8;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .17em
}

.subscription-hero h1,
.plans-page-head h1 {
  margin: 0.625rem 0 0.75rem;
  color: #172136;
  font-size: clamp(1.9375rem, 4vw, 2.6875rem);
  letter-spacing: -.045em
}

.subscription-hero p,
.plans-page-head p {
  margin: 0;
  color: #748096;
  font-size: 0.6875rem;
  line-height: 1.7
}

.subscription-summary {
  width: min(61.25rem, 100%);
  min-height: 10.3125rem;
  margin: 0 auto;
  padding: 1.875rem 1.9375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(112, 84, 199, .22);
  border-radius: 1.375rem;
  background: linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(112, 84, 199, .045));
  box-shadow: 0 22px 60px rgba(38, 46, 70, .09)
}

.subscription-summary:after {
  content: "";
  position: absolute;
  right: -4.0625rem;
  bottom: -7.8125rem;
  width: 17.5rem;
  height: 17.5rem;
  border: 1px solid rgba(112, 84, 199, .11);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(31, 190, 209, .025)
}

.subscription-summary>div,
.subscription-summary>a {
  position: relative;
  z-index: 1
}

.subscription-summary small {
  color: #7356c6;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .15em
}

.subscription-summary h2 {
  margin: 0.4375rem 0 0.375rem;
  color: #1d283d;
  font-size: 1.375rem
}

.subscription-summary p {
  margin: 0;
  color: #7a8597;
  font-size: 0.625rem
}

.subscription-summary.is-pro {
  background: linear-gradient(120deg, rgba(31, 190, 209, .06), rgba(112, 84, 199, .075), rgba(255, 255, 255, .75))
}

.subscription-change-link {
  height: 2.4375rem;
  padding: 0 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex: 0 0 auto;
  border: 1px solid rgba(112, 84, 199, .17);
  border-radius: 0.625rem;
  background: rgba(112, 84, 199, .07);
  color: #6249ad;
  font-size: 0.5625rem;
  font-weight: 800;
  transition: .18s ease
}

.subscription-change-link:hover {
  transform: translateY(-2px);
  background: rgba(112, 84, 199, .12);
  box-shadow: 0 9px 22px rgba(74, 58, 125, .1)
}

.admin-subscription-note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.8125rem;
  padding: 0.4375rem 0.5625rem;
  border-radius: 62.4375rem;
  background: rgba(27, 170, 141, .09);
  color: #178e78;
  font-size: 0.5rem;
  font-weight: 750
}

.subscription-benefits {
  width: min(61.25rem, 100%);
  margin: 1.125rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem
}

.subscription-benefits article {
  padding: 1.0625rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(69, 82, 106, .1);
  border-radius: 0.9375rem;
  background: rgba(255, 255, 255, .48)
}

.subscription-benefits article>i {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(31, 190, 209, .13), rgba(112, 84, 199, .15));
  color: #664db4
}

.subscription-benefits b,
.subscription-benefits span {
  display: block
}

.subscription-benefits b {
  color: #354157;
  font-size: 0.5625rem
}

.subscription-benefits span {
  margin-top: 0.25rem;
  color: #8490a2;
  font-size: 0.5rem;
  line-height: 1.45
}

.plans-page-head {
  position: relative;
  width: min(61.25rem, 100%);
  max-width: none;
  padding: 1.5625rem 1.875rem;
  text-align: left;
  border: 1px solid rgba(112, 84, 199, .2);
  border-radius: 1.25rem;
  background: linear-gradient(105deg, rgba(31, 190, 209, .07), rgba(112, 84, 199, .08), rgba(255, 255, 255, .55));
  box-shadow: 0 18px 48px rgba(39, 47, 69, .07)
}

.plans-page-head:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 0.1875rem;
  border-radius: 0.25rem;
  background: linear-gradient(#20bfd1, #785ee2)
}

.plans-page-head>a {
  position: absolute;
  right: 1.375rem;
  top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #728096;
  font-size: 0.5rem;
  font-weight: 750
}

.plans-page-head h1 {
  max-width: 45rem;
  margin-bottom: 0.4375rem;
  font-size: 1.875rem
}

.plans-frame {
  width: min(61.25rem, 100%);
  margin: 0 auto;
  padding: 1.125rem;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 1.4375rem;
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 24px 70px rgba(39, 47, 69, .08)
}

.plans-frame .subscription-plan-grid {
  margin: 0
}

.plans-frame .subscription-choice {
  min-height: 31.25rem
}

.subscription-footer {
  padding: 2.1875rem max(1.375rem, calc((100vw - 66.25rem)/2)) 1rem;
  border-top: 1px solid rgba(112, 84, 199, .16);
  background: linear-gradient(100deg, rgba(31, 190, 209, .035), rgba(112, 84, 199, .045), rgba(255, 255, 255, .65))
}

.subscription-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr .8fr 1fr .8fr;
  gap: 2.125rem
}

.subscription-footer-brand img {
  width: 10.625rem;
  height: auto
}

.subscription-footer-brand .settings-logo-dark {
  display: none
}

.subscription-footer p {
  max-width: 20rem;
  margin: 0.8125rem 0 0;
  color: #7d8899;
  font-size: 0.5rem;
  line-height: 1.65
}

.subscription-footer strong {
  display: block;
  margin-bottom: 0.75rem;
  color: #334056;
  font-size: 0.5625rem
}

.subscription-footer-grid>div:not(:first-child)>a,
.subscription-footer-grid>div:not(:first-child)>span {
  display: block;
  margin: 0.5rem 0;
  color: #7e899a;
  font-size: 0.5rem
}

.subscription-footer nav {
  display: flex;
  gap: 0.4375rem
}

.subscription-footer nav a {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(68, 81, 104, .1);
  border-radius: 0.5rem;
  color: #6d788b;
  background: rgba(255, 255, 255, .45)
}

.subscription-footer nav a:hover {
  border-color: rgba(112, 84, 199, .24);
  color: #674db5
}

.subscription-footer-bottom {
  margin-top: 1.6875rem;
  padding-top: 0.875rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(68, 81, 104, .09);
  color: #9099a7;
  font-size: 0.4375rem
}

html[data-theme="dark"] .subscription-page-content:before {
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(116deg, transparent 0 49.8%, rgba(130, 96, 215, .055) 50%, transparent 50.2%)
}

html[data-theme="dark"] .subscription-hero h1,
html[data-theme="dark"] .plans-page-head h1,
html[data-theme="dark"] .subscription-summary h2 {
  color: #f2f5f9
}

html[data-theme="dark"] .subscription-hero p,
html[data-theme="dark"] .plans-page-head p,
html[data-theme="dark"] .subscription-summary p {
  color: #919daf
}

html[data-theme="dark"] .subscription-summary,
html[data-theme="dark"] .plans-page-head,
html[data-theme="dark"] .plans-frame {
  border-color: rgba(167, 130, 230, .18);
  background: linear-gradient(120deg, rgba(255, 255, 255, .032), rgba(126, 92, 211, .055));
  box-shadow: 0 24px 65px rgba(0, 0, 0, .2)
}

html[data-theme="dark"] .subscription-change-link {
  border-color: rgba(175, 143, 234, .17);
  background: rgba(149, 109, 225, .09);
  color: #c8b7f6
}

html[data-theme="dark"] .subscription-benefits article {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .subscription-benefits b {
  color: #dce2eb
}

html[data-theme="dark"] .subscription-benefits span {
  color: #8491a4
}

html[data-theme="dark"] .subscription-footer {
  border-color: rgba(167, 130, 230, .14);
  background: linear-gradient(100deg, rgba(29, 185, 205, .025), rgba(126, 92, 211, .035), rgba(8, 14, 24, .88))
}

html[data-theme="dark"] .subscription-footer-brand .settings-logo-light {
  display: none
}

html[data-theme="dark"] .subscription-footer-brand .settings-logo-dark {
  display: block
}

html[data-theme="dark"] .subscription-footer strong {
  color: #dce2eb
}

html[data-theme="dark"] .subscription-footer p,
html[data-theme="dark"] .subscription-footer-grid>div:not(:first-child)>a,
html[data-theme="dark"] .subscription-footer-grid>div:not(:first-child)>span {
  color: #8793a5
}

html[data-theme="dark"] .subscription-footer nav a {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025);
  color: #9aa6b7
}

html[data-theme="dark"] .subscription-footer-bottom {
  border-color: rgba(255, 255, 255, .07)
}

@media(max-width:800px) {
  .subscription-page-content {
    padding-top: 2.375rem
  }

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

  .subscription-change-link {
    width: 100%;
    justify-content: center
  }

  .subscription-benefits {
    grid-template-columns: 1fr
  }

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

  .plans-page-head>a {
    position: static;
    margin-bottom: 1.25rem
  }

  .plans-frame {
    padding: 0.75rem
  }
}

@media(max-width:520px) {
  .subscription-page-content {
    padding-left: 0.8125rem;
    padding-right: 0.8125rem
  }

  .subscription-summary {
    padding: 1.4375rem 1.25rem
  }

  .plans-page-head {
    padding: 1.375rem 1.25rem
  }

  .plans-page-head h1 {
    font-size: 1.625rem
  }

  .subscription-footer {
    padding-left: 1.125rem;
    padding-right: 1.125rem
  }

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

  .subscription-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4375rem
  }
}

/* Marketing-style account header */
.account-settings-top {
  height: 4.375rem;
  padding: 0 max(1.75rem, calc((100vw - 80rem)/2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.75rem
}

.account-settings-top>.settings-brand {
  width: max-content;
  height: 2.6875rem;
  display: flex;
  align-items: center;
  overflow: hidden
}

.settings-brand .settings-logo {
  width: 11.875rem
}

.settings-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem
}

.settings-nav a {
  height: 2.375rem;
  padding: 0 0.9375rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  color: #657188;
  font-size: 0.625rem;
  font-weight: 750;
  transition: .18s ease
}

.settings-nav a:hover {
  border-color: rgba(112, 84, 199, .17);
  background: rgba(112, 84, 199, .055);
  color: #59449e;
  transform: translateY(-1px)
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5625rem
}

.settings-actions .theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto
}

.settings-actions .settings-back {
  height: 2.3125rem;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .2);
  transition: .18s ease
}

.settings-actions .settings-back:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(93, 73, 187, .28)
}

.settings-actions .settings-back i {
  font-size: 0.5625rem
}

html[data-theme="dark"] .settings-nav a {
  color: #9ba7b9
}

html[data-theme="dark"] .settings-nav a:hover {
  border-color: rgba(174, 140, 235, .18);
  background: rgba(149, 109, 225, .09);
  color: #d8cdf5
}

html[data-theme="dark"] .settings-actions .settings-back {
  color: #fff
}

@media(max-width:940px) {
  .account-settings-top {
    grid-template-columns: 1fr auto
  }

  .settings-nav {
    display: none
  }

  .settings-actions {
    grid-column: 2
  }
}

@media(max-width:560px) {
  .account-settings-top {
    height: 3.875rem;
    padding: 0 0.75rem;
    gap: 0.5rem
  }

  .account-settings-top>.settings-brand {
    width: 9.0625rem
  }

  .settings-brand .settings-logo {
    width: 9.0625rem
  }

  .settings-actions {
    gap: 0.375rem
  }

  .settings-actions .theme-toggle {
    width: 2.125rem;
    height: 2.125rem
  }

  .settings-actions .settings-back {
    width: 2.25rem;
    height: 2.125rem;
    padding: 0;
    justify-content: center;
    font-size: 0
  }

  .settings-actions .settings-back i {
    font-size: 0.625rem
  }
}

/* Fixed chat workspace: only the message timeline scrolls */
.workspace-layout {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden
}

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

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

.workspace-top {
  flex: 0 0 3.625rem;
  position: relative;
  z-index: 6
}

.workspace-chat-area {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable
}

.workspace-chat-area::-webkit-scrollbar {
  width: 0.5rem
}

.workspace-chat-area::-webkit-scrollbar-track {
  background: transparent
}

.workspace-chat-area::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .23);
  background-clip: padding-box
}

.workspace-chat-area::-webkit-scrollbar-thumb:hover {
  background: rgba(112, 84, 199, .38);
  background-clip: padding-box
}

.workspace-composer-wrap {
  z-index: 7
}

.workspace-conversations {
  min-height: 0;
  overscroll-behavior: contain
}

html[data-theme="dark"] .workspace-chat-area::-webkit-scrollbar-thumb {
  background: rgba(181, 151, 237, .2);
  background-clip: padding-box
}

html[data-theme="dark"] .workspace-chat-area::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 151, 237, .34);
  background-clip: padding-box
}

/* Account menu quota and full settings page */
.workspace-menu-usage {
  margin: 2px 0.4375rem 0.5rem;
  padding: 0.5625rem 0.5rem 0.5rem;
  border: 1px solid rgba(65, 78, 102, .08);
  border-radius: 0.625rem;
  background: rgba(75, 87, 108, .025)
}

.workspace-menu-usage>div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem
}

.workspace-menu-usage span {
  color: #8791a2;
  font-size: 0.4375rem;
  font-weight: 650
}

.workspace-menu-usage b {
  color: #566278;
  font-size: 0.5rem
}

.workspace-usage-track {
  height: 0.25rem;
  margin-top: 0.4375rem;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: rgba(75, 87, 108, .08)
}

.workspace-usage-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20bfd1, #755ee2);
  transition: width .25s ease
}

.workspace-menu-usage.is-pro .workspace-usage-track i {
  background: linear-gradient(90deg, #24bda9, #21bfd1)
}

.account-settings-main:has(.settings-page-content) {
  width: 100%;
  padding: 0
}

.settings-page-content {
  position: relative;
  width: min(66.25rem, calc(100% - 2.25rem));
  min-height: calc(100vh - 4.375rem - 14.375rem);
  margin: 0 auto;
  padding: 3rem 0 4.375rem
}

.settings-page-content:before {
  content: "";
  position: absolute;
  inset: 0 -5rem;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 94% 8%, rgba(112, 84, 199, .055), transparent 260px)
}

.settings-page-content>* {
  position: relative;
  z-index: 1
}

html[data-theme="dark"] .workspace-menu-usage {
  border-color: rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .022)
}

html[data-theme="dark"] .workspace-menu-usage span {
  color: #7f8ca0
}

html[data-theme="dark"] .workspace-menu-usage b {
  color: #aeb8c7
}

html[data-theme="dark"] .workspace-usage-track {
  background: rgba(255, 255, 255, .07)
}

@media(max-width:560px) {
  .settings-page-content {
    width: min(100% - 1.5rem, 31.25rem);
    padding-top: 1.875rem;
    padding-bottom: 3rem
  }
}

/* Neutral sidebar accents */
.workspace-new-chat {
  color: #59667a
}

.workspace-history-head small {
  background: rgba(75, 87, 108, .065);
  color: #667287
}

.workspace-conversation.active,
.workspace-conversation:hover {
  color: #425068
}

.workspace-conversation.active>span i,
.workspace-conversation:hover>span i {
  color: #617087
}

.workspace-empty-history i {
  color: #69758a
}

.account-menu-trigger,
.workspace-usermenu button i {
  color: #68758a
}

.account-menu-trigger:hover,
.account-menu-trigger[aria-expanded="true"] {
  color: #3f4d63
}

.workspace-usermenu button:hover {
  color: #3f4d63
}

.workspace-usermenu button:hover i {
  color: #536177
}

html[data-theme="dark"] .workspace-new-chat,
html[data-theme="dark"] .workspace-new-chat i,
html[data-theme="dark"] .workspace-new-chat span {
  color: #c6ceda
}

html[data-theme="dark"] .workspace-history-head small {
  background: rgba(255, 255, 255, .055);
  color: #c4ccd8
}

html[data-theme="dark"] .workspace-conversation:hover,
html[data-theme="dark"] .workspace-conversation.active {
  color: #d8dee7
}

html[data-theme="dark"] .workspace-conversation.active>span i,
html[data-theme="dark"] .workspace-conversation:hover>span i {
  color: #c8d0dc
}

html[data-theme="dark"] .workspace-empty-history i {
  color: #aeb8c7
}

html[data-theme="dark"] .account-menu-trigger,
html[data-theme="dark"] .workspace-usermenu button i {
  color: #b8c1ce
}

html[data-theme="dark"] .account-menu-trigger:hover,
html[data-theme="dark"] .account-menu-trigger[aria-expanded="true"],
html[data-theme="dark"] .workspace-usermenu button:hover,
html[data-theme="dark"] .workspace-usermenu button:hover i {
  color: #eef2f7
}

/* User avatars */
.profile-avatar {
  display: inline-block;
  flex: 0 0 auto;
  background-image: var(--avatar-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent !important;
  overflow: hidden
}

.workspace-avatar.profile-avatar,
.workspace-menu-profile .profile-avatar,
.msg .profile-avatar {
  border: 1px solid rgba(132, 108, 222, .22);
  box-shadow: 0 5px 16px rgba(25, 34, 58, .16)
}

.account-field select {
  width: 100%;
  height: 2.6875rem;
  padding: 0 2.625rem 0 0.75rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.6875rem;
  outline: 0;
  cursor: pointer
}

.account-field select:focus {
  border-color: rgba(112, 84, 199, .4);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(112, 84, 199, .07)
}

.avatar-picker {
  margin-top: 1.25rem;
  padding-top: 1.1875rem;
  border-top: 1px solid rgba(66, 79, 102, .09)
}

.avatar-picker-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 0.8125rem
}

.avatar-picker-head small {
  color: #7557c6;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.avatar-picker-head h4 {
  margin: 0.25rem 0 0;
  color: #263147;
  font-size: 0.8125rem
}

.avatar-picker-head>span {
  color: #8792a2;
  font-size: 0.5rem
}

.avatar-options {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.5625rem
}

.avatar-option {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.8125rem;
  background: transparent;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.avatar-option .profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 0.625rem
}

.avatar-option>i {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #7757d1;
  color: #fff;
  font-size: 0.4375rem;
  opacity: 0;
  transform: scale(.7);
  transition: .18s ease
}

.avatar-option:hover {
  transform: translateY(-2px);
  border-color: rgba(112, 84, 199, .28)
}

.avatar-option.active {
  border-color: #7557c6;
  box-shadow: 0 0 0 4px rgba(117, 87, 198, .09)
}

.avatar-option.active>i {
  opacity: 1;
  transform: scale(1)
}

html[data-theme="dark"] .account-field select {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1320;
  color: #eef2f7;
  color-scheme: dark
}

html[data-theme="dark"] .account-field select:focus {
  background: #0d1725;
  border-color: rgba(169, 129, 232, .42)
}

html[data-theme="dark"] .avatar-picker {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .avatar-picker-head h4 {
  color: #edf1f7
}

html[data-theme="dark"] .avatar-option>i {
  border-color: #111927
}

@media(max-width:760px) {
  .avatar-options {
    grid-template-columns: repeat(5, 1fr)
  }
}

/* Avatar profile controls and robust sprite rendering */
.profile-avatar {
  background-color: transparent !important;
  background-image: var(--avatar-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important
}

.workspace-avatar.profile-avatar,
.workspace-menu-profile .profile-avatar,
.msg .profile-avatar {
  background-image: var(--avatar-image) !important
}

.msg .profile-avatar {
  width: 2.125rem !important;
  height: 2.125rem !important;
  border-radius: 0.6875rem !important
}

.workspace-menu-profile .profile-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem
}

.workspace-avatar.profile-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.6875rem
}

.profile-personalization {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8125rem;
  margin-top: 0.9375rem;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(66, 79, 102, .09)
}

.profile-personalization>label {
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.profile-personalization select {
  width: 100%;
  height: 2.6875rem;
  margin-top: 0.4375rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.6875rem;
  outline: 0
}

.avatar-change-control>span {
  display: block;
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.avatar-change-control>div {
  height: 2.6875rem;
  margin-top: 0.4375rem;
  padding: 0.3125rem 0.4375rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.625rem;
  background: #f0f1ef
}

.current-profile-avatar {
  width: 1.9375rem;
  height: 1.9375rem;
  border-radius: 0.5rem
}

.avatar-change-control button {
  height: 1.9375rem;
  margin-left: auto;
  padding: 0 0.6875rem;
  border: 1px solid rgba(112, 84, 199, .15);
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .07);
  color: #6249ae;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.avatar-change-control button i {
  margin-right: 0.3125rem
}

.avatar-modal-back {
  z-index: 160;
  padding: 1.25rem;
  background: rgba(8, 13, 23, .7);
  backdrop-filter: blur(10px)
}

.avatar-modal {
  width: min(30rem, 100%);
  padding: 1.375rem;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 1.25rem;
  background: #fbfbf9;
  color: #172136;
  box-shadow: 0 30px 90px rgba(13, 20, 34, .32)
}

.avatar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem
}

.avatar-modal-head small {
  color: #7456c5;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .14em
}

.avatar-modal-head h2 {
  margin: 0.3125rem 0 0.25rem;
  font-size: 1.25rem
}

.avatar-modal-head p {
  margin: 0;
  color: #7d899a;
  font-size: 0.5625rem
}

.avatar-modal-head>button {
  width: 1.9375rem;
  height: 1.9375rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(66, 79, 102, .11);
  border-radius: 0.5625rem;
  background: transparent;
  color: #667287;
  cursor: pointer
}

.avatar-modal .avatar-options {
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6875rem
}

.avatar-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(66, 79, 102, .09)
}

.avatar-modal-actions button {
  height: 2.3125rem;
  padding: 0 0.875rem;
  border-radius: 0.5625rem;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.avatar-modal-actions button:first-child {
  border: 1px solid rgba(66, 79, 102, .12);
  background: #efefec;
  color: #445064
}

.avatar-modal-actions button:last-child {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .2)
}

html[data-theme="dark"] .profile-personalization {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .profile-personalization>label,
html[data-theme="dark"] .avatar-change-control>span {
  color: #aeb8c7
}

html[data-theme="dark"] .profile-personalization select,
html[data-theme="dark"] .avatar-change-control>div {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1220;
  color: #eef2f7
}

html[data-theme="dark"] .avatar-change-control button {
  border-color: rgba(169, 129, 232, .17);
  background: rgba(126, 92, 210, .1);
  color: #c9b5ed
}

html[data-theme="dark"] .avatar-modal {
  border-color: rgba(169, 129, 232, .2);
  background: #111927;
  color: #eef2f7
}

html[data-theme="dark"] .avatar-modal-head p {
  color: #929dae
}

html[data-theme="dark"] .avatar-modal-head>button {
  border-color: rgba(255, 255, 255, .08);
  color: #aeb8c7
}

html[data-theme="dark"] .avatar-modal-actions {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .avatar-modal-actions button:first-child {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #dce2eb
}

@media(max-width:600px) {
  .profile-personalization {
    grid-template-columns: 1fr
  }

  .avatar-modal {
    padding: 1.125rem
  }

  .avatar-modal .avatar-options {
    gap: 0.4375rem
  }
}

/* Avatar modal alignment and admin avatars */
.avatar-modal-back {
  padding: 1.5rem !important;
  overflow-y: auto
}

.avatar-modal {
  width: min(30rem, calc(100vw - 3rem));
  max-height: calc(100dvh - 3rem);
  margin: auto;
  overflow-y: auto
}

.avatar-modal .avatar-options {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.avatar-modal .avatar-option {
  min-width: 0;
  width: 100%
}

.admin-profile .avatar.profile-avatar,
.admin-identity .avatar.profile-avatar,
.management-user>span.profile-avatar {
  background-color: transparent !important;
  background-image: var(--avatar-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important
}

.admin-profile .avatar.profile-avatar,
.admin-identity .avatar.profile-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(132, 108, 222, .2);
  box-shadow: 0 5px 16px rgba(25, 34, 58, .14)
}

.management-user>span.profile-avatar {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(132, 108, 222, .18)
}

@media(max-width:560px) {
  .avatar-modal-back {
    padding: 0.875rem !important
  }

  .avatar-modal {
    width: calc(100vw - 1.75rem);
    max-height: calc(100dvh - 1.75rem);
    padding: 1.0625rem
  }

  .avatar-modal-head {
    gap: 0.625rem
  }

  .avatar-modal .avatar-options {
    gap: 0.375rem
  }

  .avatar-modal-actions {
    position: sticky;
    bottom: -1.0625rem;
    margin-left: -1.0625rem;
    margin-right: -1.0625rem;
    padding: 0.8125rem 1.0625rem 1.0625rem;
    background: inherit
  }
}

/* Admin panel visual revision */
.admin-head {
  height: 3.625rem !important;
  min-height: 3.625rem !important
}

.admin-head>span {
  display: none !important
}

.admin-theme-toggle {
  top: 0.6875rem !important
}

.admin-profile>button {
  display: none !important
}

.admin-page-title {
  padding-top: 1.5625rem
}

.admin-metric {
  min-height: 7.625rem
}

.admin-metric>span {
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent) !important
}

.admin-metric:nth-child(1)>span {
  color: #3b82f6
}

.admin-metric:nth-child(2)>span {
  color: #14b8a6
}

.admin-metric:nth-child(3)>span {
  color: #ec4899
}

.admin-metric:nth-child(4)>span {
  color: #f59e0b
}

.admin-metric:nth-child(5)>span {
  color: #8b5cf6
}

.service-list article:nth-child(1)>i {
  color: #3b82f6;
  background: rgba(59, 130, 246, .11)
}

.service-list article:nth-child(2)>i {
  color: #ec4899;
  background: rgba(236, 72, 153, .1)
}

.service-list article:nth-child(3)>i {
  color: #14b8a6;
  background: rgba(20, 184, 166, .1)
}

.service-list article>span,
.live-status {
  padding: 0.25rem 0.4375rem !important;
  border-radius: 0.4375rem !important;
  font-size: 0.4375rem !important;
  font-weight: 800 !important
}

.overview-shortcuts button:nth-child(1)>i:first-child {
  color: #3b82f6;
  background: rgba(59, 130, 246, .11)
}

.overview-shortcuts button:nth-child(2)>i:first-child {
  color: #a855f7;
  background: rgba(168, 85, 247, .1)
}

.overview-shortcuts button:nth-child(3)>i:first-child {
  color: #f59e0b;
  background: rgba(245, 158, 11, .11)
}

.assistant-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 20rem));
  justify-content: start
}

.assistant-manage-card {
  min-height: 13.625rem;
  padding: 0.9375rem
}

.assistant-card-icon {
  width: 2.1875rem;
  height: 2.1875rem
}

.assistant-manage-card>small {
  margin-top: 0.875rem
}

.assistant-manage-card p {
  min-height: 0
}

.assistant-meta {
  margin: 0.75rem 0
}

.assistant-card-top .badge {
  padding: 0.25rem 0.4375rem !important;
  font-size: 0.4375rem !important
}

.assistant-manage-card.tone-0 .assistant-card-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, .11)
}

.assistant-manage-card.tone-1 .assistant-card-icon {
  color: #ec4899;
  background: rgba(236, 72, 153, .1)
}

.assistant-manage-card.tone-2 .assistant-card-icon {
  color: #14b8a6;
  background: rgba(20, 184, 166, .1)
}

.users-overview article {
  display: grid;
  grid-template-columns: 2.375rem 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0.75rem;
  align-content: center
}

.users-overview-icon {
  grid-row: 1/4;
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 0.6875rem;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 11%, transparent)
}

.users-overview article small,
.users-overview article strong,
.users-overview article span {
  grid-column: 2
}

.users-overview .color-card-0 .users-overview-icon {
  color: #3b82f6
}

.users-overview .color-card-1 .users-overview-icon {
  color: #14b8a6
}

.users-overview .color-card-2 .users-overview-icon {
  color: #a855f7
}

.users-overview .color-card-3 .users-overview-icon {
  color: #f59e0b
}

.users-overview strong {
  margin: 0.25rem 0 0.1875rem
}

.admin-system-grid .system-card:nth-child(1)>span {
  color: #3b82f6;
  background: rgba(59, 130, 246, .11)
}

.admin-system-grid .system-card:nth-child(2)>span {
  color: #a855f7;
  background: rgba(168, 85, 247, .1)
}

.admin-system-grid .system-card:nth-child(3)>span {
  color: #ec4899;
  background: rgba(236, 72, 153, .1)
}

.system-card>.badge,
.status-online {
  padding: 0.25rem 0.375rem !important;
  border-radius: 0.4375rem !important;
  font-size: 0.4375rem !important;
  white-space: nowrap
}

.admin-settings-grid .settings-card:first-child .settings-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, .11)
}

.admin-settings-grid .settings-card:last-child .settings-icon {
  color: #ec4899;
  background: rgba(236, 72, 153, .1)
}

.admin-settings-grid .field {
  margin-top: 0.6875rem
}

.admin-settings-grid .field label {
  font-size: 0.5rem
}

.admin-settings-grid .field input {
  height: 2.25rem !important;
  padding: 0 0.6875rem !important;
  font-size: 0.5625rem !important;
  border-radius: 0.5625rem !important
}

.admin-settings-grid .settings-card {
  padding: 1.125rem !important
}

.admin-settings-grid .settings-icon {
  width: 2.1875rem;
  height: 2.1875rem;
  margin-bottom: 0.6875rem
}

.admin-settings-grid .settings-card>p {
  font-size: 0.5625rem !important
}

.profile-avatar,
.admin-profile .avatar.profile-avatar,
.admin-identity .avatar.profile-avatar,
.management-user>span.profile-avatar {
  background-size: cover !important;
  border: 0 !important;
  box-shadow: none !important
}

.admin-profile .avatar.profile-avatar,
.admin-identity .avatar.profile-avatar,
.management-user>span.profile-avatar,
.workspace-avatar.profile-avatar,
.workspace-menu-profile .profile-avatar,
.msg .profile-avatar {
  border-radius: 50% !important
}

html[data-theme="dark"] .admin-metric>span,
html[data-theme="dark"] .users-overview-icon {
  background: color-mix(in srgb, currentColor 12%, transparent) !important
}

/* Assistant icons and exact one-line message rhythm */
.workspace-messages .msg {
  align-items: flex-start;
  gap: 0.75rem
}

.workspace-messages .msg .avatar {
  width: 2.125rem !important;
  height: 2.125rem !important;
  flex: 0 0 2.125rem;
  border-radius: 50% !important
}

.workspace-messages .bubble {
  min-height: 2.125rem;
  padding: 0.375rem 0.875rem;
  box-sizing: border-box
}

.workspace-messages .message-body {
  max-width: 78%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.workspace-messages .message-body>.bubble {
  max-width: 100%
}

.message-duration {
  margin: 0.3125rem 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  color: #919bad;
  font-size: 0.5rem;
  font-weight: 650;
  line-height: 1.2
}

.message-duration i {
  font-size: 0.5rem;
  color: #7b68bc
}

html[data-theme="dark"] .message-duration {
  color: #6f7c90
}

html[data-theme="dark"] .message-duration i {
  color: #9077c8
}

.workspace-messages .msg.me .message-body {
  align-items: flex-end
}

.message-date-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.125rem 0 0.625rem;
  color: #8a94a5;
  font-size: 0.5625rem;
  font-weight: 800
}

.message-date-divider:before,
.message-date-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(75, 87, 108, .1)
}

.message-date-divider span {
  padding: 0.25rem 0.625rem;
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, .55)
}

.message-meta {
  margin: 0.3125rem 0.25rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: #919bad
}

.message-meta .message-duration {
  margin: 0
}

.workspace-messages .msg:not(.me) .message-body:has(.assistant-message-meta .message-citations) {
  width: 78%
}

.assistant-message-meta {
  width: calc(100% - 0.5rem);
  justify-content: space-between;
  gap: 0.625rem
}

.message-meta-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem
}

.message-time {
  font-size: 0.5rem;
  font-weight: 700
}

.message-edit,
.message-actions button {
  border: 0;
  background: transparent;
  color: #7d8798;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 750;
  cursor: pointer
}

.message-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem
}

.message-actions {
  margin: 0.3125rem 0.1875rem 0
}

.message-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.4375rem;
  border-radius: 0.4375rem
}

.message-actions button:hover,
.message-actions button.is-speaking,
.message-edit:hover {
  background: rgba(112, 84, 199, .08);
  color: #684db6
}

.conversation-danger-card {
  border-color: rgba(195, 75, 96, .16) !important
}

.conversation-danger-card>p {
  color: #7d8798;
  font-size: 0.625rem;
  line-height: 1.6
}

.setting-danger {
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid rgba(195, 75, 96, .2);
  border-radius: 0.625rem;
  background: rgba(195, 75, 96, .07);
  color: #b74357;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.setting-danger:disabled {
  opacity: .45;
  cursor: not-allowed
}

html[data-theme="dark"] .message-date-divider span {
  background: rgba(255, 255, 255, .04)
}

html[data-theme="dark"] .message-date-divider:before,
html[data-theme="dark"] .message-date-divider:after {
  background: rgba(255, 255, 255, .07)
}

.message-meta,
.message-duration {
  font-size: 0.625rem;
  line-height: 1.35
}

.message-time {
  font-size: 0.625rem
}

.message-duration i {
  font-size: 0.625rem
}

.assistant-answer-bubble {
  position: relative;
  padding-right: 3.25rem !important;
  padding-bottom: 2.375rem !important
}

.assistant-answer-content {
  min-width: 0
}

.assistant-answer-bubble.is-streaming .message-actions,
.streaming-message-meta {
  visibility: hidden;
  pointer-events: none
}

.assistant-answer-bubble .message-actions {
  position: absolute;
  right: 0.5625rem;
  bottom: 0.5rem;
  margin: 0
}

.assistant-answer-bubble .message-actions button {
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  color: #7d8798;
  font-size: 0.75rem;
  transition: background .16s ease, color .16s ease
}

.assistant-answer-bubble .message-actions button span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.assistant-answer-bubble .message-actions button:hover,
.assistant-answer-bubble .message-actions button.is-speaking {
  background: rgba(75, 87, 108, .09);
  color: var(--text)
}

.assistant-answer-bubble.is-single-line {
  padding-bottom: 0.375rem !important;
  min-height: 2.375rem;
  display: flex;
  align-items: center
}

.assistant-answer-bubble.is-single-line .assistant-answer-content {
  padding-right: 2px
}

.assistant-answer-bubble.is-single-line .message-actions {
  top: 50%;
  right: 0.5rem;
  bottom: auto;
  transform: translateY(-50%)
}

html[data-theme="dark"] .assistant-answer-bubble .message-actions button {
  color: #9aa5b6
}

html[data-theme="dark"] .assistant-answer-bubble .message-actions button:hover,
html[data-theme="dark"] .assistant-answer-bubble .message-actions button.is-speaking {
  background: rgba(255, 255, 255, .07);
  color: #eef2f7
}

.workspace-messages .msg.me .bubble {
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.workspace-messages .bubble,
.workspace-messages .assistant-answer-content,
.workspace-messages .assistant-answer-content * {
  -webkit-user-select: text !important;
  user-select: text !important
}

.workspace-messages .bubble::selection,
.workspace-messages .assistant-answer-content::selection,
.workspace-messages .assistant-answer-content *::selection {
  background: rgba(112, 84, 199, .28);
  color: inherit
}

.assistant-answer-bubble .message-actions button {
  border-radius: 50%
}

.workspace-tool {
  border-radius: 50%
}

.workspace-tool:hover {
  border-radius: 50%;
  background: rgba(75, 87, 108, .1);
  color: var(--text)
}

html[data-theme="dark"] .workspace-tool:hover {
  background: rgba(255, 255, 255, .08);
  color: #eef2f7
}

.message-edit {
  min-height: 1.6875rem;
  padding: 0 0.5625rem;
  border: 1px solid rgba(75, 87, 108, .12);
  border-radius: 62.4375rem;
  background: rgba(75, 87, 108, .045);
  color: #68758a;
  transition: background .16s ease, border-color .16s ease, color .16s ease
}

.message-edit:hover {
  border-color: rgba(75, 87, 108, .22);
  border-radius: 62.4375rem;
  background: rgba(75, 87, 108, .1);
  color: var(--text)
}

html[data-theme="dark"] .message-edit {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  color: #aab4c3
}

html[data-theme="dark"] .message-edit:hover {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #eef2f7
}

.assistant-answer-bubble.is-single-line .message-actions {
  right: 0.25rem
}

.assistant-answer-bubble.is-single-line .message-actions button {
  width: 2.125rem !important;
  min-width: 2.125rem !important;
  max-width: 2.125rem !important;
  height: 2.125rem !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  box-sizing: border-box
}

.assistant-answer-bubble.is-single-line .message-actions button i {
  display: block;
  margin: 0;
  line-height: 1;
  text-align: center
}

.assistant-answer-bubble:has(.message-pdf-download) {
  padding-bottom: 2.75rem !important
}

.assistant-answer-bubble .message-actions {
  display: flex;
  align-items: center;
  gap: 0.3125rem
}

.message-pdf-download {
  height: 2.125rem;
  padding: 0 0.6875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .09);
  color: #684db6;
  font-size: 0.625rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease
}

.message-pdf-download:hover {
  background: rgba(112, 84, 199, .16);
  color: #563ca6
}

.message-pdf-download i {
  font-size: 0.8125rem
}

.message-pdf-download span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important
}

html[data-theme="dark"] .message-pdf-download {
  background: rgba(151, 117, 223, .14);
  color: #bca3ec
}

html[data-theme="dark"] .message-pdf-download:hover {
  background: rgba(151, 117, 223, .23);
  color: #d2c1f3
}

.assistant-answer-bubble.is-single-line:has(.message-pdf-download) {
  padding-bottom: 0.375rem !important;
  padding-right: 8.75rem !important
}

.assistant-answer-bubble.is-single-line:has(.message-pdf-download) .message-actions {
  right: 0.375rem
}

/* Compact source citations displayed at the end of knowledge-backed answers */
.message-citations {
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: 0
}

.message-citations-label {
  color: #7d8798;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: .02em
}

.message-citation-list {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0.9375rem
}

.message-citation {
  position: relative;
  width: 0.9375rem;
  height: 0.9375rem;
  display: grid;
  place-items: center;
  flex: 0 0 0.9375rem;
  border: 1px solid var(--source-border, rgba(82, 101, 127, .24));
  border-radius: 50%;
  background: var(--source-bg, #edf2f7);
  color: var(--source-color, #52657f);
  font-size: 0.4375rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease
}

.message-citation:hover,
.message-citation:focus-visible {
  z-index: 4;
  transform: translateY(-2px);
  border-color: var(--source-color, #52657f);
  background: var(--source-bg-strong, #e2e8f0);
  color: var(--source-color, #40536d);
  outline: none
}

.message-citation-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.625rem);
  width: max-content;
  min-width: 8.5rem;
  max-width: min(17rem, 70vw);
  padding: 0.5625rem 0.6875rem;
  display: grid;
  gap: 0.125rem;
  border: 1px solid rgba(75, 87, 108, .12);
  border-radius: 0.6875rem;
  background: #fff;
  color: #354157;
  box-shadow: 0 0.75rem 2rem rgba(28, 35, 51, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition: opacity .14s ease, visibility .14s ease, transform .14s ease
}

.message-citation-cluster {
  position: relative
}

.message-citation-cluster summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1rem;
  color: #6e788a;
  cursor: pointer;
  list-style: none
}

.message-citation-cluster summary::-webkit-details-marker {
  display: none
}

.message-citation-stack {
  position: relative;
  height: 0.9375rem;
  display: block
}

.message-citation-stack.has-2 {
  width: 1.25rem
}

.message-citation-stack.has-3 {
  width: 1.5625rem
}

.message-citation-stack>span {
  position: absolute;
  top: 0;
  left: calc(var(--citation-index) * 0.3125rem);
  z-index: calc(3 - var(--citation-index));
  width: 0.9375rem;
  height: 0.9375rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #f7f8fa;
  border-radius: 50%;
  background: var(--source-bg, #edf2f7);
  color: var(--source-color, #52657f);
  font-size: 0.375rem
}

.message-citation-count {
  font-size: 0.5rem;
  font-weight: 850;
  line-height: 1
}

.message-citation-cluster summary:hover,
.message-citation-cluster summary:focus-visible {
  color: #52657f;
  outline: none
}

.message-citation-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4375rem);
  z-index: 30;
  width: min(13.5rem, 68vw);
  max-height: 11rem;
  padding: 0.1875rem;
  display: grid;
  gap: 0.0625rem;
  overflow-y: auto;
  border: 1px solid rgba(75, 87, 108, .12);
  border-radius: 0.875rem;
  color-scheme: light;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 249, 253, .98));
  color: #354157;
  box-shadow: 0 0.75rem 2rem rgba(28, 35, 51, .18), inset 0 1px rgba(255, 255, 255, .9);
  backdrop-filter: blur(1rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition: opacity .14s ease, visibility .14s ease, transform .14s ease
}

.message-citation-cluster:hover .message-citation-menu,
.message-citation-cluster[open] .message-citation-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0)
}

.message-citation-menu-link {
  min-width: 0;
  min-height: 1.75rem;
  padding: 0.25rem 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease
}

.message-citation-menu-link:hover,
.message-citation-menu-link:focus-visible {
  border-color: rgba(82, 101, 127, .14);
  border-radius: 0.75rem;
  background: rgba(82, 101, 127, .08);
  outline: none
}

.message-citation-menu-icon {
  width: 0.875rem;
  height: 0.875rem;
  display: grid;
  place-items: center;
  flex: 0 0 0.875rem;
  border-radius: 50%;
  background: var(--source-bg, #edf2f7);
  color: var(--source-color, #52657f);
  font-size: 0.375rem
}

.message-citation-menu-link>span:last-child {
  min-width: 0;
  display: block
}

.message-citation-menu-link b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  font-size: 0.5625rem;
  line-height: 1.25
}

.message-inline-citation-group {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: min(11rem, 52vw);
  margin: 0 0.16rem;
  vertical-align: 0.08em;
  white-space: nowrap;
  line-height: 1
}

.message-inline-citation {
  height: 1.125rem;
  max-width: min(9rem, 46vw);
  padding: 0 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-sizing: border-box;
  border: 1px solid var(--source-border, rgba(82, 101, 127, .24));
  border-radius: 999px;
  background: var(--source-bg, #edf2f7);
  color: var(--source-color, #52657f);
  font-size: 0.55rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.08em;
  white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, transform .14s ease
}

.message-inline-citation:not(.message-inline-citation-group > .message-inline-citation) {
  margin: 0 0.16rem
}

.message-inline-citation i {
  flex: 0 0 auto;
  font-size: 0.48rem
}

.message-inline-citation span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}

.message-inline-citation:hover,
.message-inline-citation:focus-visible {
  border-color: var(--source-color, #52657f);
  background: var(--source-bg-strong, #e2e8f0);
  color: var(--source-color, #40536d);
  outline: none;
  transform: translateY(-1px)
}

.message-inline-citation-group > .message-inline-citation {
  min-width: 0;
  border-radius: 999px 0 0 999px
}

.message-inline-citation-more {
  height: 1.125rem;
  padding: 0 0.34rem;
  border: 1px solid var(--source-border, rgba(82, 101, 127, .24));
  border-left: 0;
  border-radius: 0 999px 999px 0;
  background: var(--source-bg, #edf2f7);
  color: var(--source-color, #52657f);
  font: inherit;
  font-size: 0.5rem;
  font-weight: 850;
  cursor: pointer
}

.message-inline-citation-more:hover,
.message-inline-citation-more:focus-visible {
  background: var(--source-bg-strong, #e2e8f0);
  outline: none
}

.message-inline-citation-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 32;
  width: min(13.5rem, 68vw);
  max-height: 11rem;
  padding: 0.1875rem;
  display: grid;
  gap: 0.0625rem;
  overflow-y: auto;
  border: 1px solid rgba(75, 87, 108, .12);
  border-radius: 0.875rem;
  color-scheme: light;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 249, 253, .98));
  color: #354157;
  box-shadow: 0 0.75rem 2rem rgba(28, 35, 51, .18), inset 0 1px rgba(255, 255, 255, .9);
  backdrop-filter: blur(1rem);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition: opacity .14s ease, visibility .14s ease, transform .14s ease
}

.message-inline-citation-group:hover .message-inline-citation-popover,
.message-inline-citation-group.is-open .message-inline-citation-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0)
}

.message-citation.tone-0,
.message-citation-stack>span.tone-0,
.message-citation-menu-icon.tone-0,
.message-inline-citation.tone-0,
.message-inline-citation-more.tone-0 {
  --source-color: #52657f;
  --source-bg: #edf2f7;
  --source-bg-strong: #e2e8f0;
  --source-border: #d3dde8
}

.message-citation.tone-1,
.message-citation-stack>span.tone-1,
.message-citation-menu-icon.tone-1,
.message-inline-citation.tone-1,
.message-inline-citation-more.tone-1 {
  --source-color: #2f72c4;
  --source-bg: #e6f0fc;
  --source-bg-strong: #d5e6fa;
  --source-border: #c8dcf5
}

.message-citation.tone-2,
.message-citation-stack>span.tone-2,
.message-citation-menu-icon.tone-2,
.message-inline-citation.tone-2,
.message-inline-citation-more.tone-2 {
  --source-color: #138a79;
  --source-bg: #dff5ef;
  --source-bg-strong: #cceee5;
  --source-border: #bee6dc
}

.message-citation.tone-3,
.message-citation-stack>span.tone-3,
.message-citation-menu-icon.tone-3,
.message-inline-citation.tone-3,
.message-inline-citation-more.tone-3 {
  --source-color: #c36b12;
  --source-bg: #fff0dd;
  --source-bg-strong: #ffe4c2;
  --source-border: #f5d8b1
}

.message-citation.tone-4,
.message-citation-stack>span.tone-4,
.message-citation-menu-icon.tone-4,
.message-inline-citation.tone-4,
.message-inline-citation-more.tone-4 {
  --source-color: #c94b70;
  --source-bg: #fce7ee;
  --source-bg-strong: #f9d5e1;
  --source-border: #f1c7d5
}

.message-citation.tone-5,
.message-citation-stack>span.tone-5,
.message-citation-menu-icon.tone-5,
.message-inline-citation.tone-5,
.message-inline-citation-more.tone-5 {
  --source-color: #548d25;
  --source-bg: #eaf5e1;
  --source-bg-strong: #dceecf;
  --source-border: #cee4bd
}

.message-citation-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid rgba(75, 87, 108, .12);
  border-bottom: 1px solid rgba(75, 87, 108, .12);
  background: inherit;
  transform: translate(-50%, -0.25rem) rotate(45deg)
}

.message-citation-tooltip b {
  overflow-wrap: anywhere;
  font-size: 0.6875rem;
  line-height: 1.35
}

.message-citation-tooltip small {
  color: #8791a1;
  font-size: 0.5625rem;
  font-weight: 700
}

.message-citation:hover .message-citation-tooltip,
.message-citation:focus-visible .message-citation-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0)
}

html[data-theme="dark"] .message-citations-label {
  color: #8f9aaa
}

html[data-theme="dark"] .message-citation-tooltip {
  border-color: rgba(255, 255, 255, .1);
  background: #19212d;
  color: #edf1f7;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .32)
}

html[data-theme="dark"] .message-citation-stack>span {
  border-color: #222b38;
}

html[data-theme="dark"] .message-citation-cluster summary {
  color: #a8b2c1
}

html[data-theme="dark"] .message-citation-menu {
  border-color: rgba(255, 255, 255, .1);
  color-scheme: dark;
  background: linear-gradient(145deg, rgba(31, 41, 55, .98), rgba(20, 27, 38, .98));
  color: #edf1f7;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05)
}

html[data-theme="dark"] .message-inline-citation-popover {
  border-color: rgba(255, 255, 255, .1);
  color-scheme: dark;
  background: linear-gradient(145deg, rgba(31, 41, 55, .98), rgba(20, 27, 38, .98));
  color: #edf1f7;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05)
}

html[data-theme="dark"] .message-citation-menu-link:hover,
html[data-theme="dark"] .message-citation-menu-link:focus-visible {
  border-color: rgba(255, 255, 255, .08);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, .065)
}

html[data-theme="dark"] :is(.message-citation, .message-citation-stack>span, .message-citation-menu-icon, .message-inline-citation, .message-inline-citation-more).tone-0 {
  --source-color: #b8c7da;
  --source-bg: #27323f;
  --source-bg-strong: #334150;
  --source-border: #425267
}

html[data-theme="dark"] :is(.message-citation, .message-citation-stack>span, .message-citation-menu-icon, .message-inline-citation, .message-inline-citation-more).tone-1 {
  --source-color: #83b9f4;
  --source-bg: #203a57;
  --source-bg-strong: #294968;
  --source-border: #355a7b
}

html[data-theme="dark"] :is(.message-citation, .message-citation-stack>span, .message-citation-menu-icon, .message-inline-citation, .message-inline-citation-more).tone-2 {
  --source-color: #76d5c4;
  --source-bg: #183f3b;
  --source-bg-strong: #20504a;
  --source-border: #28635b
}

html[data-theme="dark"] :is(.message-citation, .message-citation-stack>span, .message-citation-menu-icon, .message-inline-citation, .message-inline-citation-more).tone-3 {
  --source-color: #f4b56f;
  --source-bg: #4b351e;
  --source-bg-strong: #5d4327;
  --source-border: #735332
}

html[data-theme="dark"] :is(.message-citation, .message-citation-stack>span, .message-citation-menu-icon, .message-inline-citation, .message-inline-citation-more).tone-4 {
  --source-color: #f19ab3;
  --source-bg: #4d2936;
  --source-bg-strong: #603444;
  --source-border: #753f52
}

html[data-theme="dark"] :is(.message-citation, .message-citation-stack>span, .message-citation-menu-icon, .message-inline-citation, .message-inline-citation-more).tone-5 {
  --source-color: #add77f;
  --source-bg: #304323;
  --source-bg-strong: #3d552d;
  --source-border: #4c6839
}

@media(max-width:520px) {
  .workspace-messages .msg:not(.me) .message-body:has(.assistant-message-meta .message-citations) {
    width: calc(100% - 2.875rem);
    max-width: calc(100% - 2.875rem)
  }

  .message-citations {
    gap: 0.3125rem
  }
}

/* Single-row ChatGPT-style composer */
.workspace-composer {
  min-height: 3.625rem;
  padding: 0.5rem 0.5625rem;
  display: flex;
  align-items: flex-end;
  gap: 0.4375rem;
  border-radius: 1.875rem
}

.workspace-composer textarea {
  min-width: 0;
  min-height: 2.5rem;
  max-height: 8.75rem;
  flex: 1;
  margin: 0;
  padding: 0.625rem 0.4375rem;
  border: 0;
  background: transparent;
  line-height: 1.25rem;
  resize: none
}

.workspace-compose-actions {
  display: contents
}

.composer-assistant {
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  max-width: 2.625rem;
  padding: 0;
  display: grid;
  place-items: center;
  align-self: flex-end;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit
}

.composer-assistant:hover {
  background: rgba(75, 87, 108, .08)
}

.composer-assistant>span,
.composer-assistant>.assistant-brand-avatar {
  width: 2rem !important;
  height: 2rem !important;
  margin: 0;
  padding: 0.3125rem !important;
  display: block;
  border-radius: 50% !important;
  box-sizing: border-box
}

.composer-assistant b,
.composer-assistant>i {
  display: none
}

.workspace-tools {
  height: 2.625rem;
  flex: 0 0 auto;
  align-self: flex-end;
  gap: 0.25rem;
  padding-right: 1px
}

.workspace-tool,
.workspace-send {
  width: 2.375rem;
  height: 2.375rem;
  min-width: 2.375rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 0.8125rem
}

.workspace-send {
  background: linear-gradient(135deg, #725ee5, #8c4cce);
  box-shadow: 0 7px 18px rgba(99, 76, 194, .24)
}

.workspace-send i {
  font-size: 0.875rem
}

.workspace-send:hover {
  filter: brightness(1.06);
  transform: translateY(-1px)
}

.assistant-popover {
  left: 2px;
  bottom: calc(100% + 0.625rem)
}

html[data-theme="dark"] .composer-assistant:hover {
  background: rgba(255, 255, 255, .07)
}

@media(max-width:620px) {
  .workspace-composer {
    min-height: 3.375rem;
    padding: 0.375rem 0.4375rem;
    gap: 0.25rem
  }

  .composer-assistant {
    width: 2.375rem;
    height: 2.375rem;
    min-width: 2.375rem;
    max-width: 2.375rem
  }

  .composer-assistant>span,
  .composer-assistant>.assistant-brand-avatar {
    width: 1.8125rem !important;
    height: 1.8125rem !important
  }

  .workspace-tools {
    height: 2.375rem;
    gap: 2px
  }

  .workspace-tool,
  .workspace-send {
    width: 2.1875rem;
    height: 2.1875rem;
    min-width: 2.1875rem
  }

  .workspace-composer textarea {
    min-height: 2.375rem;
    padding: 0.5625rem 0.3125rem
  }
}

.workspace-composer.is-pending {
  opacity: 1
}

.workspace-send[aria-busy="true"] {
  opacity: 1;
  background: linear-gradient(135deg, #725ee5, #8c4cce);
  box-shadow: 0 7px 18px rgba(99, 76, 194, .24)
}

.workspace-send[aria-busy="true"] .send-stop-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  display: block;
  border-radius: 2px;
  background: #fff
}

.workspace-messages .assistant-brand-avatar {
  overflow: hidden;
  padding: 0.3125rem;
  background: linear-gradient(145deg, rgba(21, 190, 210, .14), rgba(137, 54, 207, .16)) !important;
  border: 1px solid rgba(116, 83, 199, .2) !important;
  opacity: 1 !important
}

.assistant-brand-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.assistant-select .assistant-brand-avatar {
  width: 1.6875rem;
  height: 1.6875rem;
  padding: 0.25rem;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(21, 190, 210, .13), rgba(137, 54, 207, .15));
  overflow: hidden
}

.assistant-popover button>.assistant-brand-avatar {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0.3125rem;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(21, 190, 210, .13), rgba(137, 54, 207, .15));
  overflow: hidden
}

.workspace-composer-wrap {
  z-index: 30;
  overflow: visible
}

.composer-shell {
  overflow: visible
}

.workspace-suggestions {
  position: relative;
  z-index: 32;
  padding-top: 0.3125rem;
  padding-bottom: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden
}

.workspace-suggestions button {
  position: relative;
  z-index: 1
}

.workspace-suggestions button:hover {
  z-index: 3;
  transform: translateY(-3px);
  box-shadow: 0 9px 22px rgba(45, 53, 78, .12)
}

html[data-theme="dark"] .workspace-messages .assistant-brand-avatar {
  background: linear-gradient(145deg, rgba(21, 190, 210, .1), rgba(137, 54, 207, .14)) !important;
  border-color: rgba(177, 139, 235, .24) !important
}

/* Optional assistant icon control in admin */
.assistant-icon-field>span {
  display: block;
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.assistant-icon-field>span small {
  color: #8b95a5;
  font-size: 0.5rem;
  font-weight: 600
}

.assistant-icon-control {
  min-height: 4.875rem;
  margin-top: 0.375rem;
  padding: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(65, 78, 102, .11);
  border-radius: 0.6875rem;
  background: #f0f1ef
}

.assistant-icon-preview {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(21, 190, 210, .12), rgba(137, 54, 207, .14));
  overflow: hidden
}

.assistant-icon-preview .assistant-brand-avatar {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.4375rem;
  display: block;
  box-sizing: border-box;
  border-radius: 50%
}

.assistant-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.assistant-icon-control>div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  flex-wrap: wrap
}

.assistant-icon-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none
}

.assistant-icon-control label,
.assistant-icon-control button {
  height: 1.9375rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.assistant-icon-control label {
  border: 1px solid rgba(112, 84, 199, .17);
  background: rgba(112, 84, 199, .08);
  color: #654ab2
}

.assistant-icon-control button {
  border: 1px solid rgba(194, 65, 87, .14);
  background: rgba(194, 65, 87, .055);
  color: #b6475a
}

.assistant-icon-control button:disabled {
  opacity: .4;
  cursor: not-allowed
}

.assistant-icon-control>div>small {
  width: 100%;
  color: #8792a3;
  font-size: 0.4375rem;
  line-height: 1.45
}

html[data-theme="dark"] .assistant-icon-field>span {
  color: #adb7c7
}

html[data-theme="dark"] .assistant-icon-control {
  border-color: rgba(255, 255, 255, .08);
  background: #0a1320
}

html[data-theme="dark"] .assistant-icon-control label {
  border-color: rgba(169, 129, 232, .18);
  background: rgba(126, 92, 210, .1);
  color: #ccb8f0
}

@media(max-width:600px) {
  .assistant-icon-control {
    align-items: flex-start
  }

  .assistant-icon-preview {
    width: 2.75rem;
    height: 2.75rem
  }

  .assistant-icon-preview .assistant-brand-avatar {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.375rem
  }
}

@media(max-width:900px) {
  .admin-theme-toggle {
    top: 0.6875rem !important
  }
}

@media(max-width:700px) {
  .assistant-card-grid {
    grid-template-columns: 1fr
  }

  .assistant-manage-card {
    max-width: none
  }
}

/* Admin color-effect system */
.admin-metric,
.overview-panel,
.service-list article,
.overview-shortcuts button,
.assistants-lead,
.assistant-manage-card,
.users-overview article,
.users-control-panel,
.system-card,
.admin-settings-grid .settings-card,
.admin-permissions span {
  position: relative;
  border-color: rgba(var(--tone, 112, 84, 199), .2) !important;
  background: linear-gradient(135deg, rgba(var(--tone, 112, 84, 199), .105), rgba(var(--tone, 112, 84, 199), .025) 48%, rgba(255, 255, 255, .48)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 34px rgba(var(--tone, 112, 84, 199), .055) !important
}

.admin-metric:before,
.overview-panel:before,
.assistant-manage-card:after,
.users-overview article:before,
.system-card:before,
.admin-settings-grid .settings-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 8% 4%, rgba(var(--tone, 112, 84, 199), .13), transparent 38%);
  opacity: .8
}

.admin-metric>*,
.overview-panel>*,
.assistant-manage-card>*,
.users-overview article>*,
.system-card>*,
.admin-settings-grid .settings-card>* {
  position: relative;
  z-index: 1
}

.admin-metric:nth-child(1) {
  --tone: 59, 130, 246
}

.admin-metric:nth-child(2) {
  --tone: 20, 184, 166
}

.admin-metric:nth-child(3) {
  --tone: 236, 72, 153
}

.admin-metric:nth-child(4) {
  --tone: 245, 158, 11
}

.admin-metric:nth-child(5) {
  --tone: 139, 92, 246
}

.overview-panel:nth-child(1) {
  --tone: 139, 92, 246
}

.overview-panel:nth-child(2) {
  --tone: 20, 184, 166
}

.service-list article:nth-child(1) {
  --tone: 59, 130, 246
}

.service-list article:nth-child(2) {
  --tone: 236, 72, 153
}

.service-list article:nth-child(3) {
  --tone: 20, 184, 166
}

.service-list article>i,
.overview-shortcuts>button>i:first-child,
.system-card>span,
.settings-icon,
.users-overview-icon {
  border: 1px solid rgba(var(--tone), .28) !important;
  background: linear-gradient(145deg, rgba(var(--tone), .2), rgba(var(--tone), .08)) !important;
  color: rgb(var(--tone)) !important;
  box-shadow: 0 7px 18px rgba(var(--tone), .1)
}

.overview-shortcuts button:nth-child(1) {
  --tone: 59, 130, 246
}

.overview-shortcuts button:nth-child(2) {
  --tone: 168, 85, 247
}

.overview-shortcuts button:nth-child(3) {
  --tone: 245, 158, 11
}

.assistants-lead {
  --tone: 34, 184, 240
}

.assistant-manage-card.tone-0 {
  --tone: 59, 130, 246
}

.assistant-manage-card.tone-1 {
  --tone: 236, 72, 153
}

.assistant-manage-card.tone-2 {
  --tone: 20, 184, 166
}

.assistant-manage-card .assistant-card-icon {
  border: 1px solid rgba(var(--tone), .3) !important;
  background: linear-gradient(145deg, rgba(var(--tone), .22), rgba(var(--tone), .08)) !important;
  color: rgb(var(--tone)) !important;
  box-shadow: 0 7px 18px rgba(var(--tone), .1)
}

.users-overview .color-card-0 {
  --tone: 59, 130, 246
}

.users-overview .color-card-1 {
  --tone: 20, 184, 166
}

.users-overview .color-card-2 {
  --tone: 168, 85, 247
}

.users-overview .color-card-3 {
  --tone: 245, 158, 11
}

.users-control-panel {
  --tone: 99, 102, 241
}

.users-management-table tbody tr:nth-child(4n+1) {
  --row-tone: 59, 130, 246
}

.users-management-table tbody tr:nth-child(4n+2) {
  --row-tone: 20, 184, 166
}

.users-management-table tbody tr:nth-child(4n+3) {
  --row-tone: 168, 85, 247
}

.users-management-table tbody tr:nth-child(4n+4) {
  --row-tone: 236, 72, 153
}

.users-management-table tbody tr {
  background: linear-gradient(90deg, rgba(var(--row-tone), .045), transparent 34%)
}

.users-management-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(var(--row-tone), .1), rgba(var(--row-tone), .025) 58%, transparent) !important
}

.users-management-table tbody td:first-child {
  border-left: 2px solid rgba(var(--row-tone), .38)
}

.admin-system-grid .system-card:nth-child(1) {
  --tone: 59, 130, 246
}

.admin-system-grid .system-card:nth-child(2) {
  --tone: 168, 85, 247
}

.admin-system-grid .system-card:nth-child(3) {
  --tone: 236, 72, 153
}

.admin-settings-grid .settings-card:first-child {
  --tone: 34, 184, 240
}

.admin-settings-grid .settings-card:last-child {
  --tone: 236, 72, 153
}

.admin-permissions span:nth-child(1) {
  --tone: 20, 184, 166
}

.admin-permissions span:nth-child(2) {
  --tone: 59, 130, 246
}

.admin-permissions span:nth-child(3) {
  --tone: 168, 85, 247
}

html[data-theme="dark"] .admin-metric,
html[data-theme="dark"] .overview-panel,
html[data-theme="dark"] .service-list article,
html[data-theme="dark"] .overview-shortcuts button,
html[data-theme="dark"] .assistants-lead,
html[data-theme="dark"] .assistant-manage-card,
html[data-theme="dark"] .users-overview article,
html[data-theme="dark"] .users-control-panel,
html[data-theme="dark"] .system-card,
html[data-theme="dark"] .admin-settings-grid .settings-card,
html[data-theme="dark"] .admin-permissions span {
  background: linear-gradient(135deg, rgba(var(--tone, 112, 84, 199), .115), rgba(var(--tone, 112, 84, 199), .035) 48%, rgba(255, 255, 255, .018)) !important;
  border-color: rgba(var(--tone, 112, 84, 199), .25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 14px 36px rgba(0, 0, 0, .09) !important
}

/* Shared subscription-style grid backgrounds */
.settings-page-content:before {
  inset: 0 auto !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background-image: linear-gradient(rgba(92, 76, 151, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 76, 151, .045) 1px, transparent 1px), linear-gradient(116deg, transparent 0 49.85%, rgba(112, 84, 199, .055) 50%, transparent 50.15%), radial-gradient(circle at 94% 8%, rgba(112, 84, 199, .07), transparent 270px) !important;
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, 100% 100%, 100% 100% !important;
  background-position: left top !important
}

.admin-content {
  background-color: #f7f7f4 !important;
  background-image: linear-gradient(rgba(92, 76, 151, .038) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 76, 151, .038) 1px, transparent 1px), linear-gradient(116deg, transparent 0 49.88%, rgba(112, 84, 199, .045) 50%, transparent 50.12%), radial-gradient(circle at 90% 2%, rgba(29, 190, 210, .065), transparent 27rem), radial-gradient(circle at 48% 18%, rgba(112, 84, 199, .06), transparent 30rem) !important;
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center top !important;
  background-attachment: local !important
}

html[data-theme="dark"] .settings-page-content:before {
  background-image: linear-gradient(rgba(137, 111, 218, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 111, 218, .055) 1px, transparent 1px), linear-gradient(116deg, transparent 0 49.85%, rgba(137, 103, 218, .07) 50%, transparent 50.15%), radial-gradient(circle at 94% 8%, rgba(126, 92, 210, .075), transparent 270px) !important
}

html[data-theme="dark"] .admin-content {
  background-color: #0d1421 !important;
  background-image: linear-gradient(rgba(137, 111, 218, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 111, 218, .05) 1px, transparent 1px), linear-gradient(116deg, transparent 0 49.88%, rgba(137, 103, 218, .065) 50%, transparent 50.12%), radial-gradient(circle at 90% 2%, rgba(28, 185, 205, .07), transparent 27rem), radial-gradient(circle at 48% 18%, rgba(126, 92, 211, .075), transparent 30rem) !important
}

/* Assistant detail and knowledge base */
.assistant-detail-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9375rem
}

.assistant-detail-head>button {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 82, 105, .12);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, .5);
  color: #657187;
  cursor: pointer
}

.assistant-detail-icon {
  width: 2.6875rem;
  height: 2.6875rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--assistant-color) 35%, transparent);
  border-radius: 0.8125rem;
  background: color-mix(in srgb, var(--assistant-color) 14%, transparent);
  color: var(--assistant-color)
}

.assistant-detail-head h2 {
  margin: 0;
  font-size: 1.1875rem
}

.assistant-detail-head p {
  margin: 0.25rem 0 0;
  color: #7c8798;
  font-size: 0.5625rem
}

.assistant-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6875rem;
  margin-bottom: 0.875rem
}

.assistant-detail-stats article {
  min-height: 5.875rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(70, 82, 105, .11);
  border-radius: 0.9375rem;
  background: rgba(255, 255, 255, .61)
}

.assistant-detail-stats article>i {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem
}

.assistant-detail-stats article:nth-child(1)>i {
  background: rgba(34, 184, 240, .11);
  color: #1aa4d6
}

.assistant-detail-stats article:nth-child(2)>i {
  background: rgba(16, 185, 129, .1);
  color: #0fa475
}

.assistant-detail-stats article:nth-child(3)>i {
  background: rgba(168, 85, 247, .1);
  color: #9847df
}

.assistant-detail-stats small,
.assistant-detail-stats b {
  display: block
}

.assistant-detail-stats small {
  color: #7d889a;
  font-size: 0.5625rem
}

.assistant-detail-stats b {
  margin-top: 0.25rem;
  font-size: 1.3125rem
}

.assistant-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 0.875rem
}

.assistant-settings-panel,
.knowledge-panel {
  padding: 1.1875rem;
  border: 1px solid rgba(70, 82, 105, .11);
  border-radius: 1.0625rem;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 14px 38px rgba(40, 49, 70, .04)
}

.detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  margin-bottom: 1.0625rem
}

.detail-panel-head small {
  color: #7456c5;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.detail-panel-head h3 {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem
}

.detail-panel-head p {
  margin: 0.3125rem 0 0;
  color: #8290a1;
  font-size: 0.5rem
}

.detail-panel-head>span {
  width: 2.3125rem;
  height: 2.3125rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: rgba(112, 84, 199, .1);
  color: #7456c5
}

.assistant-detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem
}

.assistant-detail-fields label {
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.assistant-detail-fields .wide {
  grid-column: 1/-1
}

.assistant-detail-fields input,
.assistant-detail-fields select,
.assistant-detail-fields textarea {
  width: 100%;
  margin-top: 0.375rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.5625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.625rem;
  outline: 0
}

.assistant-detail-fields input,
.assistant-detail-fields select {
  height: 2.4375rem;
  padding: 0 0.6875rem
}

.assistant-detail-fields textarea {
  min-height: 11.875rem;
  padding: 0.6875rem;
  line-height: 1.55;
  resize: vertical
}

.detail-colors {
  margin-top: 0.875rem
}

.assistant-detail-toggles {
  display: flex;
  gap: 0.5625rem;
  margin-top: 0.875rem
}

.assistant-detail-toggles label {
  flex: 1;
  padding: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(70, 82, 105, .1);
  border-radius: 0.625rem;
  cursor: pointer
}

.assistant-detail-toggles input {
  accent-color: #765ee1
}

.assistant-detail-toggles b,
.assistant-detail-toggles small {
  display: block
}

.assistant-detail-toggles b {
  font-size: 0.5625rem
}

.assistant-detail-toggles small {
  margin-top: 2px;
  color: #8792a3;
  font-size: 0.4375rem
}

.assistant-detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.0625rem
}

.assistant-detail-actions button {
  height: 2.375rem;
  padding: 0 0.8125rem;
  border-radius: 0.5625rem;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.assistant-detail-actions button:first-child {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff
}

.assistant-detail-actions button:last-child {
  border: 1px solid rgba(199, 66, 87, .19);
  background: rgba(199, 66, 87, .065);
  color: #b74357
}

.knowledge-add-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4375rem;
  margin-bottom: 0.8125rem
}

.knowledge-add-tabs button {
  height: 2.25rem;
  border: 1px solid rgba(70, 82, 105, .1);
  border-radius: 0.5625rem;
  background: transparent;
  color: #758196;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 750;
  cursor: pointer
}

.knowledge-add-tabs button.active {
  border-color: rgba(112, 84, 199, .22);
  background: rgba(112, 84, 199, .08);
  color: #654bb0
}

.knowledge-add-tabs i {
  margin-right: 0.3125rem
}

.knowledge-uploader input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.knowledge-uploader label {
  min-height: 9.0625rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  border: 1px dashed rgba(112, 84, 199, .28);
  border-radius: 0.8125rem;
  background: linear-gradient(135deg, rgba(34, 184, 240, .045), rgba(168, 85, 247, .05));
  text-align: center;
  cursor: pointer
}

.knowledge-uploader label>i {
  font-size: 1.4375rem;
  color: #7658ca
}

.knowledge-uploader b {
  font-size: 0.625rem
}

.knowledge-uploader span {
  color: #8792a3;
  font-size: 0.5rem
}

.knowledge-web {
  min-height: 9.0625rem;
  padding: 1.125rem;
  border: 1px solid rgba(112, 84, 199, .15);
  border-radius: 0.8125rem;
  background: rgba(112, 84, 199, .035)
}

.knowledge-web>label {
  color: #586478;
  font-size: 0.5625rem;
  font-weight: 750
}

.knowledge-web>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4375rem;
  margin-top: 0.4375rem
}

.knowledge-web input {
  height: 2.4375rem;
  padding: 0 0.6875rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.5625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.5625rem;
  outline: 0
}

.knowledge-web button {
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.knowledge-web>small {
  display: block;
  margin-top: 0.5rem;
  color: #8792a3;
  font-size: 0.4375rem
}

.knowledge-list-head {
  margin: 1.0625rem 0 0.5625rem;
  display: flex;
  justify-content: space-between
}

.knowledge-list-head b {
  font-size: 0.5625rem
}

.knowledge-list-head span {
  color: #8691a2;
  font-size: 0.5rem
}

.knowledge-list {
  display: grid;
  gap: 0.4375rem;
  max-height: 19.375rem;
  overflow: auto
}

.knowledge-source {
  min-height: 3.375rem;
  padding: 0.5rem 0.5625rem;
  display: grid;
  grid-template-columns: 2.125rem 1fr 1.8125rem;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(70, 82, 105, .09);
  border-radius: 0.6875rem;
  background: rgba(75, 87, 108, .025)
}

.source-icon {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(34, 184, 240, .1);
  color: #1ba6d5
}

.source-icon.web {
  background: rgba(16, 185, 129, .1);
  color: #0fa475
}

.knowledge-source b,
.knowledge-source small {
  display: block
}

.knowledge-source b {
  max-width: 20.625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.5625rem
}

.knowledge-source small {
  margin-top: 0.1875rem;
  color: #8792a3;
  font-size: 0.4375rem
}

.knowledge-source button {
  width: 1.8125rem;
  height: 1.8125rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(199, 66, 87, .06);
  color: #b74357;
  cursor: pointer
}

.knowledge-empty {
  min-height: 10rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  color: #8792a3;
  text-align: center
}

.knowledge-empty>i {
  font-size: 1.75rem;
  color: #7658ca;
  opacity: .65
}

.knowledge-empty b {
  color: #657187;
  font-size: 0.625rem
}

.knowledge-empty span {
  font-size: 0.5rem
}

html[data-theme="dark"] .assistant-detail-head>button,
html[data-theme="dark"] .assistant-detail-stats article,
html[data-theme="dark"] .assistant-settings-panel,
html[data-theme="dark"] .knowledge-panel {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .035);
  box-shadow: none
}

html[data-theme="dark"] .assistant-detail-fields label,
html[data-theme="dark"] .knowledge-web>label {
  color: #adb7c7
}

html[data-theme="dark"] .assistant-detail-fields input,
html[data-theme="dark"] .assistant-detail-fields select,
html[data-theme="dark"] .assistant-detail-fields textarea,
html[data-theme="dark"] .knowledge-web input {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1320;
  color: #eef2f7;
  color-scheme: dark
}

html[data-theme="dark"] .assistant-detail-toggles label,
html[data-theme="dark"] .knowledge-source {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .knowledge-web {
  border-color: rgba(169, 129, 232, .15);
  background: rgba(126, 92, 210, .04)
}

html[data-theme="dark"] .knowledge-empty b {
  color: #aab5c5
}

@media(max-width:1050px) {
  .assistant-detail-grid {
    grid-template-columns: 1fr
  }

  .assistant-detail-stats {
    grid-template-columns: 1fr 1fr 1fr
  }
}

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

  .assistant-detail-fields {
    grid-template-columns: 1fr
  }

  .assistant-detail-fields .wide {
    grid-column: auto
  }

  .assistant-detail-toggles {
    flex-direction: column
  }

  .knowledge-web>div {
    grid-template-columns: 1fr
  }

  .knowledge-web button {
    height: 2.375rem
  }
}

/* Registration gender field parity */
.account-gate .account-field select {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.625rem 0 0.8125rem;
  border: 1px solid rgba(55, 69, 94, .14);
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, .55);
  color: #172136;
  font: inherit;
  font-size: 0.75rem;
  transition: border-color .2s, box-shadow .2s, background .2s
}

.account-gate .account-field select:focus {
  border-color: rgba(117, 83, 204, .55);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(117, 83, 204, .1)
}

html[data-theme="dark"] .account-gate .account-field select {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .1);
  color: #edf1f7;
  color-scheme: dark
}

html[data-theme="dark"] .account-gate .account-field select:focus {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(166, 132, 239, .55);
  box-shadow: 0 0 0 3px rgba(146, 105, 225, .11)
}

.account-gate .account-field select option {
  background: #f7f7f4;
  color: #172136;
  font-size: 0.75rem
}

.account-gate .account-field select option:disabled {
  color: #8c96a6
}

html[data-theme="dark"] .account-gate .account-field select option {
  background: #151e2d;
  color: #edf1f7
}

html[data-theme="dark"] .account-gate .account-field select option:disabled {
  color: #758196
}

/* AI model management */
.models-page-lead {
  margin-bottom: 1rem;
  padding: 1.0625rem 1.1875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid rgba(99, 102, 241, .18);
  border-radius: 1rem;
  background: linear-gradient(105deg, rgba(34, 184, 240, .07), rgba(139, 92, 246, .075))
}

.models-page-lead small,
.models-list-head small,
.model-editor-head small {
  color: #7457c7;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.models-page-lead h2 {
  margin: 0.375rem 0 0.3125rem;
  font-size: 1.125rem
}

.models-page-lead p {
  margin: 0;
  color: #7d899a;
  font-size: 0.5625rem
}

.models-page-lead>span {
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5625rem;
  background: rgba(20, 184, 166, .09);
  color: #159b83;
  font-size: 0.5rem;
  font-weight: 750;
  white-space: nowrap
}

.models-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23.125rem;
  gap: 0.875rem;
  align-items: start
}

.models-list-panel,
.model-editor {
  padding: 1.125rem;
  border: 1px solid rgba(70, 82, 105, .11);
  border-radius: 1.0625rem;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 14px 38px rgba(40, 49, 70, .04)
}

.models-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem
}

.models-list-head h3 {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem
}

.models-list-head>span {
  padding: 0.3125rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .08);
  color: #6e50ba;
  font-size: 0.5rem
}

.ai-model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6875rem
}

.ai-model-card {
  position: relative;
  min-height: 13.125rem;
  padding: 0.9375rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 0.9375rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, .085), rgba(139, 92, 246, .035));
  overflow: hidden
}

.ai-model-card:after {
  content: "";
  position: absolute;
  right: -2.1875rem;
  bottom: -3.125rem;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid rgba(59, 130, 246, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(139, 92, 246, .025)
}

.ai-model-card>* {
  position: relative;
  z-index: 1
}

.ai-model-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.ai-model-card-top>span {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: rgba(59, 130, 246, .12);
  color: #3b82f6
}

.ai-model-card-top .badge {
  padding: 0.25rem 0.4375rem;
  font-size: 0.4375rem
}

.ai-model-card>small {
  margin-top: 1rem;
  color: #7457c7;
  font-size: 0.4375rem;
  font-weight: 850;
  letter-spacing: .1em
}

.ai-model-card h3 {
  margin: 0.3125rem 0 0.375rem;
  font-size: 0.9375rem
}

.ai-model-card p {
  margin: 0;
  color: #7e899a;
  font-size: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.model-token-state {
  margin: 0.8125rem 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  border-radius: 0.5625rem;
  background: rgba(75, 87, 108, .045);
  color: #7a8698;
  font-size: 0.5rem
}

.ai-model-card>button {
  height: 2rem;
  margin-top: auto;
  border: 1px solid rgba(112, 84, 199, .17);
  border-radius: 0.5625rem;
  background: rgba(112, 84, 199, .07);
  color: #624bad;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.model-empty {
  min-height: 16.25rem;
  grid-column: 1/-1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  color: #8792a3;
  text-align: center
}

.model-empty>i {
  font-size: 1.75rem;
  color: #7658ca
}

.model-empty b {
  color: #637084;
  font-size: 0.6875rem
}

.model-empty span {
  font-size: 0.5rem
}

.model-editor {
  position: sticky;
  top: 4.6875rem
}

.model-editor-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.0625rem
}

.model-editor-head>span {
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(34, 184, 240, .14), rgba(139, 92, 246, .13));
  color: #6750bb
}

.model-editor-head h3 {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem
}

.model-editor>label {
  display: block;
  margin-top: 0.6875rem;
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.model-editor>label>input,
.model-token-input input {
  width: 100%;
  height: 2.4375rem;
  margin-top: 0.375rem;
  padding: 0 0.6875rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.5625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.5625rem;
  outline: 0
}

.model-token-input {
  position: relative
}

.model-token-input input {
  padding-right: 2.625rem
}

.model-token-input button {
  position: absolute;
  right: 0.3125rem;
  top: 0.6875rem;
  width: 1.8125rem;
  height: 1.8125rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #738094;
  cursor: pointer
}

.model-active-check {
  padding: 0.625rem;
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(70, 82, 105, .1);
  border-radius: 0.625rem;
  cursor: pointer
}

.model-active-check input {
  accent-color: #765ee1
}

.model-active-check b,
.model-active-check small {
  display: block
}

.model-active-check b {
  font-size: 0.5625rem
}

.model-active-check small {
  margin-top: 2px;
  color: #8792a3;
  font-size: 0.4375rem
}

.model-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4375rem;
  margin-top: 0.9375rem
}

.model-form-actions button {
  height: 2.3125rem;
  padding: 0 0.75rem;
  border-radius: 0.5625rem;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.model-form-actions button:first-child {
  border: 1px solid rgba(70, 82, 105, .11);
  background: transparent;
  color: #707c90
}

.model-form-actions button:last-child {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff
}

.model-form-actions button i {
  margin-right: 0.3125rem
}

html[data-theme="dark"] .models-page-lead,
html[data-theme="dark"] .models-list-panel,
html[data-theme="dark"] .model-editor {
  border-color: rgba(255, 255, 255, .075);
  background: linear-gradient(135deg, rgba(34, 184, 240, .055), rgba(139, 92, 246, .045));
  box-shadow: none
}

html[data-theme="dark"] .ai-model-card {
  border-color: rgba(111, 145, 245, .18);
  background: linear-gradient(135deg, rgba(59, 130, 246, .1), rgba(139, 92, 246, .045))
}

html[data-theme="dark"] .model-editor>label {
  color: #aeb8c7
}

html[data-theme="dark"] .model-editor>label>input,
html[data-theme="dark"] .model-token-input input {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1320;
  color: #eef2f7
}

html[data-theme="dark"] .model-active-check {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .022)
}

html[data-theme="dark"] .ai-model-card p,
html[data-theme="dark"] .models-page-lead p {
  color: #929dae
}

html[data-theme="dark"] .model-token-state {
  background: rgba(255, 255, 255, .035)
}

@media(max-width:1150px) {
  .models-layout {
    grid-template-columns: 1fr
  }

  .model-editor {
    position: static
  }

  .ai-model-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:650px) {
  .models-page-lead {
    align-items: flex-start;
    flex-direction: column
  }

  .ai-model-grid {
    grid-template-columns: 1fr
  }
}

/* Compact model catalog */
.compact-models-head {
  margin-bottom: 0.9375rem;
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid rgba(99, 102, 241, .16);
  border-radius: 1rem;
  background: linear-gradient(105deg, rgba(34, 184, 240, .065), rgba(139, 92, 246, .07))
}

.compact-models-head small {
  color: #7457c7;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.compact-models-head h2 {
  margin: 0.375rem 0 0.3125rem;
  font-size: 1.125rem
}

.compact-models-head p {
  margin: 0;
  color: #7e899a;
  font-size: 0.5625rem
}

.compact-models-head>div>div {
  display: flex;
  gap: 0.4375rem;
  margin-top: 0.625rem
}

.compact-models-head>div>div span {
  padding: 0.3125rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .05);
  color: #788497;
  font-size: 0.5rem
}

.compact-models-head>div>div span:first-child i {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-right: 0.3125rem;
  border-radius: 50%;
  background: #19b894
}

.compact-models-head>button,
.compact-model-empty button {
  height: 2.1875rem;
  padding: 0 0.8125rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .2)
}

.compact-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.375rem, 18.75rem));
  gap: 0.6875rem;
  justify-content: start
}

.compact-model-card {
  --model-tone: 59, 130, 246;
  position: relative;
  min-height: 11.875rem;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--model-tone), .2);
  border-radius: 0.9375rem;
  background: linear-gradient(135deg, rgba(var(--model-tone), .09), rgba(var(--model-tone), .025) 58%, rgba(255, 255, 255, .42));
  box-shadow: 0 11px 28px rgba(var(--model-tone), .05);
  overflow: hidden
}

.compact-model-card.tone-1 {
  --model-tone: 20, 184, 166
}

.compact-model-card.tone-2 {
  --model-tone: 168, 85, 247
}

.compact-model-card.tone-3 {
  --model-tone: 236, 72, 153
}

.compact-model-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.compact-model-top>span {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--model-tone), .27);
  border-radius: 0.625rem;
  background: rgba(var(--model-tone), .12);
  color: rgb(var(--model-tone))
}

.compact-model-top>b {
  padding: 0.25rem 0.4375rem;
  border-radius: 0.4375rem;
  font-size: 0.4375rem
}

.compact-model-top>b i {
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background: currentColor
}

.compact-model-top>b.active {
  background: rgba(20, 184, 166, .09);
  color: #159b83
}

.compact-model-top>b.passive {
  background: rgba(120, 132, 151, .08);
  color: #7d899a
}

.compact-model-card>small {
  margin-top: 0.8125rem;
  color: rgb(var(--model-tone));
  font-size: 0.4375rem;
  font-weight: 850;
  letter-spacing: .1em
}

.compact-model-card h3 {
  margin: 0.3125rem 0 0.4375rem;
  font-size: 0.875rem
}

.compact-model-card>p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #7e899a;
  font-size: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.compact-model-meta {
  display: flex;
  gap: 0.375rem;
  margin: 0.6875rem 0
}

.compact-model-meta span {
  padding: 0.3125rem 0.4375rem;
  border-radius: 0.4375rem;
  background: rgba(75, 87, 108, .045);
  color: #7c8798;
  font-size: 0.4375rem
}

.compact-model-meta i {
  margin-right: 0.25rem;
  color: rgb(var(--model-tone))
}

.compact-model-card>button {
  height: 1.875rem;
  margin-top: auto;
  border: 1px solid rgba(var(--model-tone), .18);
  border-radius: 0.5rem;
  background: rgba(var(--model-tone), .06);
  color: rgb(var(--model-tone));
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.compact-model-empty {
  min-height: 16.25rem;
  grid-column: 1/-1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  text-align: center
}

.compact-model-empty>i {
  font-size: 1.875rem;
  color: #7658ca
}

.compact-model-empty h3,
.compact-model-empty p {
  margin: 0
}

.compact-model-empty p {
  color: #8490a1;
  font-size: 0.5625rem
}

.compact-model-empty button {
  margin-top: 0.4375rem
}

.model-editor-back {
  z-index: 170;
  background: rgba(8, 13, 23, .72);
  backdrop-filter: blur(11px)
}

.model-editor-popover {
  width: min(29.375rem, 100%);
  padding: 1.375rem;
  border: 1px solid rgba(112, 84, 199, .2);
  border-radius: 1.25rem;
  background: #fbfbf9;
  color: #172136;
  box-shadow: 0 34px 100px rgba(15, 22, 36, .34)
}

.model-popover-head {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.9375rem;
  align-items: start;
  gap: 0.625rem;
  margin-bottom: 1.125rem
}

.model-popover-head>span {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(34, 184, 240, .14), rgba(139, 92, 246, .15));
  color: #6750bb
}

.model-popover-head small {
  color: #7457c7;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .13em
}

.model-popover-head h2 {
  margin: 0.25rem 0;
  font-size: 1.125rem
}

.model-popover-head p {
  margin: 0;
  color: #8490a1;
  font-size: 0.5rem
}

.model-popover-head>button {
  width: 1.9375rem;
  height: 1.9375rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 82, 105, .11);
  border-radius: 0.5625rem;
  background: transparent;
  color: #768295;
  cursor: pointer
}

.model-popover-fields {
  display: grid;
  gap: 0.6875rem
}

.model-popover-fields>label {
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.model-popover-fields input {
  width: 100%;
  height: 2.5rem;
  margin-top: 0.375rem;
  padding: 0 0.6875rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.5625rem;
  background: #f0f1ef;
  color: #172136;
  font: inherit;
  font-size: 0.5625rem;
  outline: 0
}

.model-popover-fields label>div {
  position: relative
}

.model-popover-fields label>div input {
  padding-right: 2.5625rem
}

.model-popover-fields label>div button {
  position: absolute;
  right: 0.3125rem;
  top: 0.6875rem;
  width: 1.8125rem;
  height: 1.8125rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #768295;
  cursor: pointer
}

.model-popover-active {
  margin-top: 0.8125rem;
  padding: 0.6875rem;
  display: grid;
  grid-template-columns: 1.0625rem 1fr 1.875rem;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(70, 82, 105, .11);
  border-radius: 0.6875rem;
  cursor: pointer
}

.model-popover-active input {
  accent-color: #765ee1
}

.model-popover-active b,
.model-popover-active small {
  display: block
}

.model-popover-active b {
  font-size: 0.5625rem
}

.model-popover-active small {
  margin-top: 0.1875rem;
  color: #8490a1;
  font-size: 0.4375rem
}

.model-popover-active>i {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(20, 184, 166, .09);
  color: #159b83
}

.model-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9375rem;
  border-top: 1px solid rgba(70, 82, 105, .09)
}

.model-popover-actions button {
  height: 2.3125rem;
  padding: 0 0.8125rem;
  border-radius: 0.5625rem;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.model-popover-actions button:first-child {
  border: 1px solid rgba(70, 82, 105, .11);
  background: #efefec;
  color: #596579
}

.model-popover-actions button:last-child {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff
}

.model-popover-actions i {
  margin-right: 0.3125rem
}

html[data-theme="dark"] .compact-models-head {
  border-color: rgba(255, 255, 255, .075);
  background: linear-gradient(105deg, rgba(34, 184, 240, .055), rgba(139, 92, 246, .05))
}

html[data-theme="dark"] .compact-model-card {
  background: linear-gradient(135deg, rgba(var(--model-tone), .1), rgba(var(--model-tone), .025) 62%, rgba(255, 255, 255, .018));
  box-shadow: none
}

html[data-theme="dark"] .model-editor-popover {
  border-color: rgba(169, 129, 232, .2);
  background: #111927;
  color: #eef2f7
}

html[data-theme="dark"] .model-popover-fields>label {
  color: #aeb8c7
}

html[data-theme="dark"] .model-popover-fields input {
  border-color: rgba(255, 255, 255, .09);
  background: #0a1320;
  color: #eef2f7
}

html[data-theme="dark"] .model-popover-active {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .022)
}

html[data-theme="dark"] .model-popover-actions {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .model-popover-actions button:first-child {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
  color: #dce2eb
}

@media(max-width:700px) {
  .compact-models-head {
    align-items: flex-start;
    flex-direction: column
  }

  .compact-model-grid {
    grid-template-columns: 1fr
  }

  .compact-model-card {
    max-width: none
  }

  .model-editor-popover {
    padding: 1.125rem
  }
}

/* Model kimliği ve üretim ayarları */
.model-popover-fields .model-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(6.875rem, .65fr);
  gap: 0.625rem;
  position: static
}

.model-field-row>label {
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.model-popover-fields .model-field-row input {
  padding-right: 0.6875rem
}

.model-popover-fields input[type="number"] {
  appearance: textfield
}

.model-popover-fields input[type="number"]::-webkit-inner-spin-button {
  opacity: .55
}

html[data-theme="dark"] .model-field-row>label {
  color: #aeb8c7
}

@media(max-width:700px) {
  .model-popover-fields .model-field-row {
    grid-template-columns: 1fr
  }
}

.knowledge-source {
  grid-template-columns: 2.125rem 1fr auto
}

.knowledge-source>span:last-child {
  display: flex;
  gap: 0.3125rem;
  justify-content: flex-end
}

.knowledge-source [data-reindex-source] {
  background: rgba(34, 184, 240, .09);
  color: #1ba6d5
}

/* Minimal assistant picker */
.assistant-popover {
  width: 16.875rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4375rem;
  display: grid;
  gap: 0.25rem;
  border-radius: 0.875rem;
  overflow-x: hidden !important;
  box-shadow: 0 16px 42px rgba(38, 45, 67, .16)
}

.assistant-popover-title {
  min-height: 1.75rem;
  padding: 0.1875rem 0.4375rem 0.375rem;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(72, 84, 106, .08)
}

.assistant-popover-title span {
  font-size: 0.4375rem;
  letter-spacing: .12em
}

.assistant-popover-title small {
  max-width: 9.0625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.375rem
}

.assistant-popover button {
  min-height: 2.6875rem;
  padding: 0.3125rem 0.4375rem;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5625rem;
  background: transparent
}

.assistant-popover button+button {
  margin-top: 0
}

.assistant-popover button:hover {
  border-color: rgba(112, 84, 199, .1);
  background: rgba(112, 84, 199, .045)
}

.assistant-popover button.active {
  border-color: rgba(112, 84, 199, .13);
  background: rgba(112, 84, 199, .075)
}

.assistant-popover button>.assistant-brand-avatar {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem
}

.assistant-popover button>span {
  overflow: hidden
}

.assistant-popover button b,
.assistant-popover button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.assistant-popover button b {
  font-size: 0.5625rem;
  line-height: 1.2
}

.assistant-popover button small {
  margin-top: 2px;
  font-size: 0.4375rem;
  line-height: 1.2
}

.assistant-popover button>i:last-child {
  width: 0.875rem;
  flex: 0 0 0.875rem;
  text-align: center
}

html[data-theme="dark"] .assistant-popover-title {
  border-color: rgba(255, 255, 255, .065)
}

html[data-theme="dark"] .assistant-popover button:hover {
  border-color: rgba(168, 132, 231, .11);
  background: rgba(149, 109, 225, .065)
}

html[data-theme="dark"] .assistant-popover button.active {
  border-color: rgba(168, 132, 231, .15);
  background: rgba(149, 109, 225, .09)
}

@media(max-width:620px) {
  .assistant-popover {
    width: min(16.25rem, calc(100vw - 5.125rem));
    padding: 0.375rem
  }

  .assistant-popover-title small {
    display: none
  }
}

/* Admin assistant avatars */
.assistant-card-icon,
.assistant-detail-icon {
  overflow: hidden;
  border-radius: 50% !important
}

.assistant-card-icon .assistant-brand-avatar,
.assistant-detail-icon .assistant-brand-avatar {
  width: 100% !important;
  height: 100% !important;
  padding: 0.3125rem;
  box-sizing: border-box;
  border-radius: 50% !important
}

.assistant-card-icon img,
.assistant-detail-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

/* Theme-independent assistant icon contrast */
.assistant-brand-avatar,
.assistant-popover button>.assistant-brand-avatar,
.assistant-select .assistant-brand-avatar,
.assistant-icon-preview {
  background: radial-gradient(circle at 38% 32%, #fff 0, #f5f2fb 58%, #e7e1f4 100%) !important;
  border: 1px solid rgba(103, 78, 170, .25) !important;
  box-shadow: 0 3px 10px rgba(37, 31, 66, .16), inset 0 0 0 1px rgba(255, 255, 255, .75) !important;
}

.assistant-brand-avatar img {
  filter: contrast(1.12) saturate(1.08);
  transform: scale(.92)
}

html[data-theme="dark"] .assistant-brand-avatar,
html[data-theme="dark"] .assistant-popover button>.assistant-brand-avatar,
html[data-theme="dark"] .assistant-select .assistant-brand-avatar,
html[data-theme="dark"] .assistant-icon-preview {
  background: radial-gradient(circle at 38% 30%, #26324a 0, #182338 54%, #101929 100%) !important;
  border-color: rgba(143, 116, 220, .42) !important;
  box-shadow: 0 0 0 2px rgba(116, 83, 199, .09), 0 4px 12px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .045) !important;
}

html[data-theme="dark"] .assistant-brand-avatar img {
  filter: contrast(1.16) saturate(1.2) brightness(1.12);
  transform: scale(.76)
}

html[data-theme="dark"] .assistant-select .assistant-brand-avatar img,
html[data-theme="dark"] .assistant-popover button>.assistant-brand-avatar img {
  transform: scale(.72)
}

/* Conversation organization */
.workspace-conversations {
  overflow: visible auto !important
}

.workspace-history-head.pinned-head {
  margin-top: 0.3125rem;
  color: #7155bd
}

.conversation-menu-trigger {
  width: 1.6875rem;
  height: 1.6875rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #929cab;
  opacity: 0;
  cursor: pointer
}

.workspace-conversation:hover .conversation-menu-trigger,
.workspace-conversation:focus-within .conversation-menu-trigger {
  opacity: 1
}

.conversation-menu-trigger:hover {
  background: rgba(112, 84, 199, .09);
  color: #654cb2
}

.workspace-conversation {
  position: relative
}

.conversation-actions-menu {
  position: absolute;
  right: 0.1875rem;
  top: 2.0625rem;
  z-index: 60;
  width: 10.625rem;
  padding: 0.375rem;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(67, 79, 101, .13);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 42px rgba(26, 34, 52, .2)
}

.conversation-actions-menu button {
  height: 2.125rem;
  padding: 0 0.5625rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #566277;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer
}

.conversation-actions-menu button i {
  width: 0.875rem;
  text-align: center
}

.conversation-actions-menu button:hover {
  background: rgba(112, 84, 199, .07);
  color: #5b449f
}

.conversation-actions-menu button.danger {
  color: #bc4559
}

.conversation-actions-menu button.danger:hover {
  background: rgba(196, 65, 87, .08)
}

.conversation-confirm-back {
  z-index: 190;
  padding: 1.25rem;
  background: rgba(20, 27, 40, .46);
  backdrop-filter: blur(12px) saturate(.8);
  animation: conversationBackdropIn .18s ease
}

.conversation-confirm {
  --confirm-tone: 111, 82, 199;
  position: relative;
  width: min(26.875rem, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(48, 59, 79, .13);
  border-radius: 1.375rem;
  background: rgba(252, 252, 253, .98);
  color: #192337;
  text-align: left;
  box-shadow: 0 30px 85px rgba(19, 27, 42, .24), 0 2px 8px rgba(19, 27, 42, .08);
  animation: conversationConfirmIn .22s cubic-bezier(.2, .78, .25, 1)
}

.conversation-confirm.is-danger {
  --confirm-tone: 208, 64, 88
}

.conversation-confirm:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.1875rem;
  background: linear-gradient(90deg, rgb(var(--confirm-tone)), color-mix(in srgb, rgb(var(--confirm-tone)) 45%, #22bfd1))
}

.conversation-confirm-main {
  padding: 1.6875rem 1.75rem 1.4375rem;
  display: grid;
  grid-template-columns: 3.125rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem
}

.conversation-confirm-icon {
  width: 3.125rem;
  height: 3.125rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--confirm-tone), .2);
  border-radius: 0.9375rem;
  background: linear-gradient(145deg, rgba(var(--confirm-tone), .16), rgba(var(--confirm-tone), .06));
  color: rgb(var(--confirm-tone));
  font-size: 1.0625rem;
  box-shadow: 0 9px 22px rgba(var(--confirm-tone), .1)
}

.conversation-confirm-copy small {
  display: block;
  margin: 2px 0 0.4375rem;
  color: rgb(var(--confirm-tone));
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .14em
}

.conversation-confirm h2 {
  margin: 0 0 0.4375rem;
  color: #192337;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -.02em
}

.conversation-confirm p {
  margin: 0;
  color: #667286;
  font-size: 0.6875rem;
  line-height: 1.65
}

.conversation-confirm-actions {
  padding: 0.9375rem 1.25rem 1.125rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5625rem;
  border-top: 1px solid rgba(48, 59, 79, .09);
  background: rgba(242, 244, 247, .68)
}

.conversation-confirm button {
  min-width: 5.75rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.6875rem;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease
}

.conversation-confirm button:first-child {
  border: 1px solid rgba(48, 59, 79, .13);
  background: #fff;
  color: #566276
}

.conversation-confirm button:first-child:hover {
  border-color: rgba(111, 82, 199, .24);
  background: #f8f7fb;
  color: #503e90
}

.conversation-confirm button:last-child {
  border: 0;
  background: linear-gradient(135deg, #7258cc, #835ed5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(104, 76, 188, .24)
}

.conversation-confirm button.danger {
  background: linear-gradient(135deg, #d54861, #c83d56);
  box-shadow: 0 8px 20px rgba(198, 56, 82, .23)
}

.conversation-confirm button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 25px rgba(var(--confirm-tone), .25)
}

.conversation-confirm button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(var(--confirm-tone), .14)
}

.conversation-confirm button:disabled {
  cursor: wait;
  opacity: .65;
  transform: none
}

@keyframes conversationBackdropIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes conversationConfirmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.985)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.archived-conversations-card {
  grid-column: 1/-1
}

.archived-conversation-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9375rem
}

.archived-conversation-list article {
  min-height: 3.5rem;
  padding: 0.5625rem 0.625rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(68, 80, 102, .09);
  border-radius: 0.6875rem;
  background: rgba(74, 87, 109, .025)
}

.archived-conversation-list b,
.archived-conversation-list small {
  display: block
}

.archived-conversation-list b {
  font-size: 0.625rem
}

.archived-conversation-list small {
  margin-top: 0.1875rem;
  color: #8a95a5;
  font-size: 0.5rem
}

.archived-conversation-list button {
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid rgba(112, 84, 199, .13);
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .06);
  color: #654cac;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.archived-conversation-list button i {
  margin-right: 0.3125rem
}

.archived-conversation-list button.danger {
  border-color: rgba(196, 65, 87, .14);
  background: rgba(196, 65, 87, .055);
  color: #b9475a
}

.archived-empty {
  min-height: 5.625rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4375rem;
  color: #8a95a5;
  font-size: 0.5625rem
}

.archived-empty i {
  font-size: 1.25rem
}

html[data-theme="dark"] .conversation-actions-menu {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(17, 25, 39, .98);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38)
}

html[data-theme="dark"] .conversation-actions-menu button {
  color: #b3bdcb
}

html[data-theme="dark"] .conversation-actions-menu button:hover {
  background: rgba(149, 109, 225, .1);
  color: #eee8fb
}

html[data-theme="dark"] .conversation-actions-menu button.danger {
  color: #ef8495
}

html[data-theme="dark"] .conversation-confirm-back {
  background: rgba(3, 7, 14, .72)
}

html[data-theme="dark"] .conversation-confirm {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(16, 24, 38, .98);
  color: #eef2f7;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 2px 9px rgba(0, 0, 0, .25)
}

html[data-theme="dark"] .conversation-confirm h2 {
  color: #f1f4f8
}

html[data-theme="dark"] .conversation-confirm p {
  color: #9ba6b6
}

html[data-theme="dark"] .conversation-confirm-actions {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(5, 11, 20, .32)
}

html[data-theme="dark"] .conversation-confirm button:first-child {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  color: #c2cad5
}

html[data-theme="dark"] .conversation-confirm button:first-child:hover {
  border-color: rgba(var(--confirm-tone), .34);
  background: rgba(var(--confirm-tone), .09);
  color: #f0ebfb
}

html[data-theme="dark"] .archived-conversation-list article {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025)
}

@media(max-width:520px) {
  .conversation-confirm-main {
    padding: 1.5rem 1.3125rem 1.25rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.8125rem
  }

  .conversation-confirm-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.8125rem
  }

  .conversation-confirm h2 {
    font-size: 1.0625rem
  }

  .conversation-confirm-actions {
    padding: 0.8125rem 1rem 1rem
  }

  .conversation-confirm button {
    flex: 1;
    min-width: 0;
    padding: 0 0.625rem
  }
}

@media(prefers-reduced-motion:reduce) {

  .conversation-confirm-back,
  .conversation-confirm {
    animation: none
  }

  .conversation-confirm button {
    transition: none
  }
}

@media(max-width:620px) {
  .archived-conversation-list article {
    grid-template-columns: 1fr 1fr
  }

  .archived-conversation-list article>div {
    grid-column: 1/-1
  }

  .archived-conversation-list button {
    width: 100%
  }
}

/* Conversation menu escapes the scroll container */
body>.conversation-actions-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 220 !important
}

.workspace-conversation>span {
  gap: 0
}

.workspace-conversation>span>i.fa-message {
  display: none
}

.workspace-conversation>span:has(.conversation-rename-input) {
  width: 100%;
  overflow: visible
}

.conversation-rename-input {
  width: 100%;
  height: 1.8125rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(112, 84, 199, .42);
  border-radius: 0.4375rem;
  background: #fff;
  color: #273248;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 650;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(112, 84, 199, .08)
}

.conversation-rename-input:disabled {
  opacity: .65
}

.workspace-conversation:has(.conversation-rename-input) {
  padding-left: 0.3125rem;
  border-color: rgba(112, 84, 199, .18);
  background: rgba(112, 84, 199, .055)
}

.workspace-conversation:has(.conversation-rename-input) .conversation-menu-trigger {
  display: none
}

html[data-theme="dark"] .conversation-rename-input {
  border-color: rgba(174, 140, 235, .45);
  background: #121b2b;
  color: #eef2f7;
  box-shadow: 0 0 0 3px rgba(149, 109, 225, .1)
}

/* Refined sidebar hierarchy */
.workspace-sidebar {
  padding-left: 1rem;
  padding-right: 1rem
}

.workspace-sidebar-head {
  margin-bottom: 1.0625rem
}

.workspace-new-chat {
  height: 2.625rem;
  margin: 0 1px 0.5rem;
  padding: 0 0.625rem;
  gap: 0.5625rem;
  border: 1px solid rgba(99, 79, 161, .15);
  border-radius: 0.75rem;
  background: linear-gradient(110deg, rgba(31, 190, 208, .07), rgba(115, 84, 199, .09));
  color: #4f426f;
  box-shadow: 0 5px 16px rgba(42, 48, 70, .035);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease
}

.workspace-new-chat i {
  width: 1.5625rem;
  height: 1.5625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .1);
  color: #6b50bd;
  font-size: 0.625rem
}

.workspace-new-chat span {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: -.01em
}

.workspace-new-chat:hover {
  border-color: rgba(104, 81, 172, .24);
  background: linear-gradient(110deg, rgba(31, 190, 208, .1), rgba(115, 84, 199, .13));
  box-shadow: 0 8px 21px rgba(45, 48, 75, .07);
  transform: translateY(-1px)
}

.workspace-history-head,
.workspace-history-head.pinned-head {
  position: relative;
  min-height: 1.4375rem;
  margin: 0.875rem 0.1875rem 0.3125rem;
  gap: 0.5rem;
  color: #788499;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .12em
}

.workspace-history-head:after {
  content: "";
  height: 1px;
  min-width: 0.625rem;
  flex: 1;
  order: 2;
  background: rgba(71, 83, 105, .09)
}

.workspace-history-head span {
  order: 1;
  white-space: nowrap
}

.workspace-history-head small {
  order: 3;
  min-width: 1.125rem;
  padding: 0.1875rem 0.3125rem;
  background: rgba(75, 87, 108, .065);
  color: #687589;
  font-size: 0.4375rem;
  letter-spacing: 0
}

.workspace-history-head.pinned-head {
  color: #6d54b1
}

.workspace-history-head.pinned-head:after {
  background: rgba(112, 84, 199, .12)
}

.workspace-conversations {
  gap: 2px;
  padding: 0 1px 0.3125rem
}

.workspace-conversation {
  min-height: 2.1875rem;
  padding: 0.1875rem 0.25rem 0.1875rem 0.5rem;
  border-radius: 0.5625rem;
  color: #667287
}

.workspace-conversation>span {
  font-size: 0.59375rem;
  font-weight: 620;
  letter-spacing: -.005em
}

.workspace-conversation:hover {
  border-color: rgba(84, 96, 118, .07);
  background: rgba(75, 87, 108, .045);
  color: #3f4d62
}

.workspace-conversation.active {
  border-color: rgba(112, 84, 199, .1);
  background: rgba(112, 84, 199, .07);
  color: #503e90
}

.conversation-menu-trigger {
  width: 1.6875rem;
  height: 1.6875rem;
  border-radius: 0.5rem;
  font-size: 0.625rem
}

body>.conversation-actions-menu {
  width: 12.125rem;
  padding: 0.4375rem;
  gap: 0.1875rem;
  border-radius: 0.875rem
}

.conversation-actions-menu button {
  height: 2.5rem;
  padding: 0 0.5rem;
  gap: 0.5625rem;
  border-radius: 0.5625rem;
  font-size: 0.625rem;
  font-weight: 700
}

.conversation-actions-menu button i {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 1.75rem;
  border-radius: 0.5rem;
  background: rgba(78, 91, 113, .055);
  font-size: 0.625rem
}

.conversation-actions-menu button:hover i {
  background: rgba(112, 84, 199, .11)
}

.conversation-actions-menu button.danger {
  margin-top: 2px;
  border-top: 1px solid rgba(196, 65, 87, .08);
  border-radius: 0 0 0.5625rem 0.5625rem
}

.conversation-actions-menu button.danger i {
  background: rgba(196, 65, 87, .08)
}

html[data-theme="dark"] .workspace-new-chat {
  border-color: rgba(148, 118, 211, .17);
  background: linear-gradient(110deg, rgba(24, 183, 202, .075), rgba(122, 87, 205, .11));
  color: #e1d9f3;
  box-shadow: none
}

html[data-theme="dark"] .workspace-new-chat i {
  background: rgba(145, 105, 222, .13);
  color: #c5aff2
}

html[data-theme="dark"] .workspace-new-chat:hover {
  border-color: rgba(164, 130, 226, .27);
  background: linear-gradient(110deg, rgba(24, 183, 202, .11), rgba(122, 87, 205, .16))
}

html[data-theme="dark"] .workspace-history-head,
html[data-theme="dark"] .workspace-history-head.pinned-head {
  color: #8190a8
}

html[data-theme="dark"] .workspace-history-head:after {
  background: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .workspace-history-head.pinned-head {
  color: #a995db
}

html[data-theme="dark"] .workspace-history-head.pinned-head:after {
  background: rgba(164, 130, 226, .13)
}

html[data-theme="dark"] .workspace-history-head small {
  background: rgba(255, 255, 255, .055);
  color: #aeb8c7
}

html[data-theme="dark"] .workspace-conversation {
  color: #98a5b8
}

html[data-theme="dark"] .workspace-conversation:hover {
  border-color: rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .035);
  color: #e1e6ed
}

html[data-theme="dark"] .workspace-conversation.active {
  border-color: rgba(159, 124, 224, .12);
  background: rgba(142, 103, 213, .09);
  color: #eee9f8
}

html[data-theme="dark"] .conversation-actions-menu button i {
  background: rgba(255, 255, 255, .045)
}

html[data-theme="dark"] .conversation-actions-menu button:hover i {
  background: rgba(149, 109, 225, .14)
}

html[data-theme="dark"] .conversation-actions-menu button.danger {
  border-color: rgba(239, 132, 149, .09)
}

/* Neutral sidebar typography and compact actions */
.workspace-history-head,
.workspace-history-head.pinned-head {
  min-height: 1.5625rem;
  margin-top: 0.9375rem;
  color: #59667a;
  font-size: 0.53125rem;
  font-weight: 900;
  letter-spacing: .105em
}

.workspace-history-head.pinned-head {
  color: #59667a
}

.workspace-history-head small {
  font-size: 0.46875rem;
  font-weight: 850;
  color: #59667a
}

.workspace-history-head.pinned-head:after {
  background: rgba(71, 83, 105, .09)
}

.workspace-new-chat,
.workspace-new-chat i,
.workspace-new-chat span {
  color: #4f5c70
}

.workspace-new-chat i {
  background: rgba(74, 87, 109, .075)
}

.workspace-conversation,
.workspace-conversation.active,
.workspace-conversation:hover {
  color: #526075
}

.workspace-conversation.active {
  border-color: rgba(76, 89, 111, .1);
  background: rgba(76, 89, 111, .075)
}

.conversation-menu-trigger,
.conversation-menu-trigger:hover {
  color: currentColor
}

.conversation-menu-trigger:hover {
  background: rgba(75, 87, 109, .075)
}

body>.conversation-actions-menu {
  width: 10.375rem;
  padding: 0.3125rem;
  gap: 1px;
  border-radius: 0.6875rem
}

.conversation-actions-menu button {
  height: 2rem;
  padding: 0 0.4375rem;
  gap: 0.4375rem;
  border-radius: 0.4375rem;
  font-size: 0.59375rem;
  font-weight: 750
}

.conversation-actions-menu button i {
  width: 1.4375rem;
  height: 1.4375rem;
  flex-basis: 1.4375rem;
  border-radius: 0.375rem;
  background: rgba(78, 91, 113, .055);
  color: currentColor;
  font-size: 0.5625rem
}

.conversation-actions-menu button:hover {
  background: rgba(75, 87, 109, .065);
  color: #3f4c60
}

.conversation-actions-menu button:hover i {
  background: rgba(75, 87, 109, .085)
}

.conversation-actions-menu button.danger {
  height: 2.125rem;
  margin-top: 0.1875rem;
  border-top: 1px solid rgba(196, 65, 87, .11);
  border-radius: 0 0 0.4375rem 0.4375rem;
  background: rgba(196, 65, 87, .035);
  color: #bd4056
}

.conversation-actions-menu button.danger i {
  background: rgba(196, 65, 87, .1);
  color: #c43f56
}

.conversation-actions-menu button.danger:hover {
  background: rgba(196, 65, 87, .1);
  color: #a93248
}

html[data-theme="dark"] .workspace-history-head,
html[data-theme="dark"] .workspace-history-head.pinned-head {
  color: #aeb9c9
}

html[data-theme="dark"] .workspace-history-head.pinned-head:after {
  background: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .workspace-history-head small {
  color: #aeb9c9
}

html[data-theme="dark"] .workspace-new-chat,
html[data-theme="dark"] .workspace-new-chat i,
html[data-theme="dark"] .workspace-new-chat span {
  color: #d1d8e2
}

html[data-theme="dark"] .workspace-new-chat i {
  background: rgba(255, 255, 255, .055)
}

html[data-theme="dark"] .workspace-conversation,
html[data-theme="dark"] .workspace-conversation.active,
html[data-theme="dark"] .workspace-conversation:hover {
  color: #c3ccd8
}

html[data-theme="dark"] .workspace-conversation.active {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .055)
}

html[data-theme="dark"] .conversation-menu-trigger,
html[data-theme="dark"] .conversation-menu-trigger:hover {
  color: #c3ccd8
}

html[data-theme="dark"] .conversation-menu-trigger:hover {
  background: rgba(255, 255, 255, .06)
}

html[data-theme="dark"] .conversation-actions-menu button {
  color: #c3ccd8
}

html[data-theme="dark"] .conversation-actions-menu button i {
  background: rgba(255, 255, 255, .045);
  color: currentColor
}

html[data-theme="dark"] .conversation-actions-menu button:hover {
  background: rgba(255, 255, 255, .055);
  color: #f0f3f7
}

html[data-theme="dark"] .conversation-actions-menu button:hover i {
  background: rgba(255, 255, 255, .075)
}

html[data-theme="dark"] .conversation-actions-menu button.danger {
  border-color: rgba(239, 107, 129, .13);
  background: rgba(211, 65, 91, .055);
  color: #f08396
}

html[data-theme="dark"] .conversation-actions-menu button.danger i {
  background: rgba(211, 65, 91, .13);
  color: #f08396
}

html[data-theme="dark"] .conversation-actions-menu button.danger:hover {
  background: rgba(211, 65, 91, .13);
  color: #ff9bad
}

/* Accessible logout action in dark theme */
.workspace-usermenu .logout-action {
  color: #bc4056 !important
}

.workspace-usermenu .logout-action>i {
  background: rgba(196, 64, 86, .09) !important;
  color: #bc4056 !important
}

.workspace-usermenu .logout-action b {
  color: #bc4056 !important
}

.workspace-usermenu .logout-action small {
  color: #a86c77 !important
}

.workspace-usermenu .logout-action:hover {
  background: rgba(196, 64, 86, .075) !important;
  color: #a93248 !important
}

.workspace-usermenu .logout-action:hover>i {
  background: rgba(196, 64, 86, .14) !important;
  color: #a93248 !important
}

.workspace-usermenu .logout-action:hover b {
  color: #a93248 !important
}

.workspace-usermenu .logout-action:hover small {
  color: #965e69 !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action {
  color: #f18496 !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action>i {
  background: rgba(218, 67, 92, .13) !important;
  color: #f18496 !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action b {
  color: #f18496 !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action small {
  color: #bd7886 !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action:hover {
  background: rgba(218, 67, 92, .1) !important;
  color: #ff9aac !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action:hover>i {
  background: rgba(218, 67, 92, .19) !important;
  color: #ff9aac !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action:hover b {
  color: #ff9aac !important
}

html[data-theme="dark"] .workspace-usermenu .logout-action:hover small {
  color: #d48d9a !important
}

/* Assistant primary action must not inherit delete styling */
.assistant-detail-actions button[type="submit"],
.assistant-detail-actions button[type="submit"]:first-child,
.assistant-detail-actions button[type="submit"]:last-child {
  border: 0 !important;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .2)
}

.assistant-detail-actions #detailDelete {
  border: 1px solid rgba(199, 66, 87, .19) !important;
  background: rgba(199, 66, 87, .065) !important;
  color: #b74357 !important;
  box-shadow: none
}

html[data-theme="dark"] .assistant-detail-actions #detailDelete {
  border-color: rgba(239, 107, 129, .18) !important;
  background: rgba(211, 65, 91, .08) !important;
  color: #ef8496 !important
}

/* Knowledge source search, selection and upload progress */
.knowledge-tools {
  display: grid;
  grid-template-columns: minmax(9.375rem, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5625rem
}

.knowledge-search {
  height: 2.1875rem;
  padding: 0 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  border: 1px solid rgba(70, 82, 105, .11);
  border-radius: 0.5625rem;
  background: rgba(75, 87, 108, .035);
  color: #8390a2
}

.knowledge-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.5rem;
  outline: 0
}

.knowledge-select-all {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  color: #748095;
  font-size: 0.5rem;
  white-space: nowrap;
  cursor: pointer
}

.knowledge-select-all input {
  accent-color: #7658ca
}

.knowledge-tools>button {
  height: 2.1875rem;
  padding: 0 0.5625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(199, 66, 87, .16);
  border-radius: 0.5625rem;
  background: rgba(199, 66, 87, .065);
  color: #b74357;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.knowledge-tools>button:disabled {
  opacity: .42;
  cursor: not-allowed
}

.knowledge-tools>button b {
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding: 0 0.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(199, 66, 87, .12);
  font-size: 0.4375rem
}

.knowledge-source {
  grid-template-columns: 1.25rem 2.125rem minmax(0, 1fr) auto
}

.knowledge-source.selected {
  border-color: rgba(112, 84, 199, .25);
  background: rgba(112, 84, 199, .065)
}

.knowledge-select {
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  place-items: center;
  cursor: pointer
}

.knowledge-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.knowledge-select span {
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid rgba(90, 102, 123, .28);
  border-radius: 0.25rem;
  background: transparent
}

.knowledge-select input:checked+span {
  border-color: #7658ca;
  background: #7658ca;
  box-shadow: inset 0 0 0 3px #fff
}

.knowledge-empty.compact {
  min-height: 6.5625rem
}

.knowledge-upload-queue {
  display: grid;
  gap: 0.4375rem;
  margin-top: 0.5625rem
}

.knowledge-upload-item {
  padding: 0.5625rem;
  display: grid;
  grid-template-columns: 1.875rem minmax(0, 1fr) 2.1875rem;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(112, 84, 199, .14);
  border-radius: 0.625rem;
  background: rgba(112, 84, 199, .04)
}

.knowledge-upload-item>span {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .1);
  color: #7658ca
}

.knowledge-upload-item b,
.knowledge-upload-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.knowledge-upload-item b {
  font-size: 0.5rem
}

.knowledge-upload-item small {
  margin-top: 2px;
  color: #8490a2;
  font-size: 0.4375rem
}

.knowledge-upload-item div>div {
  height: 0.25rem;
  margin-top: 0.375rem;
  overflow: hidden;
  border-radius: 0.1875rem;
  background: rgba(112, 84, 199, .1)
}

.knowledge-upload-item div>div i {
  display: block;
  height: 100%;
  border-radius: 0.1875rem;
  background: linear-gradient(90deg, #20bfd1, #7658ca);
  transition: width .18s ease
}

.knowledge-upload-item strong {
  color: #7658ca;
  font-size: 0.5rem;
  text-align: right
}

.knowledge-upload-item.complete {
  border-color: rgba(16, 185, 129, .2)
}

.knowledge-upload-item.complete>span,
.knowledge-upload-item.complete strong {
  color: #0fa475
}

.knowledge-upload-item.failed {
  border-color: rgba(199, 66, 87, .22)
}

.knowledge-upload-item.failed>span,
.knowledge-upload-item.failed strong {
  color: #b74357
}

html[data-theme="dark"] .knowledge-search,
html[data-theme="dark"] .knowledge-upload-item {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .knowledge-search input {
  color: #e7edf5
}

html[data-theme="dark"] .knowledge-select input:checked+span {
  box-shadow: inset 0 0 0 3px #111a28
}

@media(max-width:650px) {
  .knowledge-tools {
    grid-template-columns: 1fr 1fr
  }

  .knowledge-search {
    grid-column: 1/-1
  }

  .knowledge-tools>button {
    justify-content: center
  }
}

/* Keep the assistant editor inside the viewport; only its knowledge pane scrolls. */
html.assistant-editor-page,
html.assistant-editor-page body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
  overscroll-behavior: none
}

/* Neutral graphite dark theme */
html[data-theme="dark"] {
  --bg: #161616;
  --panel: #202020;
  --panel2: #272727;
  --line: #383838;
  --text: #f2f2f2;
  --muted: #a4a4a4;
  --soft-line: rgba(255, 255, 255, .09)
}

html[data-theme="dark"] body,
html[data-theme="dark"] .marketing-page,
html[data-theme="dark"] .workspace-layout,
html[data-theme="dark"] .admin-workspace,
html[data-theme="dark"] .account-settings-page,
html[data-theme="dark"] .account-gate {
  background-color: #161616 !important;
  background-image: none !important;
  color: #f2f2f2
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .workspace-top,
html[data-theme="dark"] .admin-head,
html[data-theme="dark"] .account-settings-top {
  background: rgba(22, 22, 22, .88) !important;
  border-color: rgba(255, 255, 255, .08) !important
}

html[data-theme="dark"] .workspace-sidebar,
html[data-theme="dark"] .admin-sidebar {
  background: #191919 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 10px 0 38px rgba(0, 0, 0, .18) !important
}

html[data-theme="dark"] .workspace-main,
html[data-theme="dark"] .admin-content {
  background: #1c1c1c !important;
  background-image: none !important
}

html[data-theme="dark"] .workspace-composer-wrap {
  background: linear-gradient(transparent, rgba(28, 28, 28, .94) 22%, #1c1c1c 48%) !important
}

html[data-theme="dark"] .is-new-conversation .workspace-composer-wrap {
  background: transparent !important
}

html[data-theme="dark"] .workspace-composer,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .legal-modal,
html[data-theme="dark"] .assistant-edit-modal,
html[data-theme="dark"] .limit-modal,
html[data-theme="dark"] .model-editor-popover {
  background: #262626 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .32) !important
}

html[data-theme="dark"] .workspace-composer:focus-within {
  background: #292929 !important;
  border-color: rgba(167, 139, 230, .32) !important;
  box-shadow: 0 22px 65px rgba(0, 0, 0, .36), 0 0 0 3px rgba(139, 105, 210, .06) !important
}

html[data-theme="dark"] .workspace-usermenu,
html[data-theme="dark"] .assistant-popover,
html[data-theme="dark"] .conversation-actions-menu,
html[data-theme="dark"] .toast {
  background: rgba(38, 38, 38, .96) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38) !important
}

html[data-theme="dark"] .workspace-messages .bubble {
  background: #272727 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: #d8d8d8 !important
}

html[data-theme="dark"] .workspace-messages .msg.me .bubble {
  background: linear-gradient(135deg, #44365f, #56396f) !important;
  color: #f6f3fa !important
}

html[data-theme="dark"] .workspace-conversation:hover,
html[data-theme="dark"] .workspace-conversation.active {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .07) !important;
  color: #e2e2e2 !important
}

html[data-theme="dark"] .workspace-new-chat {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  color: #d3d3d3 !important
}

html[data-theme="dark"] .workspace-suggestions button,
html[data-theme="dark"] .workspace-menu-usage {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: #ababab !important
}

html[data-theme="dark"] .workspace-suggestions button:hover,
html[data-theme="dark"] .workspace-tool:hover,
html[data-theme="dark"] .composer-assistant:hover {
  background: rgba(255, 255, 255, .085) !important;
  color: #f0f0f0 !important
}

html[data-theme="dark"] .account-field input,
html[data-theme="dark"] .account-field select,
html[data-theme="dark"] .admin-workspace .field input,
html[data-theme="dark"] .admin-workspace .field textarea,
html[data-theme="dark"] .admin-workspace .field select,
html[data-theme="dark"] .assistant-detail-fields input,
html[data-theme="dark"] .assistant-detail-fields select,
html[data-theme="dark"] .assistant-detail-fields textarea,
html[data-theme="dark"] .knowledge-web input,
html[data-theme="dark"] .model-popover-fields input {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #ededed !important;
  color-scheme: dark
}

html[data-theme="dark"] .admin-metric,
html[data-theme="dark"] .overview-panel,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .account-setting-card,
html[data-theme="dark"] .assistant-settings-panel,
html[data-theme="dark"] .knowledge-panel,
html[data-theme="dark"] .models-list-panel,
html[data-theme="dark"] .model-editor,
html[data-theme="dark"] .current-plan-card,
html[data-theme="dark"] .subscription-choice {
  background: #232323 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .085) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .16) !important
}

html[data-theme="dark"] .feature-four article,
html[data-theme="dark"] .assistant-cards article,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .capability-grid article,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .workflow-steps article {
  background: #222 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .085) !important
}

html[data-theme="dark"] .ai-preview {
  background: #222 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #e9e9e9 !important
}

html[data-theme="dark"] .preview-cards article,
html[data-theme="dark"] .preview-stats span,
html[data-theme="dark"] .user-line {
  background: #292929 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: #ededed !important
}

html[data-theme="dark"] .preview-chat {
  background: #202020 !important;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) !important
}

html[data-theme="dark"] .marketing-footer {
  background: #181818 !important;
  color: #ededed !important;
  border-top-color: rgba(255, 255, 255, .09) !important
}

html[data-theme="dark"] .marketing-footer .social {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, .1) !important
}

html[data-theme="dark"] .marketing-footer .social:hover {
  background: #303030 !important;
  border-color: rgba(255, 255, 255, .16) !important
}

/* Remove residual purple/blue treatments from dark forms and settings */
html[data-theme="dark"] .account-settings-title>span,
html[data-theme="dark"] .setting-card-head small,
html[data-theme="dark"] .account-kicker,
html[data-theme="dark"] .account-form-kicker,
html[data-theme="dark"] .otp-login-modal>small,
html[data-theme="dark"] .otp-setup-modal>small:first-child,
html[data-theme="dark"] .assistant-modal-kicker,
html[data-theme="dark"] .assistant-icon-field>span small {
  color: #a9a9a9 !important
}

html[data-theme="dark"] .setting-card-head>span,
html[data-theme="dark"] .email-security-card .setting-card-head>span,
html[data-theme="dark"] .otp-setting-card .setting-card-head>span {
  background: #303030 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  color: #ededed !important
}

html[data-theme="dark"] .setting-fields input,
html[data-theme="dark"] .profile-personalization select,
html[data-theme="dark"] .avatar-change-control>div,
html[data-theme="dark"] .assistant-icon-control,
html[data-theme="dark"] .otp-inline input,
html[data-theme="dark"] .otp-login-modal input,
html[data-theme="dark"] .otp-setup-modal input {
  background: #1b1b1b !important;
  border-color: rgba(255, 255, 255, .11) !important;
  color: #f0f0f0 !important;
  box-shadow: none !important
}

html[data-theme="dark"] .setting-fields input:focus,
html[data-theme="dark"] .profile-personalization select:focus,
html[data-theme="dark"] .account-field input:focus,
html[data-theme="dark"] .account-field select:focus,
html[data-theme="dark"] .otp-inline input:focus,
html[data-theme="dark"] .otp-login-modal input:focus,
html[data-theme="dark"] .otp-setup-modal input:focus {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, .24) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .045) !important
}

html[data-theme="dark"] .account-field input,
html[data-theme="dark"] .account-field select {
  background: #1b1b1b !important;
  border-color: rgba(255, 255, 255, .11) !important;
  color: #f0f0f0 !important
}

html[data-theme="dark"] .account-field input::placeholder,
html[data-theme="dark"] .setting-fields input::placeholder {
  color: #727272 !important
}

html[data-theme="dark"] .account-tabs {
  background: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, .065) !important
}

html[data-theme="dark"] .account-tabs a {
  color: #999 !important
}

html[data-theme="dark"] .account-tabs a:hover {
  color: #dedede !important
}

html[data-theme="dark"] .account-tabs a.active {
  background: #303030 !important;
  color: #f2f2f2 !important;
  box-shadow: none !important
}

html[data-theme="dark"] .password-toggle,
html[data-theme="dark"] .account-back,
html[data-theme="dark"] .account-legal-link {
  color: #aaa !important
}

html[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .account-back:hover,
html[data-theme="dark"] .account-legal-link:hover {
  background: rgba(255, 255, 255, .065) !important;
  color: #f0f0f0 !important
}

html[data-theme="dark"] .avatar-change-control button,
html[data-theme="dark"] .assistant-icon-control label,
html[data-theme="dark"] .setting-secondary {
  background: #2c2c2c !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #d9d9d9 !important
}

html[data-theme="dark"] .avatar-change-control button:hover,
html[data-theme="dark"] .assistant-icon-control label:hover,
html[data-theme="dark"] .setting-secondary:hover {
  background: #363636 !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #fff !important
}

html[data-theme="dark"] .assistant-icon-preview,
html[data-theme="dark"] .assistant-brand-avatar,
html[data-theme="dark"] .assistant-popover button>.assistant-brand-avatar,
html[data-theme="dark"] .assistant-select .assistant-brand-avatar {
  background: #292929 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: none !important
}

html[data-theme="dark"] .assistant-icon-preview:before,
html[data-theme="dark"] .assistant-brand-avatar:before {
  display: none !important
}

html[data-theme="dark"] .otp-login-modal>span {
  background: #303030 !important;
  background-image: none !important;
  color: #ededed !important
}

html[data-theme="dark"] .otp-login-modal,
html[data-theme="dark"] .otp-setup-modal,
html[data-theme="dark"] .avatar-modal {
  background: #252525 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #ededed !important
}

html[data-theme="dark"] .settings-page-content:before,
html[data-theme="dark"] .subscription-page-content:before {
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) !important
}

/* Independent paid plan states */
.management-plan.chatbot-plan {
  background: rgba(28, 181, 198, .1) !important;
  color: #168a99 !important
}

.management-plan.chatbot-plan i {
  color: inherit
}

.admin-metrics .chatbot-metric>span {
  background: linear-gradient(135deg, rgba(22, 180, 198, .15), rgba(112, 84, 199, .14));
  color: #258da5
}

/* Three-tier marketing pricing */
.pricing-showcase .simple-pricing {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 73.75rem;
  gap: 1.125rem
}

.pricing-showcase .simple-plan {
  min-height: 35rem;
  padding: 1.8125rem !important
}

.pricing-showcase .chatbot-marketing-plan {
  border-color: rgba(24, 177, 196, .35) !important;
  background: linear-gradient(145deg, rgba(26, 189, 207, .075), rgba(116, 83, 203, .075), rgba(255, 255, 255, .62)) !important;
  box-shadow: 0 23px 64px rgba(64, 92, 175, .1)
}

.pricing-showcase .chatbot-marketing-plan .price {
  background: linear-gradient(100deg, #15afc2, #7259dc 64%, #a32ccb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.pricing-showcase .chatbot-marketing-plan .price span {
  -webkit-text-fill-color: var(--muted)
}

.pricing-showcase .chatbot-marketing-plan>.primary {
  background: linear-gradient(115deg, #15c9d8, #765ee8 55%, #b12bd8);
  border: 0;
  color: #fff;
  box-shadow: 0 10px 28px rgba(101, 79, 195, .18)
}

html[data-theme="dark"] .pricing-showcase .chatbot-marketing-plan {
  background: linear-gradient(145deg, rgba(25, 187, 205, .075), rgba(126, 93, 211, .105)) !important;
  border-color: rgba(89, 180, 212, .25) !important
}

@media(max-width:1000px) {
  .pricing-showcase .simple-pricing {
    grid-template-columns: 1fr;
    max-width: 38.75rem
  }

  .pricing-showcase .simple-plan {
    min-height: 31.25rem;
    padding: 2.125rem !important
  }
}

/* Chatbot widget management */
.chatbots-page {
  display: grid;
  gap: 1.25rem
}

.chatbots-hero {
  position: relative;
  padding: 1.875rem 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 1.5rem;
  background: linear-gradient(120deg, rgba(31, 190, 209, .08), rgba(112, 84, 199, .09), rgba(255, 255, 255, .7));
  box-shadow: 0 22px 60px rgba(36, 43, 64, .07)
}

.chatbots-hero:after {
  content: "";
  position: absolute;
  right: -5.625rem;
  top: -9.375rem;
  width: 22.5rem;
  height: 22.5rem;
  border: 1px solid rgba(112, 84, 199, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(31, 190, 209, .025)
}

.chatbots-hero>div,
.chatbots-hero>button {
  position: relative;
  z-index: 1
}

.chatbots-hero a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 1.5rem;
  color: #748095;
  font-size: 0.5625rem;
  font-weight: 750
}

.chatbots-hero span {
  display: block;
  color: #7054c7;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .16em
}

.chatbots-hero h1 {
  margin: 0.4375rem 0 0.5rem;
  font-size: 2.375rem;
  letter-spacing: -.05em
}

.chatbots-hero p {
  max-width: 40.625rem;
  margin: 0;
  color: #748095;
  font-size: 0.6875rem;
  line-height: 1.6
}

.chatbots-hero>button,
.chatbot-empty>button {
  height: 2.625rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.6875rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 850;
  box-shadow: 0 12px 28px rgba(93, 73, 187, .2);
  cursor: pointer;
  white-space: nowrap
}

.chatbots-hero>button:disabled,
.chatbot-empty>button:disabled {
  opacity: .45;
  cursor: not-allowed
}

.chatbot-plan-gate {
  padding: 0.9375rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  border: 1px solid rgba(224, 150, 57, .2);
  border-radius: 0.9375rem;
  background: rgba(255, 179, 67, .08)
}

.chatbot-plan-gate>i {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: rgba(224, 150, 57, .12);
  color: #b66a15
}

.chatbot-plan-gate div {
  flex: 1
}

.chatbot-plan-gate b,
.chatbot-plan-gate span {
  display: block
}

.chatbot-plan-gate b {
  font-size: 0.6875rem
}

.chatbot-plan-gate span {
  margin-top: 0.1875rem;
  color: #7b8596;
  font-size: 0.5625rem
}

.chatbot-plan-gate a {
  padding: 0.5625rem 0.75rem;
  border-radius: 0.5625rem;
  background: #fff;
  color: #6b50ba;
  font-size: 0.5rem;
  font-weight: 800
}

.chatbot-usage {
  padding: 1.125rem 1.3125rem;
  border: 1px solid rgba(70, 81, 103, .1);
  border-radius: 1.0625rem;
  background: rgba(255, 255, 255, .62)
}

.chatbot-usage>div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem
}

.chatbot-usage span {
  color: #7054c7;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .12em
}

.chatbot-usage b {
  font-size: 0.6875rem
}

.chatbot-usage-track {
  height: 0.4375rem;
  margin: 0.8125rem 0 0.5rem;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: rgba(78, 89, 110, .09)
}

.chatbot-usage-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20bfd1, #735ee4)
}

.chatbot-usage small {
  color: #8490a0;
  font-size: 0.5rem
}

.chatbot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem
}

.chatbot-card {
  padding: 1.3125rem;
  display: flex;
  flex-direction: column;
  min-height: 21.5625rem;
  border: 1px solid rgba(65, 78, 102, .11);
  border-radius: 1.1875rem;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 16px 42px rgba(38, 46, 67, .045)
}

.chatbot-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.chatbot-symbol {
  width: 2.6875rem;
  height: 2.6875rem;
  display: grid;
  place-items: center;
  border-radius: 0.8125rem;
  background: color-mix(in srgb, var(--chatbot-color), transparent 86%);
  color: var(--chatbot-color);
  font-size: 1.0625rem
}

.chatbot-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.375rem 0.5rem;
  border-radius: 62.4375rem;
  background: rgba(94, 105, 123, .07);
  color: #778293;
  font-size: 0.5rem;
  font-weight: 800
}

.chatbot-status i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor
}

.chatbot-status.active {
  background: rgba(20, 168, 125, .09);
  color: #15936f
}

.chatbot-card>small {
  margin-top: 1.125rem;
  color: #7054c7;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .1em
}

.chatbot-card h3 {
  margin: 0.375rem 0 0.3125rem;
  font-size: 1.0625rem
}

.chatbot-card>p {
  margin: 0;
  color: #7b8697;
  font-size: 0.5625rem
}

.chatbot-domains {
  margin: 1rem 0;
  display: flex;
  gap: 0.4375rem;
  align-items: flex-start;
  color: #657086;
  font-size: 0.5rem;
  line-height: 1.45
}

.chatbot-domains span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}

.chatbot-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: auto
}

.chatbot-card-meta>span {
  padding: 0.5625rem;
  border-radius: 0.625rem;
  background: rgba(87, 99, 120, .045)
}

.chatbot-card-meta b,
.chatbot-card-meta small {
  display: block
}

.chatbot-card-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.5625rem
}

.chatbot-card-meta small {
  margin-top: 0.1875rem;
  color: #8a94a4;
  font-size: 0.4375rem
}

.chatbot-card-actions {
  display: flex;
  gap: 0.4375rem;
  margin-top: 0.75rem
}

.chatbot-card-actions button {
  height: 2.125rem;
  flex: 1;
  border: 1px solid rgba(65, 78, 102, .11);
  border-radius: 0.5625rem;
  background: transparent;
  color: #5f6b7e;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 750;
  cursor: pointer
}

.chatbot-card-actions button:last-child {
  border-color: rgba(112, 84, 199, .16);
  background: rgba(112, 84, 199, .06);
  color: #654ab2
}

.chatbot-empty {
  grid-column: 1/-1;
  padding: 3.625rem 1.875rem;
  text-align: center;
  border: 1px dashed rgba(112, 84, 199, .25);
  border-radius: 1.4375rem;
  background: rgba(255, 255, 255, .48)
}

.chatbot-empty>span {
  width: 3.625rem;
  height: 3.625rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 1.125rem;
  background: linear-gradient(135deg, rgba(31, 190, 209, .14), rgba(112, 84, 199, .15));
  color: #7054c7;
  font-size: 1.375rem
}

.chatbot-empty>small {
  display: block;
  color: #7054c7;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .15em
}

.chatbot-empty h2 {
  margin: 0.5rem 0;
  font-size: 1.5rem
}

.chatbot-empty p {
  max-width: 32.5rem;
  margin: 0 auto 1.25rem;
  color: #788497;
  font-size: 0.625rem;
  line-height: 1.6
}

.chatbot-empty a {
  display: block;
  margin-top: 0.75rem;
  color: #654ab2;
  font-size: 0.5625rem;
  font-weight: 800
}

.chatbot-editor-card {
  padding: 1.625rem;
  border: 1px solid rgba(112, 84, 199, .18);
  border-radius: 1.3125rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 22px 58px rgba(38, 45, 66, .08)
}

.chatbot-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.125rem;
  margin-bottom: 1.4375rem
}

.chatbot-editor-head small {
  color: #7054c7;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .13em
}

.chatbot-editor-head h2 {
  margin: 0.375rem 0 0.3125rem;
  font-size: 1.4375rem
}

.chatbot-editor-head p {
  margin: 0;
  color: #7d8797;
  font-size: 0.5625rem
}

.chatbot-close-editor {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(68, 80, 101, .1);
  border-radius: 0.625rem;
  background: transparent;
  color: #6d7889;
  cursor: pointer
}

.chatbot-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9375rem
}

.chatbot-fields label {
  color: #566276;
  font-size: 0.5625rem;
  font-weight: 750
}

.chatbot-fields label.wide {
  grid-column: 1/-1
}

.chatbot-fields input:not([type=checkbox]),
.chatbot-fields select,
.chatbot-fields textarea {
  width: 100%;
  margin-top: 0.4375rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(65, 78, 102, .14);
  border-radius: 0.625rem;
  background: #f5f5f3;
  color: #172136;
  font: inherit;
  font-size: 0.625rem;
  outline: 0
}

.chatbot-fields input:not([type=checkbox]),
.chatbot-fields select {
  height: 2.625rem
}

.chatbot-fields input[type=color] {
  padding: 0.3125rem
}

.chatbot-fields textarea {
  padding-top: 0.625rem;
  resize: vertical;
  line-height: 1.45
}

.chatbot-fields label>small {
  display: block;
  margin-top: 0.3125rem;
  color: #9099a7;
  font-size: 0.4375rem
}

.chatbot-fields input:focus,
.chatbot-fields select:focus,
.chatbot-fields textarea:focus {
  border-color: rgba(112, 84, 199, .42);
  box-shadow: 0 0 0 4px rgba(112, 84, 199, .065)
}

.chatbot-active-field {
  padding: 0.625rem 0.75rem;
  display: flex !important;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(65, 78, 102, .1);
  border-radius: 0.625rem
}

.chatbot-active-field span,
.chatbot-active-field b,
.chatbot-active-field small {
  display: block
}

.chatbot-active-field small {
  margin-top: 2px;
  color: #8a94a4;
  font-size: 0.4375rem
}

.chatbot-form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.375rem
}

.chatbot-form-actions span {
  flex: 1
}

.chatbot-form-actions button {
  height: 2.375rem;
  padding: 0 0.8125rem;
  border: 1px solid rgba(65, 78, 102, .12);
  border-radius: 0.625rem;
  background: transparent;
  color: #5e697c;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.chatbot-form-actions button.primary {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff
}

.chatbot-form-actions button.danger {
  border-color: rgba(207, 74, 74, .15);
  color: #bc4444
}

.chatbot-choice {
  border-color: rgba(31, 190, 209, .28);
  background: linear-gradient(145deg, rgba(31, 190, 209, .07), rgba(112, 84, 199, .075), rgba(252, 252, 250, .9))
}

.chatbot-choice .choice-price strong {
  background: linear-gradient(105deg, #13aebf, #6a54d5 62%, #9625c2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.chatbot-plan-grid {
  grid-template-columns: repeat(3, 1fr)
}

.admin-chatbot-name {
  display: flex;
  align-items: center;
  gap: 0.5625rem
}

.admin-chatbot-name>span {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--chatbot-color), transparent 86%);
  color: var(--chatbot-color)
}

.admin-chatbot-name small,
.admin-chatbot-email {
  display: block !important;
  margin-top: 0.1875rem;
  color: #8a94a4;
  font-size: 0.4375rem
}

.admin-origin {
  display: block;
  max-width: 13.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0.1875rem 0;
  padding: 0.25rem 0.4375rem;
  border-radius: 0.375rem;
  background: rgba(89, 101, 122, .055);
  font-size: 0.4375rem
}

.admin-chatbot-actions {
  display: flex;
  gap: 0.3125rem;
  flex-wrap: wrap
}

.admin-chatbot-actions button {
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(69, 81, 102, .12);
  border-radius: 0.4375rem;
  background: transparent;
  color: #5e6a7e;
  font: inherit;
  font-size: 0.4375rem;
  cursor: pointer
}

.admin-chatbot-actions button i {
  margin-right: 0.25rem
}

.chatbot-admin-loading {
  padding: 3.75rem;
  text-align: center;
  color: #798496;
  font-size: 0.6875rem
}

.chatbot-admin-loading i {
  margin-right: 0.4375rem
}

.chatbot-admin-loading.error {
  color: #b34a4a
}

html[data-theme="dark"] .chatbots-hero,
html[data-theme="dark"] .chatbot-usage,
html[data-theme="dark"] .chatbot-card,
html[data-theme="dark"] .chatbot-empty,
html[data-theme="dark"] .chatbot-editor-card {
  border-color: rgba(170, 145, 235, .15);
  background-color: rgba(29, 27, 35, .76);
  color: #f1eff7
}

html[data-theme="dark"] .chatbot-plan-gate {
  background: rgba(212, 148, 54, .08)
}

html[data-theme="dark"] .chatbot-plan-gate a {
  background: #28252e
}

html[data-theme="dark"] .chatbot-fields input:not([type=checkbox]),
html[data-theme="dark"] .chatbot-fields select,
html[data-theme="dark"] .chatbot-fields textarea {
  border-color: rgba(255, 255, 255, .09);
  background: #242129;
  color: #eeeaf5
}

html[data-theme="dark"] .chatbot-choice {
  background: linear-gradient(145deg, rgba(31, 190, 209, .06), rgba(112, 84, 199, .08), rgba(26, 24, 31, .9))
}

/* Keep the plan hierarchy consistent with the light theme. */
html[data-theme="dark"] .plans-frame .subscription-choice.pro-choice,
html[data-theme="dark"] .plans-frame .subscription-choice.chatbot-choice {
  border-color: rgba(169, 132, 232, .22) !important;
  background: linear-gradient(145deg, rgba(31, 190, 209, .045), rgba(112, 84, 199, .075), rgba(35, 35, 35, .96)) !important
}

html[data-theme="dark"] .plans-frame .pro-choice .choice-price strong,
html[data-theme="dark"] .plans-frame .chatbot-choice .choice-price strong {
  background: linear-gradient(105deg, #20bfd1, #765ee3 62%, #a632d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

html[data-theme="dark"] .plans-frame .subscription-choice>button.request-pro {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  box-shadow: 0 10px 24px rgba(93, 73, 187, .24)
}

html[data-theme="dark"] .plans-frame .subscription-choice>button.pending {
  border-color: rgba(166, 129, 229, .16);
  background: rgba(112, 84, 199, .1);
  color: #bca8f5
}

html[data-theme="dark"] .plans-frame .admin-approved,
html[data-theme="dark"] .plans-frame .subscription-choice li i {
  color: #8c6cf0
}

@media(max-width:900px) {
  .chatbot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .chatbot-plan-grid {
    grid-template-columns: 1fr
  }

  .plans-frame .chatbot-plan-grid .subscription-choice {
    min-height: 26.875rem
  }
}

@media(max-width:620px) {
  .chatbots-hero {
    padding: 1.4375rem;
    align-items: flex-start;
    flex-direction: column
  }

  .chatbots-hero>button {
    width: 100%
  }

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

  .chatbot-fields {
    grid-template-columns: 1fr
  }

  .chatbot-fields label.wide {
    grid-column: auto
  }

  .chatbot-form-actions {
    flex-wrap: wrap
  }

  .chatbot-form-actions span {
    display: none
  }

  .chatbot-form-actions button {
    flex: 1
  }

  .chatbot-plan-gate {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .chatbot-plan-gate div {
    min-width: calc(100% - 3.4375rem)
  }

  .chatbot-plan-gate a {
    margin-left: 3.0625rem
  }
}

html[data-theme="dark"] .setting-primary,
html[data-theme="dark"] .account-submit,
html[data-theme="dark"] .otp-inline button {
  background: #e5e5e5 !important;
  background-image: none !important;
  border: 1px solid #e5e5e5 !important;
  color: #181818 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2) !important
}

html[data-theme="dark"] .setting-primary:hover,
html[data-theme="dark"] .account-submit:hover,
html[data-theme="dark"] .otp-inline button:hover {
  background: #fff !important;
  border-color: #fff !important;
  filter: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important
}

html[data-theme="dark"] .account-submit:focus-visible,
html[data-theme="dark"] .setting-primary:focus-visible,
html[data-theme="dark"] .setting-secondary:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .18) !important;
  outline-offset: 2px
}

html[data-theme="dark"] .assistant-icon-control input:focus-visible+label {
  outline: 3px solid rgba(255, 255, 255, .12) !important;
  outline-offset: 2px
}

/* Consistent, theme-aware scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 99, 111, .42) transparent
}

*::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem
}

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

*::-webkit-scrollbar-thumb {
  min-height: 2.125rem;
  border: 2px solid transparent;
  border-radius: 62.4375rem;
  background: rgba(91, 99, 111, .38);
  background-clip: padding-box
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(73, 81, 93, .62);
  background-clip: padding-box
}

*::-webkit-scrollbar-thumb:active {
  background: rgba(58, 65, 76, .72);
  background-clip: padding-box
}

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

.workspace-chat-area {
  scrollbar-color: rgba(91, 99, 111, .42) transparent
}

.workspace-chat-area::-webkit-scrollbar-thumb,
.workspace-composer textarea::-webkit-scrollbar-thumb {
  background: rgba(91, 99, 111, .38);
  background-clip: padding-box
}

.workspace-chat-area::-webkit-scrollbar-thumb:hover,
.workspace-composer textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(73, 81, 93, .62);
  background-clip: padding-box
}

html[data-theme="dark"] * {
  scrollbar-color: rgba(190, 190, 190, .3) transparent
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(190, 190, 190, .26);
  background-clip: padding-box
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(215, 215, 215, .42);
  background-clip: padding-box
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb:active {
  background: rgba(235, 235, 235, .52);
  background-clip: padding-box
}

html[data-theme="dark"] .workspace-chat-area,
html[data-theme="dark"] .workspace-composer textarea {
  scrollbar-color: rgba(190, 190, 190, .3) transparent
}

html[data-theme="dark"] .workspace-chat-area::-webkit-scrollbar-thumb,
html[data-theme="dark"] .workspace-composer textarea::-webkit-scrollbar-thumb {
  background: rgba(190, 190, 190, .26);
  background-clip: padding-box
}

html[data-theme="dark"] .workspace-chat-area::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .workspace-composer textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(215, 215, 215, .42);
  background-clip: padding-box
}

html[data-theme="dark"] .workspace-composer textarea::-webkit-scrollbar-track {
  margin: 0.5625rem 0
}

/* Simplified model activation control */
.model-popover-active {
  grid-template-columns: 1.0625rem 1fr !important;
  padding: 0.75rem 0.8125rem !important;
  gap: 0.625rem !important;
  border-radius: 0.75rem !important;
  background: rgba(75, 87, 108, .025);
  transition: background .16s ease, border-color .16s ease
}

.model-popover-active:hover {
  border-color: rgba(70, 82, 105, .2);
  background: rgba(75, 87, 108, .055)
}

.model-popover-active input {
  width: 0.9375rem;
  height: 0.9375rem;
  margin: 0;
  accent-color: #657084
}

.model-popover-active>i {
  display: none !important
}

html[data-theme="dark"] .model-popover-active {
  background: rgba(255, 255, 255, .025) !important
}

html[data-theme="dark"] .model-popover-active:hover {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .055) !important
}

.workspace-disclaimer {
  position: fixed;
  z-index: 31;
  left: 15.75rem;
  right: 0;
  bottom: 0.375rem;
  margin: 0;
  padding: 0 1.125rem;
  color: #858d99;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  letter-spacing: .01em;
  pointer-events: none
}

html[data-theme="dark"] .workspace-disclaimer {
  color: #888
}

.sidebar-collapsed .workspace-disclaimer {
  left: 4.75rem
}

.has-conversation .workspace-composer-wrap {
  padding-bottom: 1.75rem
}

@media(max-width:900px) {
  .workspace-disclaimer {
    left: 4.75rem
  }
}

@media(max-width:620px) {
  .workspace-disclaimer {
    display: block;
    left: 3.875rem;
    bottom: 0.25rem;
    padding: 0 0.5rem;
    font-size: 0.5rem
  }

  .has-conversation .workspace-composer-wrap {
    padding-bottom: 1.5rem
  }
}

html.assistant-editor-page body,
html.assistant-editor-page #app {
  max-height: 100vh
}

html.assistant-editor-page .admin-workspace {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden
}

@media(min-width:1051px) {
  .admin-content.assistant-editor-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 1.125rem
  }

  .admin-content.assistant-editor-open .admin-head,
  .admin-content.assistant-editor-open .admin-page-title {
    flex: 0 0 auto
  }

  .admin-content.assistant-editor-open #adminBody,
  .admin-content.assistant-editor-open #myAssistantBody {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden
  }

  .admin-content.assistant-editor-open .assistant-detail-head,
  .admin-content.assistant-editor-open .assistant-detail-stats {
    flex: 0 0 auto
  }

  .admin-content.assistant-editor-open .assistant-detail-grid {
    min-height: 0;
    flex: 1;
    align-items: stretch;
    overflow: hidden
  }

  .admin-content.assistant-editor-open .assistant-settings-panel,
  .admin-content.assistant-editor-open .knowledge-panel {
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box
  }

  .admin-content.assistant-editor-open .assistant-settings-panel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
  }

  .admin-content.assistant-editor-open .knowledge-panel {
    position: relative;
    padding-bottom: 1.1875rem;
    display: flex;
    flex-direction: column;
    overflow: hidden
  }

  .admin-content.assistant-editor-open .knowledge-add-tabs,
  .admin-content.assistant-editor-open .knowledge-uploader,
  .admin-content.assistant-editor-open .knowledge-web {
    flex: 0 0 auto
  }

  .admin-content.assistant-editor-open .knowledge-scroll-region {
    min-height: 0;
    flex: 1;
    margin-top: 0.5625rem;
    padding-right: 0.3125rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
  }

  .admin-content.assistant-editor-open .knowledge-upload-queue {
    overflow: visible
  }

  .admin-content.assistant-editor-open .knowledge-list {
    max-height: none;
    padding-bottom: 0;
    overflow: visible
  }

  .admin-content.assistant-editor-open .knowledge-list::after {
    content: "";
    display: block;
    height: 0.5rem;
    grid-column: 1/-1
  }
}

/* Chatbot UI aligned with the management workspace */
.admin-workspace.chatbot-workspace {
  height: 100vh;
  min-height: 0;
  grid-template-columns: 15.75rem minmax(0, 1fr);
  overflow: hidden;
  background: #f6f6f3;
  color: #172136
}

.chatbot-workspace .chatbot-workspace-side {
  position: relative;
  top: auto;
  height: 100vh;
  padding: 1.125rem 0.875rem 0.875rem;
  background: rgba(250, 250, 248, .96);
  color: #66738a;
  border-color: rgba(49, 63, 89, .1)
}

.chatbot-workspace .chatbot-workspace-nav {
  display: grid;
  gap: 0.3125rem
}

.chatbot-workspace .chatbot-workspace-nav button {
  height: 2.1875rem;
  margin: 0;
  padding: 0 0.625rem;
  border-radius: 0.5625rem
}

.chatbot-workspace .chatbot-workspace-nav button i {
  width: 1.1875rem;
  color: currentColor;
  font-size: 0.625rem
}

.chatbot-workspace .admin-profile {
  min-width: 0
}

.chatbot-workspace .admin-profile>div {
  min-width: 0
}

.chatbot-workspace .admin-profile b {
  max-width: 9.0625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.chatbot-workspace-main {
  min-width: 0;
  height: 100vh;
  padding: 0 1.875rem 2.625rem;
  overflow: auto
}

.chatbot-workspace-main>.chatbot-workspace-head {
  position: sticky;
  top: 0;
  z-index: 25;
  height: 3rem;
  margin: 0 -1.875rem;
  padding: 0 1.875rem;
  border-bottom: 1px solid rgba(62, 75, 99, .09);
  background: rgba(247, 247, 244, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px)
}

.chatbot-workspace-head>span {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: #788497;
  font-size: 0.5625rem;
  font-weight: 700
}

.chatbot-workspace-head>span i {
  color: currentColor
}

.chatbot-workspace-head .admin-theme-toggle {
  top: 0.375rem;
  right: 1.875rem
}

.chatbot-page-title {
  padding: 1.5rem 0 1.125rem
}

.chatbot-page-title p {
  margin: 0.5rem 0 0;
  color: #7b8698;
  font-size: 0.625rem;
  line-height: 1.55
}

.chatbot-workspace-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 2.1875rem
}

.chatbot-admin-intro {
  margin: 0 0 0.9375rem
}

.chatbot-admin-intro>a {
  height: 2.125rem;
  padding: 0 0.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border-radius: 0.625rem;
  white-space: nowrap
}

.chatbot-admin-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6875rem;
  margin-bottom: 0.875rem
}

.chatbot-admin-metrics .admin-metric {
  min-height: 7.625rem;
  padding: 0.9375rem;
  display: block
}

.chatbot-admin-metrics .admin-metric>span {
  width: 2.125rem;
  height: 2.125rem;
  margin-bottom: 0.75rem
}

.chatbot-admin-metrics .admin-metric small {
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em
}

.chatbot-admin-metrics .admin-metric strong {
  margin-top: 0.25rem;
  font-size: 1.4375rem;
  line-height: 1
}

.chatbot-admin-metrics .admin-metric p {
  position: relative;
  z-index: 1;
  margin: 0.375rem 0 0;
  color: #8a94a4;
  font-size: 0.4375rem
}

.chatbot-admin-metrics .tone-cyan {
  border-color: rgba(26, 180, 205, .2);
  background: linear-gradient(115deg, rgba(28, 188, 210, .09), rgba(255, 255, 255, .58))
}

.chatbot-admin-metrics .tone-cyan>span {
  background: rgba(28, 188, 210, .13);
  color: #169bb0
}

.chatbot-admin-metrics .tone-purple {
  border-color: rgba(113, 84, 203, .18);
  background: linear-gradient(115deg, rgba(113, 84, 203, .085), rgba(255, 255, 255, .58))
}

.chatbot-admin-metrics .tone-purple>span {
  background: rgba(113, 84, 203, .13);
  color: #6e50bb
}

.chatbot-admin-metrics .tone-pink {
  border-color: rgba(199, 67, 145, .17);
  background: linear-gradient(115deg, rgba(205, 69, 146, .075), rgba(255, 255, 255, .58))
}

.chatbot-admin-metrics .tone-pink>span {
  background: rgba(205, 69, 146, .11);
  color: #bc427f
}

.chatbot-admin-metrics .tone-amber {
  border-color: rgba(226, 157, 42, .22);
  background: linear-gradient(115deg, rgba(236, 170, 56, .08), rgba(255, 255, 255, .58))
}

.chatbot-admin-metrics .tone-amber>span {
  background: rgba(236, 170, 56, .13);
  color: #d28715
}

.chatbot-dashboard-grid.overview-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(19.375rem, .8fr);
  gap: 0.875rem;
  margin-bottom: 0.875rem
}

.chatbot-dashboard-grid .overview-panel {
  min-height: 15.3125rem;
  padding: 1.125rem
}

.chatbot-dashboard-grid .chatbot-panel-head h3 {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem
}

.chatbot-dashboard-grid .chatbot-panel-head small {
  font-size: 0.4375rem
}

.chatbot-dashboard-grid .chatbot-panel-head>a {
  color: #6d50bb;
  font-size: 0.5rem;
  font-weight: 800
}

.chatbot-dashboard-grid .chatbot-bars {
  height: 10.375rem;
  margin-top: 1.1875rem;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, rgba(75, 87, 108, .07) 41px)
}

.chatbot-dashboard-grid .chatbot-recent>a {
  padding: 0.75rem 0
}

.chatbot-shortcuts {
  margin-bottom: 0.3125rem
}

.chatbot-assistant-grid.assistant-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8125rem
}

.chatbot-assistant-grid .assistant-manage-card {
  min-height: 16.875rem;
  padding: 1.125rem
}

.chatbot-assistant-grid .assistant-manage-card>small {
  margin-top: 1.25rem
}

.chatbot-assistant-grid .assistant-manage-card h3 {
  margin: 0.375rem 0 0.5rem;
  font-size: 1.0625rem
}

.chatbot-assistant-grid .assistant-manage-card p {
  height: auto;
  min-height: 2.5rem;
  font-size: 0.5625rem
}

.chatbot-assistant-grid .assistant-meta {
  margin: 1rem 0
}

.chatbot-assistant-grid .assistant-edit-btn {
  height: 2rem;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  border: 0;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(93, 73, 187, .14)
}

.chatbot-assistant-grid .assistant-edit-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05)
}

.chatbot-empty-v2 {
  padding: 3.875rem 1.5625rem;
  border-color: rgba(112, 84, 199, .2);
  background: rgba(255, 255, 255, .54)
}

.chatbot-workspace-content>.chatbot-section-lead,
.chatbot-editor-v2>.chatbot-section-lead {
  margin: 0 0 0.9375rem;
  padding: 0.9375rem 1.0625rem;
  align-items: center;
  border: 1px solid rgba(67, 80, 105, .09);
  border-radius: 0.9375rem;
  background: linear-gradient(105deg, rgba(31, 190, 210, .045), rgba(112, 84, 199, .055))
}

.chatbot-workspace-content>.chatbot-section-lead h2,
.chatbot-editor-v2>.chatbot-section-lead h2 {
  margin: 0.3125rem 0 0.25rem;
  font-size: 1.0625rem;
  letter-spacing: -.03em
}

.chatbot-workspace-content>.chatbot-section-lead p,
.chatbot-editor-v2>.chatbot-section-lead p {
  font-size: 0.625rem
}

.chatbot-workspace-content>.chatbot-section-lead small,
.chatbot-editor-v2>.chatbot-section-lead small {
  font-size: 0.4375rem
}

.chatbot-editor-v2>.chatbot-section-lead>div>a {
  margin: 0 0 0.6875rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(70, 82, 105, .1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, .45);
  font-size: 0.5rem
}

.chatbot-section-lead>select {
  height: 2.125rem;
  min-width: 14.375rem;
  padding: 0 0.6875rem;
  border-color: rgba(65, 78, 102, .12);
  border-radius: 0.5625rem;
  background: rgba(255, 255, 255, .72);
  font-size: 0.5625rem
}

.chatbot-editor-v2 {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(21.875rem, .85fr);
  gap: 0.875rem;
  align-items: start
}

.chatbot-editor-v2>.chatbot-section-lead {
  grid-column: 1/-1
}

.chatbot-editor-v2>form {
  min-width: 0
}

.chatbot-editor-v2>.chatbot-training-panel,
.chatbot-editor-v2>.chatbot-locked-training {
  min-width: 0;
  margin: 0
}

.chatbot-workspace .chatbot-form-panel,
.chatbot-workspace .chatbot-training-panel,
.chatbot-workspace .chatbot-script-card,
.chatbot-workspace .chatbot-preview-card,
.chatbot-workspace .chatbot-settings-list {
  border-color: rgba(67, 80, 105, .1);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 13px 35px rgba(41, 50, 72, .04)
}

.chatbot-workspace .chatbot-form-panel,
.chatbot-workspace .chatbot-training-panel {
  padding: 1.1875rem
}

.chatbot-workspace .chatbot-form-panel>h3 {
  margin-bottom: 1.125rem;
  font-size: 0.875rem
}

.chatbot-workspace .chatbot-fields-v2 {
  gap: 0.75rem
}

.chatbot-workspace .chatbot-fields-v2 label,
.chatbot-workspace .chatbot-form-panel>label,
.chatbot-workspace .chatbot-field-pair label {
  font-size: 0.5625rem;
  color: #596579
}

.chatbot-workspace .chatbot-fields-v2 input,
.chatbot-workspace .chatbot-fields-v2 select,
.chatbot-workspace .chatbot-fields-v2 textarea,
.chatbot-workspace .chatbot-form-panel>label textarea,
.chatbot-workspace .chatbot-field-pair select {
  padding: 0.625rem 0.6875rem;
  border-color: rgba(65, 78, 102, .13);
  border-radius: 0.5625rem;
  background: rgba(248, 248, 246, .82);
  font-size: 0.5625rem
}

.chatbot-workspace .chatbot-form-submit {
  margin-top: 1.0625rem;
  padding-top: 0.9375rem
}

.chatbot-workspace .chatbot-form-submit button,
.chatbot-workspace .chatbot-form-panel>button.primary {
  height: 2.125rem;
  padding: 0 0.8125rem;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  font-size: 0.5rem;
  box-shadow: 0 8px 20px rgba(93, 73, 187, .16)
}

.chatbot-workspace .chatbot-training-actions {
  grid-template-columns: 1fr;
  gap: 0.625rem;
  margin: 1rem 0
}

.chatbot-workspace .chatbot-training-actions label {
  padding: 0.75rem;
  background: rgba(75, 87, 108, .025)
}

.chatbot-workspace .chatbot-training-actions form button {
  height: 1.9375rem;
  padding: 0 0.625rem;
  background: rgba(112, 84, 199, .065);
  font-size: 0.5rem
}

.chatbot-workspace .chatbot-panel-head h3 {
  font-size: 0.875rem
}

.chatbot-workspace .chatbot-panel-head p {
  margin: 0.3125rem 0 0;
  font-size: 0.5rem;
  line-height: 1.5
}

.chatbot-workspace .chatbot-source-row {
  padding: 0.5625rem;
  background: rgba(75, 87, 108, .022)
}

.chatbot-locked-training {
  min-height: 10rem;
  border-color: rgba(112, 84, 199, .18);
  background: rgba(255, 255, 255, .48)
}

.chatbot-integration-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(20.625rem, .82fr);
  gap: 0.875rem
}

.chatbot-integration-grid>section:first-child {
  gap: 0.875rem
}

.chatbot-workspace .chatbot-script-card {
  padding: 1.125rem
}

.chatbot-workspace .chatbot-script-card code {
  background: #202331
}

.chatbot-workspace .chatbot-preview-card {
  top: 4.25rem
}

.chatbot-workspace .chatbot-preview-messages {
  background: rgba(75, 87, 108, .035)
}

.chatbot-settings-list {
  padding: 0.375rem
}

.chatbot-settings-list article {
  min-height: 4.125rem;
  padding: 0.75rem;
  border-color: rgba(67, 80, 105, .085)
}

.chatbot-settings-list article>button {
  background: rgba(112, 84, 199, .055);
  border-color: rgba(112, 84, 199, .13)
}

html[data-theme="dark"] .admin-workspace.chatbot-workspace {
  background: #0d1421;
  color: #eef2f8
}

html[data-theme="dark"] .chatbot-workspace .chatbot-workspace-side {
  background: #0a111d;
  color: #8e9bae;
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .chatbot-workspace-main>.chatbot-workspace-head {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(13, 20, 33, .86)
}

html[data-theme="dark"] .chatbot-page-title p {
  color: #8996a9
}

html[data-theme="dark"] .chatbot-admin-intro,
html[data-theme="dark"] .chatbot-workspace-content>.chatbot-section-lead,
html[data-theme="dark"] .chatbot-editor-v2>.chatbot-section-lead {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .chatbot-admin-metrics .admin-metric,
html[data-theme="dark"] .chatbot-workspace .chatbot-form-panel,
html[data-theme="dark"] .chatbot-workspace .chatbot-training-panel,
html[data-theme="dark"] .chatbot-workspace .chatbot-script-card,
html[data-theme="dark"] .chatbot-workspace .chatbot-preview-card,
html[data-theme="dark"] .chatbot-workspace .chatbot-settings-list,
html[data-theme="dark"] .chatbot-assistant-grid .assistant-manage-card,
html[data-theme="dark"] .chatbot-empty-v2,
html[data-theme="dark"] .chatbot-locked-training {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .035);
  box-shadow: none
}

html[data-theme="dark"] .chatbot-admin-metrics .admin-metric p,
html[data-theme="dark"] .chatbot-page-title p {
  color: #8794a8
}

html[data-theme="dark"] .chatbot-workspace .chatbot-fields-v2 input,
html[data-theme="dark"] .chatbot-workspace .chatbot-fields-v2 select,
html[data-theme="dark"] .chatbot-workspace .chatbot-fields-v2 textarea,
html[data-theme="dark"] .chatbot-workspace .chatbot-form-panel>label textarea,
html[data-theme="dark"] .chatbot-workspace .chatbot-field-pair select,
html[data-theme="dark"] .chatbot-section-lead>select {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  color: #edf1f6
}

html[data-theme="dark"] .chatbot-editor-v2>.chatbot-section-lead>div>a {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: #a5b0c0
}

html[data-theme="dark"] .chatbot-workspace .chatbot-training-actions label,
html[data-theme="dark"] .chatbot-workspace .chatbot-source-row {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .chatbot-dashboard-grid .chatbot-bars {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, rgba(255, 255, 255, .065) 41px)
}

html[data-theme="dark"] .chatbot-workspace .chatbot-preview-messages {
  background: rgba(0, 0, 0, .16)
}

@media(max-width:1200px) {
  .chatbot-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

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

  .chatbot-editor-v2 {
    grid-template-columns: 1fr
  }

  .chatbot-editor-v2>.chatbot-section-lead {
    grid-column: auto
  }

  .chatbot-editor-v2>.chatbot-training-panel,
  .chatbot-editor-v2>.chatbot-locked-training {
    margin: 0
  }
}

@media(max-width:900px) {
  .admin-workspace.chatbot-workspace {
    grid-template-columns: 4.75rem minmax(0, 1fr)
  }

  .chatbot-workspace .chatbot-workspace-side {
    padding: 0.875rem 0.625rem
  }

  .chatbot-workspace-main {
    padding: 0 1.25rem 2.25rem
  }

  .chatbot-workspace-main>.chatbot-workspace-head {
    margin: 0 -1.25rem;
    padding: 0 1.25rem
  }

  .chatbot-workspace-head .admin-theme-toggle {
    right: 1.25rem
  }

  .chatbot-dashboard-grid.overview-grid,
  .chatbot-integration-grid {
    grid-template-columns: 1fr
  }

  .chatbot-workspace .chatbot-preview-card {
    position: static
  }
}

@media(max-width:760px) {
  .admin-workspace.chatbot-workspace {
    display: grid
  }

  .chatbot-workspace .chatbot-workspace-side {
    position: relative;
    width: auto;
    height: 100vh
  }

  .chatbot-workspace .chatbot-workspace-nav {
    display: grid;
    overflow: visible
  }

  .chatbot-workspace .chatbot-workspace-nav button {
    white-space: normal
  }
}

@media(max-width:620px) {
  .chatbot-workspace-main {
    padding: 0 0.75rem 1.875rem
  }

  .chatbot-workspace-main>.chatbot-workspace-head {
    margin: 0 -0.75rem;
    padding: 0 0.75rem
  }

  .chatbot-workspace-head .admin-theme-toggle {
    right: 0.75rem
  }

  .chatbot-page-title {
    padding: 1.1875rem 0 0.875rem
  }

  .chatbot-admin-metrics,
  .chatbot-assistant-grid.assistant-card-grid {
    grid-template-columns: 1fr
  }

  .chatbot-admin-intro,
  .chatbot-workspace-content>.chatbot-section-lead,
  .chatbot-editor-v2>.chatbot-section-lead {
    align-items: flex-start;
    flex-direction: column
  }

  .chatbot-admin-intro>a,
  .chatbot-section-lead>select {
    width: 100%
  }

  .chatbot-workspace .chatbot-fields-v2,
  .chatbot-workspace .chatbot-field-pair {
    grid-template-columns: 1fr
  }

  .chatbot-workspace .chatbot-fields-v2 label.wide {
    grid-column: auto
  }

  .chatbot-shortcuts {
    grid-template-columns: 1fr
  }
}

/* Chatbot assistant editor: identical component language to the admin assistant editor */
.chatbot-assistant-detail {
  min-width: 0
}

.chatbot-assistant-detail .assistant-detail-icon {
  overflow: hidden
}

.chatbot-assistant-detail .assistant-detail-icon img {
  width: 100%;
  height: 100%;
  padding: 0.3125rem;
  display: block;
  object-fit: contain;
  border-radius: inherit
}

.chatbot-assistant-detail .chatbot-logo-preview img {
  width: 100%;
  height: 100%;
  padding: 0.375rem;
  display: block;
  object-fit: contain
}

.chatbot-assistant-detail .assistant-detail-fields textarea.compact-textarea {
  min-height: 5.125rem
}

.chatbot-assistant-detail .assistant-detail-actions #chatbotDetailDelete {
  border: 1px solid rgba(199, 66, 87, .19) !important;
  background: rgba(199, 66, 87, .065) !important;
  color: #b74357 !important;
  box-shadow: none !important
}

.chatbot-assistant-detail .knowledge-add-tabs button:disabled {
  opacity: .45;
  cursor: not-allowed
}

.chatbot-assistant-detail #chatbotFileSourcePanel {
  flex: 0 0 auto
}

.chatbot-assistant-detail .chatbot-knowledge-locked label {
  cursor: default
}

.chatbot-assistant-detail .knowledge-uploader.uploading label {
  pointer-events: none;
  opacity: .7
}

.chatbot-assistant-detail .knowledge-uploader.uploading label>i {
  animation: chatbotUploadPulse 1s ease-in-out infinite
}

.chatbot-assistant-detail .knowledge-source>span:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3125rem
}

.chatbot-assistant-detail .knowledge-source>span:last-child button:first-child:not(:last-child) {
  background: rgba(112, 84, 199, .07);
  color: #7658ca
}

.chatbot-assistant-detail .knowledge-source[hidden] {
  display: none
}

.chatbot-assistant-detail .chatbot-domain-state input:disabled {
  opacity: 1
}

@keyframes chatbotUploadPulse {
  50% {
    transform: translateY(-3px);
    opacity: .55
  }
}

html[data-theme="dark"] .chatbot-assistant-detail .assistant-detail-actions #chatbotDetailDelete {
  border-color: rgba(239, 107, 129, .18) !important;
  background: rgba(211, 65, 91, .08) !important;
  color: #ef8496 !important
}

@media(min-width:1051px) {
  .chatbot-workspace-main.chatbot-editor-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 1.125rem
  }

  .chatbot-workspace-main.chatbot-editor-open .chatbot-workspace-head,
  .chatbot-workspace-main.chatbot-editor-open .chatbot-page-title {
    flex: 0 0 auto
  }

  .chatbot-workspace-main.chatbot-editor-open .chatbot-page-title {
    padding-bottom: 0.9375rem
  }

  .chatbot-workspace-main.chatbot-editor-open .chatbot-workspace-content {
    min-height: 0;
    flex: 1;
    display: flex;
    overflow: hidden;
    padding-bottom: 0
  }

  .chatbot-workspace-main.chatbot-editor-open .chatbot-assistant-detail {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-head,
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-stats {
    flex: 0 0 auto
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-grid {
    min-height: 0;
    flex: 1;
    align-items: stretch;
    overflow: hidden
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-settings-panel,
  .chatbot-workspace-main.chatbot-editor-open .knowledge-panel {
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-settings-panel {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
  }

  .chatbot-workspace-main.chatbot-editor-open .knowledge-panel {
    position: relative;
    padding-bottom: 1.1875rem;
    display: flex;
    flex-direction: column;
    overflow: hidden
  }

  .chatbot-workspace-main.chatbot-editor-open .knowledge-add-tabs,
  .chatbot-workspace-main.chatbot-editor-open #chatbotFileSourcePanel,
  .chatbot-workspace-main.chatbot-editor-open .knowledge-web {
    flex: 0 0 auto
  }

  .chatbot-workspace-main.chatbot-editor-open .knowledge-scroll-region {
    min-height: 0;
    flex: 1;
    margin-top: 0.5625rem;
    padding-right: 0.3125rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
  }

  .chatbot-workspace-main.chatbot-editor-open .knowledge-list {
    max-height: none;
    padding-bottom: 0;
    overflow: visible
  }

  .chatbot-workspace-main.chatbot-editor-open .knowledge-list::after {
    content: "";
    display: block;
    height: 0.5rem;
    grid-column: 1/-1
  }
}

@media(max-width:650px) {
  .chatbot-assistant-detail .assistant-detail-icon {
    width: 2.4375rem;
    height: 2.4375rem
  }

  .chatbot-assistant-detail .assistant-detail-head h2 {
    font-size: 1.0625rem
  }

  .chatbot-assistant-detail .knowledge-tools {
    grid-template-columns: 1fr 1fr
  }

  .chatbot-assistant-detail .knowledge-search {
    grid-column: 1/-1
  }
}

/* Chatbot revision pass: shared logos, compact cards and data chart */
.chatbot-record-logo,
.chatbot-card-logo,
.chatbot-recent-logo,
.chatbot-settings-logo,
.chatbot-preview-logo,
.chatbot-script-logo,
.admin-chatbot-logo,
.chatbot-modal-logo {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--chatbot-color), transparent 70%);
  background: color-mix(in srgb, var(--chatbot-color), transparent 90%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--chatbot-color), transparent 86%)
}

.chatbot-record-logo img,
.chatbot-card-logo img,
.chatbot-recent-logo img,
.chatbot-settings-logo img,
.chatbot-preview-logo img,
.chatbot-script-logo img,
.admin-chatbot-logo img,
.chatbot-modal-logo img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0.3125rem;
  display: block;
  object-fit: contain
}

.chatbot-assistant-grid.assistant-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(14.6875rem, 18.75rem));
  justify-content: start;
  gap: 0.75rem
}

.chatbot-assistant-grid .chatbot-compact-card {
  min-height: 13.375rem;
  padding: 0.875rem 0.9375rem
}

.chatbot-assistant-grid .chatbot-compact-card .assistant-card-top {
  margin-bottom: 0.6875rem
}

.chatbot-assistant-grid .chatbot-compact-card .assistant-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem
}

.chatbot-assistant-grid .chatbot-compact-card>small {
  margin-top: 0;
  font-size: 0.4375rem
}

.chatbot-assistant-grid .chatbot-compact-card h3 {
  margin: 0.3125rem 0 0.3125rem;
  font-size: 0.9375rem
}

.chatbot-assistant-grid .chatbot-compact-card p {
  min-height: 1.75rem;
  margin: 0;
  color: #778296;
  font-size: 0.5rem;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.chatbot-assistant-grid .chatbot-compact-card .assistant-meta {
  margin: 0.6875rem 0 0.625rem;
  gap: 0.3125rem
}

.chatbot-assistant-grid .chatbot-compact-card .assistant-meta span {
  padding: 0.3125rem 0.375rem;
  font-size: 0.4375rem
}

.chatbot-assistant-grid .chatbot-compact-card .assistant-edit-btn {
  height: 1.875rem;
  font-size: 0.5rem
}

.chatbot-traffic-chart {
  height: 10.875rem;
  margin-top: 0.5rem;
  position: relative
}

.chatbot-traffic-chart svg {
  width: 100%;
  height: 9.375rem;
  display: block;
  overflow: visible
}

.chatbot-traffic-chart .chart-grid line {
  stroke: rgba(74, 86, 107, .11);
  stroke-width: 1;
  vector-effect: non-scaling-stroke
}

.chatbot-traffic-chart .chart-area {
  fill: url(#chatbotChartFill)
}

.chatbot-traffic-chart .chart-line {
  fill: none;
  stroke: #7758d8;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 7px rgba(116, 84, 205, .18))
}

.chatbot-traffic-chart circle {
  fill: #fff;
  stroke: #7758d8;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: .18s
}

.chatbot-traffic-chart circle:hover {
  opacity: 1;
  r: 6px
}

.chatbot-traffic-chart .chart-axis {
  height: 1.125rem;
  padding: 0 1px 0 0.1875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8a95a6;
  font-size: 0.4375rem
}

.chatbot-recent-logo {
  width: 2.375rem !important;
  height: 2.375rem !important;
  border-radius: 0.6875rem !important
}

/* Integration controls and preview actions */
.chatbot-integration-refresh>section:first-child {
  display: grid;
  gap: 0.875rem
}

.chatbot-integration-settings>.chatbot-panel-head {
  margin-bottom: 1rem
}

.chatbot-integration-settings>.chatbot-panel-head p {
  margin: 0.25rem 0 0
}

.chatbot-integration-choice {
  margin: 1rem 0 0;
  padding: 0;
  border: 0
}

.chatbot-integration-choice legend {
  margin-bottom: 0.5rem;
  color: #596579;
  font-size: 0.5625rem;
  font-weight: 800
}

.chatbot-integration-choice>div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem
}

.chatbot-integration-choice.position-choice>div {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.chatbot-choice-control {
  min-width: 0;
  cursor: pointer
}

.chatbot-choice-control>input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.chatbot-choice-control>span {
  min-height: 4.375rem;
  padding: 0.6875rem;
  position: relative;
  display: grid;
  grid-template-columns: 1.625rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  align-items: center;
  border: 1px solid rgba(65, 78, 102, .11);
  border-radius: 0.6875rem;
  background: rgba(72, 84, 104, .025);
  transition: .18s
}

.chatbot-choice-control>span>i:first-child {
  grid-row: 1/3;
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .08);
  color: #7457c5;
  font-size: 0.625rem
}

.chatbot-choice-control b {
  align-self: end;
  color: #303b4e;
  font-size: 0.5625rem
}

.chatbot-choice-control small {
  align-self: start;
  margin-top: 2px;
  color: #8a94a4;
  font-size: 0.4375rem;
  line-height: 1.35
}

.chatbot-choice-control em {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.4375rem;
  right: 0.4375rem;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: #7658cf;
  color: #fff;
  font-size: 0.4375rem
}

.chatbot-choice-control input:checked+span {
  border-color: rgba(112, 84, 199, .42);
  background: linear-gradient(135deg, rgba(112, 84, 199, .09), rgba(33, 186, 207, .045));
  box-shadow: 0 7px 18px rgba(80, 63, 143, .07)
}

.chatbot-choice-control input:checked+span em {
  display: grid
}

.chatbot-choice-control:hover>span {
  transform: translateY(-1px);
  border-color: rgba(112, 84, 199, .28)
}

.chatbot-script-refresh>div:first-child p {
  margin: 0.25rem 0 0;
  color: #8994a5;
  font-size: 0.5rem
}

.chatbot-script-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem
}

.chatbot-script-actions button {
  height: 1.9375rem;
  padding: 0 0.625rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(112, 84, 199, .15) !important;
  border-radius: 0.5rem !important;
  background: rgba(112, 84, 199, .06) !important;
  color: #6f52bd !important;
  font-size: 0.5rem !important;
  font-weight: 800 !important;
  box-shadow: none !important
}

.chatbot-script-actions button:first-child {
  border: 0 !important;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2) !important;
  color: #fff !important
}

.chatbot-preview-refresh {
  min-height: 32.5rem;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden
}

.chatbot-preview-refresh .chatbot-preview-head {
  padding: 0.9375rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--chatbot-color), #161225 15%), #322347);
  border-bottom: 1px solid color-mix(in srgb, var(--chatbot-color), transparent 65%)
}

.chatbot-preview-logo {
  width: 2.4375rem;
  height: 2.4375rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, .88)
}

.chatbot-preview-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: #d9cffa;
  font-size: 0.4375rem;
  font-weight: 800
}

.chatbot-preview-live i {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: #42dda1;
  box-shadow: 0 0 0 3px rgba(66, 221, 161, .11)
}

.chatbot-preview-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem
}

.chatbot-preview-suggestions button {
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(112, 84, 199, .2);
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .06);
  color: #6e53b8;
  font-size: 0.4375rem;
  font-weight: 750;
  cursor: pointer
}

/* Settings cards */
.chatbot-settings-refresh {
  padding: 0;
  display: grid;
  gap: 0.625rem;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important
}

.chatbot-settings-refresh .chatbot-settings-card {
  min-height: 4.875rem;
  padding: 0.75rem 0.8125rem;
  display: grid;
  grid-template-columns: 2.875rem minmax(10.625rem, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  border: 1px solid rgba(65, 78, 102, .1);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 10px 28px rgba(42, 51, 72, .035)
}

.chatbot-settings-logo {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.75rem
}

.chatbot-settings-identity {
  min-width: 0
}

.chatbot-settings-identity>b {
  display: block;
  color: #263146;
  font-size: 0.8125rem
}

.chatbot-settings-identity>small {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  color: #8893a4;
  font-size: 0.5rem
}

.chatbot-settings-identity>small span {
  display: flex;
  align-items: center;
  gap: 0.3125rem
}

.chatbot-settings-identity>small i {
  color: #795bd0
}

.chatbot-settings-status {
  display: flex;
  align-items: center;
  gap: 0.75rem
}

.chatbot-settings-status>.chatbot-status {
  white-space: nowrap
}

.chatbot-settings-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem
}

.chatbot-settings-actions a,
.chatbot-settings-actions button {
  height: 1.9375rem;
  padding: 0 0.5625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(112, 84, 199, .13);
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .05);
  color: #6f52bd;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.chatbot-settings-actions .danger {
  border-color: rgba(201, 65, 87, .13);
  background: rgba(201, 65, 87, .05);
  color: #bc4559
}

/* On-page preview and quota dialogs */
.chatbot-preview-modal-back {
  z-index: 130;
  padding: 1.25rem;
  background: rgba(8, 13, 23, .72);
  backdrop-filter: blur(12px)
}

.chatbot-preview-modal {
  width: min(60rem, 96vw);
  height: min(47.5rem, 92vh);
  display: grid;
  grid-template-rows: 3.625rem 1fr;
  overflow: hidden;
  border: 1px solid rgba(130, 105, 217, .25);
  border-radius: 1.25rem;
  background: #111927;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .42);
  animation: modalLift .22s ease
}

.chatbot-preview-modal>header {
  padding: 0 0.875rem 0 1.0625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #edf1f7
}

.chatbot-preview-modal>header>div {
  display: flex;
  align-items: center;
  gap: 0.625rem
}

.chatbot-preview-modal>header span span {
  display: block
}

.chatbot-preview-modal>header b {
  display: block;
  font-size: 0.6875rem
}

.chatbot-preview-modal>header small {
  display: block;
  margin-top: 2px;
  color: #8f9bae;
  font-size: 0.5rem
}

.chatbot-modal-logo {
  width: 2.1875rem;
  height: 2.1875rem;
  border-radius: 0.625rem;
  background: #fff
}

.chatbot-preview-modal>header button {
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0.5625rem;
  background: rgba(255, 255, 255, .04);
  color: #dce2eb;
  cursor: pointer
}

.chatbot-preview-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #0d1421
}

.chatbot-quota-modal {
  width: min(26.875rem, 100%);
  padding: 1.6875rem;
  border-radius: 1.25rem;
  background: #fbfbf9;
  color: #1b2539
}

.chatbot-quota-modal>span {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0 auto 0.8125rem;
  display: grid;
  place-items: center;
  border-radius: 0.875rem;
  background: rgba(112, 84, 199, .1);
  color: #7356c8
}

.chatbot-quota-modal>small,
.chatbot-quota-modal h2,
.chatbot-quota-modal p {
  text-align: center
}

.chatbot-quota-modal>small {
  display: block;
  color: #7356c8;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: .15em
}

.chatbot-quota-modal h2 {
  margin: 0.4375rem 0;
  font-size: 1.3125rem
}

.chatbot-quota-modal p {
  margin: 0 0 1.125rem;
  color: #7d8798;
  font-size: 0.625rem;
  line-height: 1.6
}

.chatbot-quota-modal>label {
  display: grid;
  gap: 0.375rem;
  color: #596579;
  font-size: 0.5625rem;
  font-weight: 800
}

.chatbot-quota-modal input {
  width: 100%;
  height: 2.625rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(65, 78, 102, .14);
  border-radius: 0.625rem;
  background: #f3f3f0;
  color: #253044
}

.chatbot-quota-modal>div {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem
}

.chatbot-quota-modal button {
  height: 2.375rem;
  border: 1px solid rgba(65, 78, 102, .12);
  border-radius: 0.5625rem;
  background: #efefec;
  color: #384357;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 800;
  cursor: pointer
}

.chatbot-quota-modal button[type="submit"] {
  border: 0;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff
}

/* Admin chatbot records */
.admin-chatbot-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.admin-chatbot-panel {
  padding: 0;
  overflow: hidden
}

.admin-chatbot-panel>.users-control-head {
  padding: 1.0625rem 1.125rem;
  border-bottom: 1px solid rgba(65, 78, 102, .08)
}

.admin-chatbot-panel>.users-control-head p {
  margin: 0.3125rem 0 0;
  color: #8792a3;
  font-size: 0.5rem
}

.admin-chatbot-panel>.users-control-head>span {
  padding: 0.3125rem 0.5rem;
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .07);
  color: #7255c2;
  font-size: 0.5rem;
  font-weight: 800
}

.admin-chatbot-records {
  padding: 0.5rem;
  display: grid;
  gap: 0.4375rem
}

.admin-chatbot-record {
  min-width: 0;
  padding: 0.6875rem;
  display: grid;
  grid-template-columns: minmax(13.4375rem, 1.2fr) minmax(10rem, .85fr) minmax(12.5rem, 1fr) minmax(7.8125rem, .65fr) auto minmax(13.125rem, auto);
  gap: 0.8125rem;
  align-items: center;
  border: 1px solid rgba(65, 78, 102, .08);
  border-radius: 0.75rem;
  background: rgba(74, 86, 106, .018);
  transition: .18s
}

.admin-chatbot-record:hover {
  border-color: rgba(112, 84, 199, .2);
  background: rgba(112, 84, 199, .025)
}

.admin-chatbot-primary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem
}

.admin-chatbot-logo {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.75rem
}

.admin-chatbot-primary>div,
.admin-chatbot-owner {
  min-width: 0
}

.admin-chatbot-primary b,
.admin-chatbot-owner b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #293449;
  font-size: 0.625rem
}

.admin-chatbot-primary small,
.admin-chatbot-owner>small,
.admin-chatbot-origins>small,
.admin-chatbot-usage>small {
  display: block;
  margin-bottom: 0.25rem;
  color: #8b96a7;
  font-size: 0.375rem;
  font-weight: 900;
  letter-spacing: .08em
}

.admin-chatbot-primary small {
  margin: 0.25rem 0 0;
  font-size: 0.4375rem;
  font-weight: 600;
  letter-spacing: 0
}

.admin-chatbot-owner span {
  margin-top: 0.1875rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #8b96a7;
  font-size: 0.4375rem
}

.admin-chatbot-origins {
  min-width: 0
}

.admin-chatbot-origins>div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem
}

.admin-chatbot-origins span {
  max-width: 100%;
  padding: 0.25rem 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0.375rem;
  background: rgba(33, 183, 204, .055);
  color: #3c6d78;
  font-size: 0.375rem
}

.admin-chatbot-origins em {
  color: #9aa3b1;
  font-size: 0.4375rem;
  font-style: normal
}

.admin-chatbot-usage>b {
  display: block;
  color: #344055;
  font-size: 0.625rem
}

.admin-chatbot-usage>b span {
  color: #8c96a5;
  font-size: 0.4375rem
}

.admin-chatbot-usage>i {
  height: 0.25rem;
  margin-top: 0.4375rem;
  display: block;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: rgba(112, 84, 199, .09)
}

.admin-chatbot-usage>i em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #21bbce, #7658d1)
}

.admin-chatbot-state {
  display: flex;
  justify-content: center
}

.admin-chatbot-record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.3125rem
}

.admin-chatbot-record-actions button {
  height: 1.875rem;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 1px solid rgba(112, 84, 199, .12);
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .045);
  color: #6f52bd;
  font: inherit;
  font-size: 0.4375rem;
  font-weight: 800;
  cursor: pointer
}

.admin-chatbot-record-actions button:hover {
  border-color: rgba(112, 84, 199, .28);
  transform: translateY(-1px)
}

/* Model editor price alignment */
.model-editor-popover .chatbot-model-price {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(7.8125rem, .7fr) !important;
  gap: 0.75rem !important;
  align-items: end !important
}

.model-editor-popover .chatbot-model-price>label {
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.375rem !important;
  align-content: end !important;
  line-height: 1.35 !important;
  white-space: normal !important
}

.model-editor-popover .chatbot-model-price input,
.model-editor-popover .chatbot-model-price select {
  width: 100% !important;
  height: 2.5rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0.6875rem !important;
  display: block !important;
  border: 1px solid rgba(65, 78, 102, .14) !important;
  border-radius: 0.625rem !important;
  background: #f5f5f2 !important;
  color: #263146 !important;
  box-sizing: border-box !important
}

html[data-theme="dark"] .chatbot-traffic-chart .chart-grid line {
  stroke: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .chatbot-traffic-chart circle {
  fill: #111927
}

html[data-theme="dark"] .chatbot-assistant-grid .chatbot-compact-card p {
  color: #8d99aa
}

html[data-theme="dark"] .chatbot-choice-control>span,
html[data-theme="dark"] .chatbot-settings-refresh .chatbot-settings-card,
html[data-theme="dark"] .admin-chatbot-record {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .chatbot-choice-control b,
html[data-theme="dark"] .chatbot-settings-identity>b,
html[data-theme="dark"] .admin-chatbot-primary b,
html[data-theme="dark"] .admin-chatbot-owner b {
  color: #edf1f7
}

html[data-theme="dark"] .chatbot-choice-control small,
html[data-theme="dark"] .chatbot-settings-identity>small {
  color: #8d99aa
}

html[data-theme="dark"] .chatbot-script-actions button,
html[data-theme="dark"] .chatbot-settings-actions a,
html[data-theme="dark"] .chatbot-settings-actions button,
html[data-theme="dark"] .admin-chatbot-record-actions button {
  border-color: rgba(137, 107, 221, .17);
  background: rgba(121, 88, 210, .07);
  color: #ad91ef
}

html[data-theme="dark"] .chatbot-quota-modal {
  background: #111927;
  color: #edf1f7
}

html[data-theme="dark"] .chatbot-quota-modal p {
  color: #929dad
}

html[data-theme="dark"] .chatbot-quota-modal input {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  color: #edf1f7
}

html[data-theme="dark"] .chatbot-quota-modal button:not([type="submit"]) {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: #dce2eb
}

html[data-theme="dark"] .admin-chatbot-panel>.users-control-head {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .model-editor-popover .chatbot-model-price input,
html[data-theme="dark"] .model-editor-popover .chatbot-model-price select {
  border-color: rgba(255, 255, 255, .1) !important;
  background: #121a28 !important;
  color: #edf1f7 !important
}

@media(max-width:1450px) {
  .admin-chatbot-record {
    grid-template-columns: minmax(13.125rem, 1.15fr) minmax(9.0625rem, .8fr) minmax(10.625rem, .9fr) minmax(7.1875rem, .6fr) auto
  }

  .admin-chatbot-record-actions {
    grid-column: 1/-1;
    justify-content: flex-start;
    padding-left: 3.25rem
  }
}

@media(max-width:1000px) {
  .chatbot-settings-refresh .chatbot-settings-card {
    grid-template-columns: 2.875rem 1fr auto
  }

  .chatbot-settings-actions {
    grid-column: 2/-1;
    justify-content: flex-start
  }

  .admin-chatbot-record {
    grid-template-columns: 1fr 1fr
  }

  .admin-chatbot-record-actions {
    grid-column: 1/-1;
    padding-left: 0
  }

  .admin-chatbot-state {
    justify-content: flex-start
  }
}

@media(max-width:720px) {

  .chatbot-integration-choice>div,
  .chatbot-integration-choice.position-choice>div {
    grid-template-columns: 1fr
  }

  .chatbot-settings-refresh .chatbot-settings-card {
    grid-template-columns: 2.625rem 1fr
  }

  .chatbot-settings-status,
  .chatbot-settings-actions {
    grid-column: 1/-1
  }

  .admin-chatbot-overview {
    grid-template-columns: 1fr
  }

  .admin-chatbot-record {
    grid-template-columns: 1fr
  }

  .admin-chatbot-record-actions {
    flex-wrap: wrap
  }

  .admin-chatbot-primary,
  .admin-chatbot-owner,
  .admin-chatbot-origins,
  .admin-chatbot-usage,
  .admin-chatbot-state {
    grid-column: 1
  }

  .model-editor-popover .chatbot-model-price {
    grid-template-columns: 1fr !important
  }

  .chatbot-preview-modal-back {
    padding: 0.5rem
  }

  .chatbot-preview-modal {
    width: 100%;
    height: 96vh;
    border-radius: 0.9375rem
  }
}

/* Admin chatbot panel follows the active admin theme and uses neutral actions. */
.admin-chatbot-overview article:nth-child(1) {
  --tone: 59, 130, 246
}

.admin-chatbot-overview article:nth-child(2) {
  --tone: 20, 184, 166
}

.admin-chatbot-overview article:nth-child(3) {
  --tone: 245, 158, 11
}

.admin-chatbot-overview .users-overview-icon {
  font-size: 0.8125rem
}

.admin-chatbot-panel {
  --tone: 59, 130, 246;
  color: #263146 !important;
  border-color: rgba(67, 80, 105, .11) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(247, 247, 244, .75)) !important;
  box-shadow: 0 16px 45px rgba(42, 50, 70, .05) !important
}

.admin-chatbot-panel>.users-control-head>span {
  border: 1px solid rgba(67, 80, 105, .1);
  background: rgba(67, 80, 105, .045);
  color: #687487
}

.admin-chatbot-record {
  border-color: rgba(67, 80, 105, .09);
  background: rgba(246, 247, 249, .72)
}

.admin-chatbot-record:hover {
  border-color: rgba(67, 80, 105, .17);
  background: rgba(239, 241, 244, .86)
}

.admin-chatbot-usage>i {
  background: rgba(67, 80, 105, .09)
}

.admin-chatbot-usage>i em {
  background: linear-gradient(90deg, #27b7c8, #4c8bc8)
}

.admin-chatbot-record-actions button {
  border-color: rgba(67, 80, 105, .14) !important;
  background: rgba(67, 80, 105, .045) !important;
  color: #596579 !important;
  box-shadow: none !important
}

.admin-chatbot-record-actions button:hover {
  border-color: rgba(67, 80, 105, .25) !important;
  background: #344054 !important;
  color: #f3f5f7 !important
}

.admin-chatbot-record-actions button:disabled {
  opacity: .5;
  transform: none
}

html[data-theme="dark"] .admin-chatbot-panel {
  color: #e9edf3 !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022)) !important;
  box-shadow: none !important
}

html[data-theme="dark"] .admin-chatbot-panel>.users-control-head>span {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: #b9c1cd
}

html[data-theme="dark"] .admin-chatbot-record {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .024)
}

html[data-theme="dark"] .admin-chatbot-record:hover {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045)
}

html[data-theme="dark"] .admin-chatbot-primary b,
html[data-theme="dark"] .admin-chatbot-owner b,
html[data-theme="dark"] .admin-chatbot-usage>b {
  color: #edf1f6
}

html[data-theme="dark"] .admin-chatbot-primary small,
html[data-theme="dark"] .admin-chatbot-owner>small,
html[data-theme="dark"] .admin-chatbot-owner span,
html[data-theme="dark"] .admin-chatbot-origins>small,
html[data-theme="dark"] .admin-chatbot-usage>small {
  color: #929dad
}

html[data-theme="dark"] .admin-chatbot-record-actions button {
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #c8cfd9 !important
}

html[data-theme="dark"] .admin-chatbot-record-actions button:hover {
  border-color: rgba(255, 255, 255, .19) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important
}

/* Minimal two-panel integration layout */
.chatbot-integration-grid.chatbot-integration-refresh {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  align-items: stretch
}

.chatbot-integration-refresh>.chatbot-integration-settings,
.chatbot-integration-refresh>.chatbot-script-refresh {
  width: 100%;
  min-width: 0;
  min-height: 28.4375rem;
  height: 100%;
  margin: 0;
  box-sizing: border-box
}

.chatbot-integration-settings {
  padding: 1.125rem !important;
  display: flex;
  flex-direction: column
}

.integration-panel-head {
  margin: 0 0 1.125rem !important;
  align-items: flex-start
}

.integration-panel-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem
}

.integration-panel-tools select {
  width: 10.3125rem;
  height: 2rem;
  padding: 0 1.875rem 0 0.625rem;
  border: 1px solid rgba(67, 80, 105, .13);
  border-radius: 0.5rem;
  background: rgba(248, 248, 246, .78);
  color: #3d485b;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 750;
  outline: 0
}

.chatbot-domain-field {
  display: grid;
  gap: 0.4375rem
}

.chatbot-domain-field>label,
.chatbot-minimal-selects label {
  color: #596579;
  font-size: 0.5625rem;
  font-weight: 800
}

.chatbot-domain-entry {
  height: 2.625rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.625rem;
  background: rgba(248, 248, 246, .82);
  transition: .18s
}

.chatbot-domain-entry:focus-within {
  border-color: rgba(51, 112, 146, .38);
  box-shadow: 0 0 0 3px rgba(38, 132, 155, .07)
}

.chatbot-domain-entry>span {
  height: 100%;
  padding: 0 0.625rem;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(65, 78, 102, .09);
  background: rgba(67, 80, 105, .045);
  color: #697589;
  font-size: 0.5625rem;
  font-weight: 800
}

.chatbot-domain-entry input {
  min-width: 0;
  height: 100%;
  padding: 0 0.625rem;
  border: 0 !important;
  background: transparent !important;
  color: #293449;
  font: inherit;
  font-size: 0.5625rem;
  outline: 0;
  box-shadow: none !important
}

.chatbot-domain-entry button {
  height: 1.875rem;
  margin-right: 0.3125rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(44, 116, 137, .18);
  border-radius: 0.5rem;
  background: #344054;
  color: #f2f4f7;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.chatbot-domain-entry button:hover {
  background: #263242
}

.chatbot-domain-entry button:disabled {
  opacity: .6;
  cursor: wait
}

#integrationDomainStatus {
  min-height: 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #8792a3;
  font-size: 0.5rem;
  line-height: 1.4
}

#integrationDomainStatus.saved,
#integrationDomainStatus.checking {
  color: #718096
}

#integrationDomainStatus.verified {
  color: #178b72
}

#integrationDomainStatus.invalid {
  color: #ba4759
}

.chatbot-origin-list {
  min-height: 2.0625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem
}

.chatbot-origin-list>span {
  max-width: 100%;
  height: 1.8125rem;
  padding: 0 0.3125rem 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(24, 157, 128, .15);
  border-radius: 0.5rem;
  background: rgba(24, 157, 128, .055);
  color: #367165;
  font-size: 0.4375rem;
  font-weight: 750
}

.chatbot-origin-list>span>i {
  color: #1aa282
}

.chatbot-origin-list>span button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #768295;
  cursor: pointer
}

.chatbot-origin-list>span button:hover {
  background: rgba(184, 65, 84, .08);
  color: #b84759
}

.chatbot-origin-list>em {
  align-self: center;
  color: #9aa3b0;
  font-size: 0.5rem;
  font-style: normal
}

.chatbot-minimal-selects {
  margin-top: 1.125rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem
}

.chatbot-minimal-selects label {
  display: grid;
  gap: 0.4375rem
}

.chatbot-minimal-selects select {
  width: 100%;
  height: 2.4375rem;
  padding: 0 2.125rem 0 0.6875rem;
  border: 1px solid rgba(65, 78, 102, .13);
  border-radius: 0.5625rem;
  background: rgba(248, 248, 246, .82);
  color: #374255;
  font: inherit;
  font-size: 0.5625rem;
  outline: 0
}

.chatbot-minimal-selects select:focus {
  border-color: rgba(51, 112, 146, .38);
  box-shadow: 0 0 0 3px rgba(38, 132, 155, .07)
}

.integration-save-row {
  margin-top: auto;
  padding-top: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgba(67, 80, 105, .08)
}

.integration-save-row>small {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  color: #8994a4;
  font-size: 0.4375rem
}

.integration-save-row>button {
  height: 2.125rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  border-radius: 0.5625rem;
  background: #344054;
  color: #f4f5f7;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(52, 64, 84, .12)
}

.integration-save-row>button:hover {
  background: #263242;
  transform: translateY(-1px)
}

.chatbot-integration-refresh>.chatbot-script-refresh {
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  border-color: rgba(67, 80, 105, .1);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 13px 35px rgba(41, 50, 72, .04)
}

.chatbot-script-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: 0.75rem
}

.chatbot-script-head>div {
  display: flex;
  align-items: center;
  gap: 0.625rem
}

.chatbot-script-head>div>span {
  display: block
}

.chatbot-script-head h3 {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem
}

.chatbot-script-head p {
  margin: 0.25rem 0 0;
  color: #8792a3;
  font-size: 0.5rem;
  line-height: 1.45
}

.chatbot-script-head small {
  color: #718096 !important;
  font-size: 0.4375rem !important;
  font-weight: 900;
  letter-spacing: .1em
}

.chatbot-script-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6875rem
}

.chatbot-script-state {
  padding: 0.3125rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border: 1px solid rgba(24, 157, 128, .14);
  border-radius: 62.4375rem;
  background: rgba(24, 157, 128, .055);
  color: #25816f;
  font-size: 0.4375rem;
  font-weight: 800;
  white-space: nowrap
}

.chatbot-script-code {
  margin: 1.375rem 0 1rem
}

.chatbot-script-code>small {
  display: block;
  margin-bottom: 0.4375rem;
  color: #7f8998;
  font-size: 0.4375rem;
  font-weight: 900;
  letter-spacing: .08em
}

.chatbot-script-code code {
  min-height: 4.25rem;
  margin: 0 !important;
  padding: 0.8125rem !important;
  display: block;
  overflow: auto;
  border: 1px solid rgba(65, 78, 102, .1);
  border-radius: 0.625rem;
  background: #202631 !important;
  color: #d9e0e8 !important;
  font: 500 0.5rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.chatbot-install-steps {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4375rem;
  list-style: none
}

.chatbot-install-steps li {
  padding: 0.5rem 0.5625rem;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid rgba(67, 80, 105, .075);
  border-radius: 0.5625rem;
  background: rgba(67, 80, 105, .025)
}

.chatbot-install-steps li>i {
  width: 1.6875rem;
  height: 1.6875rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 0.5rem;
  background: rgba(67, 80, 105, .07);
  color: #677386;
  font-size: 0.5625rem
}

.chatbot-install-steps b,
.chatbot-install-steps small {
  display: block
}

.chatbot-install-steps b {
  color: #3a4659;
  font-size: 0.5rem
}

.chatbot-install-steps small {
  margin-top: 2px;
  color: #8a95a5;
  font-size: 0.4375rem
}

.chatbot-script-refresh .chatbot-script-actions {
  margin-top: auto;
  padding-top: 1.0625rem;
  display: flex;
  gap: 0.4375rem;
  border-top: 1px solid rgba(67, 80, 105, .08)
}

.chatbot-script-refresh .chatbot-script-actions button {
  height: 2rem !important;
  padding: 0 0.625rem !important;
  border: 1px solid rgba(67, 80, 105, .14) !important;
  border-radius: 0.5rem !important;
  background: rgba(67, 80, 105, .045) !important;
  color: #596579 !important;
  font-size: 0.5rem !important;
  box-shadow: none !important
}

.chatbot-script-refresh .chatbot-script-actions button:first-child {
  border-color: #344054 !important;
  background: #344054 !important;
  color: #f4f5f7 !important
}

.chatbot-script-refresh .chatbot-script-actions button:hover {
  border-color: rgba(67, 80, 105, .25) !important;
  background: #e8eaed !important;
  color: #344054 !important;
  transform: translateY(-1px)
}

.chatbot-script-refresh .chatbot-script-actions button:first-child:hover {
  background: #263242 !important;
  color: #fff !important
}

/* Model pricing row spacing and theme consistency */
.model-editor-popover .chatbot-model-price {
  margin-top: 1.0625rem !important;
  padding-top: 1.0625rem !important;
  border-top: 1px solid rgba(65, 78, 102, .1) !important
}

.model-editor-popover .chatbot-model-price input,
.model-editor-popover .chatbot-model-price select {
  background: #f0f1ef !important;
  border-color: rgba(65, 78, 102, .13) !important;
  color: #263146 !important
}

html[data-theme="dark"] .model-editor-popover .chatbot-model-price {
  border-top-color: rgba(255, 255, 255, .08) !important
}

html[data-theme="dark"] .model-editor-popover .chatbot-model-price input,
html[data-theme="dark"] .model-editor-popover .chatbot-model-price select {
  background: #202020 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #ededed !important;
  color-scheme: dark
}

html[data-theme="dark"] .integration-panel-tools select,
html[data-theme="dark"] .chatbot-domain-entry,
html[data-theme="dark"] .chatbot-minimal-selects select {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  color: #e4e8ee;
  color-scheme: dark
}

html[data-theme="dark"] .integration-panel-tools select option,
html[data-theme="dark"] .chatbot-minimal-selects select option {
  background: #252525;
  color: #ededed
}

html[data-theme="dark"] .chatbot-domain-entry>span {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .04);
  color: #aeb7c5
}

html[data-theme="dark"] .chatbot-domain-entry input {
  color: #edf1f6
}

html[data-theme="dark"] .chatbot-domain-entry button,
html[data-theme="dark"] .integration-save-row>button {
  background: #e7e9ed;
  color: #2f3948
}

html[data-theme="dark"] .chatbot-domain-entry button:hover,
html[data-theme="dark"] .integration-save-row>button:hover {
  background: #fff;
  color: #202936
}

html[data-theme="dark"] .integration-save-row,
html[data-theme="dark"] .chatbot-script-refresh .chatbot-script-actions {
  border-color: rgba(255, 255, 255, .075)
}

html[data-theme="dark"] .chatbot-integration-refresh>.chatbot-script-refresh {
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .035);
  box-shadow: none
}

html[data-theme="dark"] .chatbot-script-head h3,
html[data-theme="dark"] .chatbot-install-steps b {
  color: #edf1f6
}

html[data-theme="dark"] .chatbot-script-head p,
html[data-theme="dark"] .chatbot-install-steps small {
  color: #929dad
}

html[data-theme="dark"] .chatbot-install-steps li {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .chatbot-install-steps li>i {
  background: rgba(255, 255, 255, .055);
  color: #bdc5d0
}

html[data-theme="dark"] .chatbot-script-refresh .chatbot-script-actions button {
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #c8cfd9 !important
}

html[data-theme="dark"] .chatbot-script-refresh .chatbot-script-actions button:first-child {
  border-color: #e7e9ed !important;
  background: #e7e9ed !important;
  color: #2f3948 !important
}

html[data-theme="dark"] .chatbot-script-refresh .chatbot-script-actions button:hover {
  border-color: rgba(255, 255, 255, .2) !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important
}

@media(max-width:900px) {
  .chatbot-integration-grid.chatbot-integration-refresh {
    grid-template-columns: 1fr
  }

  .chatbot-integration-refresh>.chatbot-integration-settings,
  .chatbot-integration-refresh>.chatbot-script-refresh {
    min-height: auto
  }

  .chatbot-integration-settings {
    min-height: 28.125rem !important
  }
}

@media(max-width:620px) {
  .integration-panel-head {
    gap: 0.75rem;
    flex-direction: column
  }

  .integration-panel-tools {
    width: 100%;
    justify-content: space-between
  }

  .integration-panel-tools select {
    flex: 1
  }

  .chatbot-minimal-selects {
    grid-template-columns: 1fr
  }

  .integration-save-row {
    align-items: flex-start;
    flex-direction: column
  }

  .integration-save-row>button {
    width: 100%;
    justify-content: center
  }

  .chatbot-script-refresh .chatbot-script-actions {
    flex-direction: column
  }

  .chatbot-script-refresh .chatbot-script-actions button {
    width: 100%;
    justify-content: center
  }
}

/* Single-domain state, colorful steps and restored brand actions */
.chatbot-domain-entry.verified {
  border-color: rgba(20, 168, 125, .32);
  box-shadow: 0 0 0 3px rgba(20, 168, 125, .06)
}

.chatbot-domain-entry.verified>span {
  color: #16876d
}

.chatbot-domain-entry.verified input {
  color: #226c5e;
  font-weight: 750
}

.chatbot-domain-entry button,
.integration-save-row>button,
.chatbot-script-refresh .chatbot-script-actions button {
  border: 0 !important;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(91, 74, 188, .16) !important
}

.chatbot-domain-entry button:hover,
.integration-save-row>button:hover,
.chatbot-script-refresh .chatbot-script-actions button:hover {
  border: 0 !important;
  background: linear-gradient(105deg, #18b4c7, #684fda 58%, #9825c3) !important;
  color: #fff !important;
  filter: brightness(1.04);
  transform: translateY(-1px)
}

.chatbot-domain-entry.verified button {
  background: linear-gradient(105deg, #18b89d, #29aeb6) !important;
  box-shadow: 0 7px 18px rgba(25, 151, 132, .14) !important
}

.chatbot-script-state {
  height: 1.5rem;
  padding: 0 0.5625rem;
  border: 1px solid rgba(67, 80, 105, .12);
  border-radius: 0.375rem;
  background: rgba(67, 80, 105, .045);
  color: #697588;
  font-size: 0.4375rem;
  font-weight: 850;
  letter-spacing: .02em
}

.chatbot-install-steps li {
  position: relative;
  overflow: hidden
}

.chatbot-install-steps li:before {
  content: "";
  width: 0.1875rem;
  position: absolute;
  inset: 0 auto 0 0;
  background: rgb(var(--step-tone))
}

.chatbot-install-steps li:nth-child(1) {
  --step-tone: 34, 184, 240;
  border-color: rgba(var(--step-tone), .18);
  background: linear-gradient(105deg, rgba(var(--step-tone), .075), rgba(var(--step-tone), .02))
}

.chatbot-install-steps li:nth-child(2) {
  --step-tone: 20, 184, 166;
  border-color: rgba(var(--step-tone), .18);
  background: linear-gradient(105deg, rgba(var(--step-tone), .075), rgba(var(--step-tone), .02))
}

.chatbot-install-steps li:nth-child(3) {
  --step-tone: 245, 158, 11;
  border-color: rgba(var(--step-tone), .2);
  background: linear-gradient(105deg, rgba(var(--step-tone), .08), rgba(var(--step-tone), .02))
}

.chatbot-install-steps li>i {
  border: 1px solid rgba(var(--step-tone), .2);
  background: rgba(var(--step-tone), .11);
  color: rgb(var(--step-tone))
}

html[data-theme="dark"] .chatbot-domain-entry.verified input {
  color: #82d8c5
}

html[data-theme="dark"] .chatbot-script-state {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  color: #c1c8d2
}

html[data-theme="dark"] .chatbot-domain-entry button,
html[data-theme="dark"] .integration-save-row>button,
html[data-theme="dark"] .chatbot-script-refresh .chatbot-script-actions button {
  border: 0 !important;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(72, 52, 150, .24) !important
}

html[data-theme="dark"] .chatbot-install-steps li:nth-child(1),
html[data-theme="dark"] .chatbot-install-steps li:nth-child(2),
html[data-theme="dark"] .chatbot-install-steps li:nth-child(3) {
  border-color: rgba(var(--step-tone), .2);
  background: linear-gradient(105deg, rgba(var(--step-tone), .11), rgba(var(--step-tone), .025))
}

html[data-theme="dark"] .chatbot-install-steps li>i {
  background: rgba(var(--step-tone), .14);
  color: rgb(var(--step-tone))
}

/* Integration script card: contained header and full-width copyable code block */
.chatbot-integration-refresh>.chatbot-script-refresh {
  overflow: hidden
}

.chatbot-script-card>.chatbot-script-head {
  width: 100%;
  min-width: 0
}

.chatbot-script-card>.chatbot-script-head>div:first-child {
  min-width: 0;
  flex: 1
}

.chatbot-script-card>.chatbot-script-head>div:first-child>span {
  min-width: 0
}

.chatbot-script-card>.chatbot-script-head h3,
.chatbot-script-card>.chatbot-script-head p {
  max-width: 100%;
  overflow-wrap: anywhere
}

.chatbot-script-card>.chatbot-script-head>.chatbot-script-state {
  width: auto !important;
  min-width: 3.625rem;
  max-width: 5.125rem;
  height: 1.5rem !important;
  padding: 0 0.5rem !important;
  display: inline-flex !important;
  place-items: initial !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  gap: 0.3125rem;
  overflow: hidden;
  border: 1px solid rgba(67, 80, 105, .12) !important;
  border-radius: 0.375rem !important;
  background: rgba(67, 80, 105, .045) !important;
  color: #697588 !important;
  white-space: nowrap;
  text-overflow: ellipsis
}

.chatbot-script-card>.chatbot-script-code {
  width: 100%;
  min-width: 0;
  margin: 1.25rem 0 1rem !important;
  display: block !important
}

.chatbot-script-code-head {
  width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem
}

.chatbot-script-code-head>small {
  min-width: 0;
  color: #7f8998 !important;
  font-size: 0.4375rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important
}

.chatbot-script-code-head>button {
  height: 1.75rem;
  padding: 0 0.625rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: none;
  border: 0 !important;
  border-radius: 0.4375rem !important;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2) !important;
  color: #fff !important;
  font-size: 0.4375rem !important;
  font-weight: 850 !important;
  box-shadow: 0 6px 15px rgba(91, 74, 188, .16) !important;
  cursor: pointer
}

.chatbot-script-code-head>button:hover {
  background: linear-gradient(105deg, #18b4c7, #684fda 58%, #9825c3) !important;
  filter: brightness(1.04);
  transform: translateY(-1px)
}

.chatbot-script-code-head>button:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
  transform: none
}

.chatbot-script-card>.chatbot-script-code>code {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 4.875rem;
  box-sizing: border-box;
  border-color: rgba(67, 80, 105, .11) !important;
  background: linear-gradient(135deg, rgba(244, 246, 248, .96), rgba(238, 241, 244, .82)) !important;
  color: #3b4658 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word
}

html[data-theme="dark"] .chatbot-script-card>.chatbot-script-head>.chatbot-script-state {
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #c1c8d2 !important
}

html[data-theme="dark"] .chatbot-script-card>.chatbot-script-code>code {
  border-color: rgba(255, 255, 255, .08) !important;
  background: linear-gradient(135deg, rgba(13, 18, 28, .88), rgba(20, 25, 36, .72)) !important;
  color: #d8e0ea !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025)
}

@media(max-width:620px) {
  .chatbot-script-card>.chatbot-script-head {
    align-items: flex-start !important
  }

  .chatbot-script-code-head {
    align-items: flex-start;
    flex-direction: column
  }

  .chatbot-script-code-head>button {
    width: 100%
  }
}

/* Masaüstü tam ekran yüksekliği; büyütme rem ölçülerinden gelir. */
@media(min-width:761px) {
  html {
    --scaled-screen-height: 100vh;
    --scaled-screen-height: 100dvh;
  }

  html.auth-page,
  html.auth-page body,
  html.auth-page #app {
    height: var(--scaled-screen-height);
    min-height: 0;
    overflow: hidden
  }

  html.auth-page .account-gate {
    height: var(--scaled-screen-height);
    min-height: 0
  }

  html.auth-page .account-shell {
    height: 100%;
    min-height: 0
  }

  html:has(.workspace-layout),
  html:has(.admin-workspace),
  body:has(.workspace-layout),
  body:has(.admin-workspace) {
    height: var(--scaled-screen-height);
    min-height: 0;
    overflow: hidden
  }

  body:has(.workspace-layout) #app,
  body:has(.admin-workspace) #app {
    height: var(--scaled-screen-height);
    min-height: 0;
    overflow: hidden
  }

  .workspace-layout,
  .admin-layout.admin-workspace,
  .admin-workspace.chatbot-workspace {
    height: var(--scaled-screen-height) !important;
    min-height: 0 !important;
    max-height: var(--scaled-screen-height) !important;
    overflow: hidden
  }

  .workspace-sidebar,
  .admin-sidebar,
  .chatbot-workspace .chatbot-workspace-side {
    height: var(--scaled-screen-height) !important;
    min-height: 0;
    max-height: var(--scaled-screen-height) !important
  }

  .workspace-main,
  .admin-content,
  .chatbot-workspace-main {
    height: var(--scaled-screen-height) !important;
    min-height: 0;
    max-height: var(--scaled-screen-height) !important
  }

  .admin-sidebar-bottom,
  .workspace-userbox {
    flex: 0 0 auto
  }

  .admin-sidebar-bottom .admin-profile .avatar {
    display: grid !important;
    flex: 0 0 auto
  }
}

@media(min-width:761px) and (max-width:900px) {
  .workspace-userline {
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem
  }

  .workspace-userline .workspace-avatar {
    display: grid !important;
    flex: 0 0 auto
  }

  .admin-sidebar .admin-profile {
    justify-content: center;
    padding: 0.375rem
  }

  .admin-sidebar .admin-profile>div {
    display: none
  }
}

/* Assistant editors: balanced full-screen forms without a settings-panel scrollbar. */
@media(min-width:1051px) {

  .chatbot-workspace-main.chatbot-editor-open,
  .admin-content.assistant-editor-open {
    padding-bottom: 0.75rem
  }

  .chatbot-workspace-main.chatbot-editor-open>.chatbot-workspace-head,
  .admin-content.assistant-editor-open>.admin-head {
    height: 2.6875rem
  }

  .chatbot-workspace-main.chatbot-editor-open>.chatbot-page-title,
  .admin-content.assistant-editor-open>.admin-page-title {
    padding: 0.5rem 0 0.5625rem
  }

  .chatbot-workspace-main.chatbot-editor-open>.chatbot-page-title p,
  .admin-content.assistant-editor-open>.admin-page-title p {
    display: none
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-head,
  .admin-content.assistant-editor-open .assistant-detail-head {
    gap: 0.5625rem;
    margin-bottom: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-head>button,
  .admin-content.assistant-editor-open .assistant-detail-head>button {
    width: 1.9375rem;
    height: 1.9375rem;
    border-radius: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-icon,
  .admin-content.assistant-editor-open .assistant-detail-icon {
    width: 2.3125rem;
    height: 2.3125rem;
    border-radius: 0.625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-head h2,
  .admin-content.assistant-editor-open .assistant-detail-head h2 {
    font-size: 1rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-head p,
  .admin-content.assistant-editor-open .assistant-detail-head p {
    display: none
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-stats,
  .admin-content.assistant-editor-open .assistant-detail-stats {
    gap: 0.5rem;
    margin-bottom: 0.5625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-stats article,
  .admin-content.assistant-editor-open .assistant-detail-stats article {
    min-height: 3.375rem;
    padding: 0.5rem 0.6875rem;
    gap: 0.5625rem;
    border-radius: 0.6875rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-stats article>i,
  .admin-content.assistant-editor-open .assistant-detail-stats article>i {
    width: 1.9375rem;
    height: 1.9375rem;
    border-radius: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-stats small,
  .admin-content.assistant-editor-open .assistant-detail-stats small {
    font-size: 0.46875rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-stats b,
  .admin-content.assistant-editor-open .assistant-detail-stats b {
    margin-top: 2px;
    font-size: 1rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-grid,
  .admin-content.assistant-editor-open .assistant-detail-grid {
    gap: 0.625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-settings-panel,
  .admin-content.assistant-editor-open .assistant-settings-panel {
    padding: 0.8125rem !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    scrollbar-gutter: auto
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-settings-panel .detail-panel-head,
  .admin-content.assistant-editor-open .assistant-settings-panel .detail-panel-head {
    min-height: 1.9375rem;
    margin-bottom: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-settings-panel .detail-panel-head h3,
  .admin-content.assistant-editor-open .assistant-settings-panel .detail-panel-head h3 {
    margin-top: 0.25rem;
    font-size: 0.75rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-settings-panel .detail-panel-head>span,
  .admin-content.assistant-editor-open .assistant-settings-panel .detail-panel-head>span {
    width: 1.9375rem;
    height: 1.9375rem;
    border-radius: 0.5625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields,
  .admin-content.assistant-editor-open .assistant-detail-fields {
    gap: 0.4375rem 0.625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields label,
  .admin-content.assistant-editor-open .assistant-detail-fields label {
    font-size: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields input,
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields select,
  .admin-content.assistant-editor-open .assistant-detail-fields input,
  .admin-content.assistant-editor-open .assistant-detail-fields select {
    height: 2.0625rem;
    margin-top: 0.1875rem;
    padding: 0 0.625rem;
    font-size: 0.59375rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields textarea {
    height: 4.5rem;
    min-height: 4.5rem !important;
    margin-top: 0.1875rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.59375rem;
    line-height: 1.4;
    resize: none
  }

  .admin-content.assistant-editor-open .assistant-detail-fields textarea {
    height: 6.5rem;
    min-height: 6.5rem !important;
    margin-top: 0.1875rem;
    padding: 0.5625rem 0.625rem;
    font-size: 0.59375rem;
    line-height: 1.45;
    resize: none
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields label:has(#chatbotInstructions),
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields label:has(#chatbotWelcome) {
    grid-column: span 1
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-field>span,
  .admin-content.assistant-editor-open .assistant-icon-field>span {
    font-size: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-control,
  .admin-content.assistant-editor-open .assistant-icon-control {
    height: 3.125rem;
    min-height: 3.125rem;
    margin-top: 0.1875rem;
    padding: 0.3125rem 0.5rem;
    gap: 0.5625rem;
    border-radius: 0.5625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-preview,
  .admin-content.assistant-editor-open .assistant-icon-preview {
    width: 2.4375rem;
    height: 2.4375rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-control>div,
  .admin-content.assistant-editor-open .assistant-icon-control>div {
    gap: 0.3125rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-control label,
  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-control button,
  .admin-content.assistant-editor-open .assistant-icon-control label,
  .admin-content.assistant-editor-open .assistant-icon-control button {
    height: 1.6875rem;
    padding: 0 0.5rem;
    font-size: 0.40625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-icon-control>div>small,
  .admin-content.assistant-editor-open .assistant-icon-control>div>small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.375rem
  }

  .chatbot-workspace-main.chatbot-editor-open .detail-colors,
  .admin-content.assistant-editor-open .detail-colors {
    margin-top: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .detail-colors legend,
  .admin-content.assistant-editor-open .detail-colors legend {
    margin-bottom: 0.3125rem;
    font-size: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .detail-colors>div,
  .admin-content.assistant-editor-open .detail-colors>div {
    gap: 0.4375rem
  }

  .chatbot-workspace-main.chatbot-editor-open .detail-colors label,
  .chatbot-workspace-main.chatbot-editor-open .detail-colors label span,
  .admin-content.assistant-editor-open .detail-colors label,
  .admin-content.assistant-editor-open .detail-colors label span {
    width: 1.5625rem;
    height: 1.5625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-toggles,
  .admin-content.assistant-editor-open .assistant-detail-toggles {
    gap: 0.4375rem;
    margin-top: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-toggles label,
  .admin-content.assistant-editor-open .assistant-detail-toggles label {
    min-height: 2.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-toggles b,
  .admin-content.assistant-editor-open .assistant-detail-toggles b {
    font-size: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-toggles small,
  .admin-content.assistant-editor-open .assistant-detail-toggles small {
    font-size: 0.40625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-actions,
  .admin-content.assistant-editor-open .assistant-detail-actions {
    gap: 0.4375rem;
    margin-top: 0.5rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-actions button,
  .admin-content.assistant-editor-open .assistant-detail-actions button {
    height: 2rem;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.46875rem
  }

  /* Let the form consume the full panel height instead of leaving a dead area below. */
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields,
  .admin-content.assistant-editor-open .assistant-detail-fields {
    min-height: 0;
    flex: 1;
    align-content: stretch
  }

  .admin-content.assistant-editor-open .assistant-detail-fields {
    grid-template-rows: auto auto auto minmax(6.5rem, 1fr)
  }

  .user-assistant-workspace .admin-content.assistant-editor-open .assistant-detail-fields {
    grid-template-rows: auto auto minmax(4rem, .65fr) minmax(6.5rem, 1fr)
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields {
    grid-template-rows: auto auto auto minmax(4.5rem, 1fr) auto
  }

  .admin-content.assistant-editor-open .assistant-detail-fields label:has(#detailPrompt),
  .admin-content.assistant-editor-open .assistant-detail-fields label:has(#myAssistantPrompt),
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields label:has(#chatbotInstructions),
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields label:has(#chatbotWelcome) {
    min-height: 0;
    display: flex;
    flex-direction: column
  }

  .admin-content.assistant-editor-open #detailPrompt,
  .admin-content.assistant-editor-open #myAssistantPrompt,
  .chatbot-workspace-main.chatbot-editor-open #chatbotInstructions,
  .chatbot-workspace-main.chatbot-editor-open #chatbotWelcome {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1
  }

  .chatbot-workspace-main.chatbot-editor-open .detail-colors,
  .admin-content.assistant-editor-open .detail-colors,
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-toggles,
  .admin-content.assistant-editor-open .assistant-detail-toggles,
  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-actions,
  .admin-content.assistant-editor-open .assistant-detail-actions {
    flex: 0 0 auto
  }
}

/* Preview shell follows the dashboard theme; the iframe keeps the selected widget theme. */
.chatbot-preview-modal-back {
  background: rgba(32, 40, 54, .32)
}

.chatbot-preview-modal {
  border-color: rgba(67, 80, 105, .14);
  background: #f7f7f4;
  box-shadow: 0 34px 100px rgba(31, 39, 55, .24)
}

.chatbot-preview-modal>header {
  border-bottom-color: rgba(67, 80, 105, .1);
  background: rgba(255, 255, 255, .82);
  color: #263146
}

.chatbot-preview-modal>header small {
  color: #7f8a9b
}

.chatbot-preview-modal>header button {
  border-color: rgba(67, 80, 105, .12);
  background: rgba(67, 80, 105, .045);
  color: #657184
}

.chatbot-preview-modal iframe {
  background: #f1f2f4
}

html[data-theme="dark"] .chatbot-preview-modal-back {
  background: rgba(8, 13, 23, .72)
}

html[data-theme="dark"] .chatbot-preview-modal {
  border-color: rgba(255, 255, 255, .1);
  background: #111927;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .42)
}

html[data-theme="dark"] .chatbot-preview-modal>header {
  border-bottom-color: rgba(255, 255, 255, .08);
  background: #111927;
  color: #edf1f7
}

html[data-theme="dark"] .chatbot-preview-modal>header small {
  color: #8f9bae
}

html[data-theme="dark"] .chatbot-preview-modal>header button {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  color: #dce2eb
}

html[data-theme="dark"] .chatbot-preview-modal iframe {
  background: #0d1421
}

/* August 2026 editor, dashboard and account layout refinements. */
@media(min-width:901px) {
  .admin-content #adminBody>.admin-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5625rem
  }

  .admin-content #adminBody>.admin-metrics .admin-metric {
    min-width: 0;
    min-height: 7.625rem;
    padding: 0.875rem
  }

  .admin-content #adminBody>.admin-metrics .admin-metric>span {
    width: 1.9375rem;
    height: 1.9375rem;
    margin-bottom: 0.6875rem
  }

  .admin-content #adminBody>.admin-metrics .admin-metric strong {
    font-size: 1.375rem
  }
}

/* Logos remain on the current surface instead of carrying a white tile into dark mode. */
.chatbot-recent-logo,
.chatbot-settings-logo,
.chatbot-card-logo,
.chatbot-script-logo,
.chatbot-modal-logo,
.admin-chatbot-logo {
  background: color-mix(in srgb, var(--chatbot-color) 10%, #f5f6f7) !important;
  box-shadow: 0 7px 17px color-mix(in srgb, var(--chatbot-color) 13%, transparent) !important;
}

html[data-theme="dark"] .chatbot-recent-logo,
html[data-theme="dark"] .chatbot-settings-logo,
html[data-theme="dark"] .chatbot-card-logo,
html[data-theme="dark"] .chatbot-script-logo,
html[data-theme="dark"] .chatbot-modal-logo,
html[data-theme="dark"] .admin-chatbot-logo {
  border-color: color-mix(in srgb, var(--chatbot-color) 34%, rgba(255, 255, 255, .08)) !important;
  background: color-mix(in srgb, var(--chatbot-color) 12%, #242424) !important;
  box-shadow: none !important;
}

/* Uploaded chatbot artwork fills every circular logo surface without a tile or frame. */
.chatbot-record-logo,
.chatbot-card-logo,
.chatbot-recent-logo,
.chatbot-settings-logo,
.chatbot-preview-logo,
.chatbot-script-logo,
.admin-chatbot-logo,
.chatbot-modal-logo,
.chatbot-assistant-detail .assistant-detail-icon,
.chatbot-assistant-detail .chatbot-logo-preview {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important
}

.chatbot-record-logo img,
.chatbot-card-logo img,
.chatbot-recent-logo img,
.chatbot-settings-logo img,
.chatbot-preview-logo img,
.chatbot-script-logo img,
.admin-chatbot-logo img,
.chatbot-modal-logo img,
.chatbot-assistant-detail .assistant-detail-icon img,
.chatbot-assistant-detail .chatbot-logo-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important
}

.has-custom-logo img,
.chatbot-assistant-detail .assistant-detail-icon img[src*="/api/chatbots/"],
.chatbot-assistant-detail .chatbot-logo-preview img[src*="/api/chatbots/"] {
  transform: scale(1.4)
}

.assistant-icon-preview>.assistant-brand-avatar {
  width: 100% !important;
  height: 100% !important;
  padding: 0.3125rem !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important
}

.assistant-icon-preview>.assistant-brand-avatar img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  filter: none !important
}

.assistant-detail-icon>.assistant-brand-avatar {
  width: 100% !important;
  height: 100% !important;
  padding: 0.25rem !important;
  border-radius: inherit !important
}

.assistant-detail-icon>.assistant-brand-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important
}

html[data-theme="dark"] .assistant-icon-preview {
  border-color: rgba(255, 255, 255, .1) !important;
  background: #242424 !important
}

/* Secondary chatbot controls use neutral surface colors; destructive actions stay red. */
.chatbot-settings-actions a,
.chatbot-settings-actions button {
  border-color: rgba(67, 80, 105, .14) !important;
  background: rgba(67, 80, 105, .045) !important;
  color: #596579 !important;
  box-shadow: none !important
}

.chatbot-settings-actions a:hover,
.chatbot-settings-actions button:hover {
  border-color: rgba(67, 80, 105, .24) !important;
  background: #344054 !important;
  color: #f4f6f8 !important
}

.chatbot-settings-actions .danger {
  border-color: rgba(194, 67, 87, .16) !important;
  background: rgba(194, 67, 87, .055) !important;
  color: #b94659 !important
}

.chatbot-switch input:checked+i {
  background: #159f91 !important
}

.assistant-settings-panel .detail-panel-head small {
  color: #718096 !important
}

.assistant-settings-panel .detail-panel-head>span {
  background: rgba(67, 80, 105, .065) !important;
  color: #697588 !important
}

html[data-theme="dark"] .chatbot-settings-actions a,
html[data-theme="dark"] .chatbot-settings-actions button {
  border-color: rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: #c7ced8 !important
}

html[data-theme="dark"] .chatbot-settings-actions a:hover,
html[data-theme="dark"] .chatbot-settings-actions button:hover {
  background: rgba(255, 255, 255, .11) !important;
  color: #fff !important
}

html[data-theme="dark"] .chatbot-settings-actions .danger {
  border-color: rgba(230, 92, 112, .18) !important;
  background: rgba(211, 70, 91, .075) !important;
  color: #ec8797 !important
}

html[data-theme="dark"] .assistant-settings-panel .detail-panel-head small {
  color: #99a4b3 !important
}

html[data-theme="dark"] .assistant-settings-panel .detail-panel-head>span {
  background: rgba(255, 255, 255, .055) !important;
  color: #bdc5d0 !important
}

/* Upload queue shares the assistant knowledge-base progress treatment. */
#chatbotUploadQueue {
  margin: 0.5rem 0 0.625rem;
  flex: 0 0 auto
}

#chatbotUploadQueue .knowledge-upload-item {
  background: linear-gradient(105deg, rgba(31, 190, 209, .055), rgba(112, 84, 199, .045))
}

#chatbotUploadQueue .knowledge-upload-item>span {
  background: rgba(20, 184, 166, .11);
  color: #0f9d87
}

#chatbotUploadQueue .knowledge-upload-item strong {
  color: #138f7c
}

#chatbotUploadQueue .knowledge-upload-item div>div i {
  background: linear-gradient(90deg, #20bfd1, #18b79f 48%, #7658ca)
}

.knowledge-search:focus-within {
  border-color: rgba(41, 125, 150, .35);
  box-shadow: 0 0 0 3px rgba(36, 143, 164, .07)
}

@media(min-width:1051px) {

  /* Description is the primary writing area; technical prompt fields remain compact. */
  .admin-content.assistant-editor-open .assistant-detail-fields {
    grid-template-rows: auto auto minmax(7rem, 1fr) auto !important
  }

  .admin-content.assistant-editor-open .assistant-detail-fields label:has(#detailDescription),
  .admin-content.assistant-editor-open .assistant-detail-fields label:has(#myAssistantDescription) {
    min-height: 0;
    display: flex;
    flex-direction: column
  }

  .admin-content.assistant-editor-open #detailDescription,
  .admin-content.assistant-editor-open #myAssistantDescription {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1;
    resize: none
  }

  .admin-content.assistant-editor-open #detailPrompt,
  .admin-content.assistant-editor-open #myAssistantPrompt {
    height: 3.625rem !important;
    min-height: 3.625rem !important;
    flex: 0 0 3.625rem
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields {
    grid-template-rows: auto auto minmax(5.75rem, 1fr) auto auto !important
  }

  .chatbot-workspace-main.chatbot-editor-open .assistant-detail-fields label:has(#chatbotDescription) {
    min-height: 0;
    display: flex;
    flex-direction: column
  }

  .chatbot-workspace-main.chatbot-editor-open #chatbotDescription {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1;
    resize: none
  }

  .chatbot-workspace-main.chatbot-editor-open #chatbotInstructions,
  .chatbot-workspace-main.chatbot-editor-open #chatbotWelcome {
    height: 3.625rem !important;
    min-height: 3.625rem !important;
    flex: 0 0 3.625rem
  }
}

/* Account cards are deliberately narrower and quieter than the dashboard. */
@media(min-width:761px) {
  .settings-page-content {
    width: min(44.375rem, calc(100% - 2.25rem));
    padding-top: 1.875rem;
    padding-bottom: 2.75rem
  }

  .account-settings-title {
    margin-bottom: 1.0625rem
  }

  .account-settings-title h1 {
    margin: 0.3125rem 0 0.375rem;
    font-size: 1.6875rem
  }

  .account-settings-title p {
    font-size: 0.5625rem
  }

  .account-settings-stack {
    gap: 0.625rem
  }

  .account-setting-card {
    padding: 0.9375rem 1.0625rem;
    border-radius: 0.875rem
  }

  .setting-card-head {
    gap: 0.5625rem;
    margin-bottom: 0.8125rem
  }

  .setting-card-head>span {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5625rem
  }

  .setting-card-head h3 {
    font-size: 0.6875rem
  }

  .setting-card-head small {
    font-size: 0.375rem
  }

  .setting-fields {
    gap: 0.5625rem
  }

  .setting-fields label,
  .profile-personalization>label,
  .avatar-change-control>span {
    font-size: 0.46875rem
  }

  .setting-fields input,
  .account-field select,
  .profile-personalization select {
    height: 2.1875rem;
    margin-top: 0.3125rem;
    font-size: 0.5625rem
  }

  .setting-primary,
  .setting-secondary {
    height: 2rem;
    margin-top: 0.75rem;
    font-size: 0.46875rem
  }

  .security-row {
    padding: 0.5rem 0
  }

  .security-row b {
    font-size: 0.5rem
  }

  .security-row small {
    font-size: 0.40625rem
  }

  .profile-personalization {
    gap: 0.5625rem;
    margin-top: 0.6875rem;
    padding-top: 0.75rem
  }

  .avatar-change-control>div {
    height: 2.1875rem;
    margin-top: 0.3125rem
  }

  .avatar-picker {
    margin-top: 0.8125rem;
    padding-top: 0.75rem
  }
}

/* Subscription views use exactly one desktop viewport, including a compact footer. */
@media(min-width:761px) {

  html:has(.subscription-page-content),
  body:has(.subscription-page-content) {
    height: var(--scaled-screen-height, 80dvh);
    min-height: 0;
    overflow: hidden
  }

  body:has(.subscription-page-content) #app,
  .account-settings-page:has(.subscription-page-content) {
    height: var(--scaled-screen-height, 80dvh);
    min-height: 0;
    overflow: hidden
  }

  .account-settings-main:has(.subscription-page-content) {
    height: calc(var(--scaled-screen-height, 80dvh) - 4.375rem);
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden
  }

  .subscription-page-content {
    min-height: 0;
    height: 100%;
    padding: 1.125rem max(1.375rem, calc((100vw - 70rem)/2));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden
  }

  .subscription-hero {
    max-width: 56.25rem;
    margin-bottom: 1.25rem
  }

  .subscription-hero>span {
    font-size: 0.4375rem
  }

  .subscription-hero h1 {
    margin: 0.5rem auto;
    font-size: 2.1875rem;
    line-height: 1.04
  }

  .subscription-hero p {
    font-size: 0.65625rem
  }

  .subscription-summary {
    width: min(70rem, 100%);
    min-height: 9.375rem;
    padding: 1.4375rem 1.875rem;
    border-radius: 1.25rem
  }

  .subscription-summary small {
    font-size: 0.53125rem
  }

  .subscription-summary h2 {
    margin: 0.5625rem 0 0.4375rem;
    font-size: 1.5625rem
  }

  .subscription-summary p {
    margin-top: 0.375rem;
    font-size: 0.625rem
  }

  .admin-subscription-note {
    margin-top: 0.9375rem;
    padding: 0.5rem 0.6875rem;
    font-size: 0.53125rem
  }

  .subscription-benefits {
    width: min(70rem, 100%);
    gap: 0.75rem;
    margin-top: 0.875rem
  }

  .subscription-benefits article {
    min-height: 5.25rem;
    padding: 0.9375rem 1.0625rem;
    gap: 0.875rem;
    border-radius: 1rem
  }

  .subscription-benefits article>i {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 0.75rem;
    font-size: 0.875rem
  }

  .subscription-benefits b {
    font-size: 0.59375rem
  }

  .subscription-benefits span {
    font-size: 0.5rem;
    line-height: 1.5
  }

  .subscription-footer {
    max-height: 6.5625rem;
    padding: 0.625rem max(1.375rem, calc((100vw - 61.25rem)/2)) 0.4375rem;
    overflow: hidden
  }

  .subscription-footer-grid {
    grid-template-columns: 1.45fr .75fr .9fr .8fr;
    gap: 1.125rem
  }

  .subscription-footer-brand img {
    width: 7rem
  }

  .subscription-footer p {
    display: none
  }

  .subscription-footer strong {
    margin-bottom: 0.3125rem;
    font-size: 0.4375rem
  }

  .subscription-footer-grid>div:not(:first-child)>a,
  .subscription-footer-grid>div:not(:first-child)>span {
    margin: 0.1875rem 0;
    font-size: 0.40625rem
  }

  .subscription-footer nav {
    gap: 0.3125rem
  }

  .subscription-footer nav a {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.375rem
  }

  .subscription-footer-bottom {
    margin-top: 0.4375rem;
    padding-top: 0.375rem;
    font-size: 0.375rem
  }

  .plans-page-head {
    padding: 0.8125rem 1.125rem;
    border-radius: 0.9375rem
  }

  .plans-page-head h1 {
    font-size: 1.4375rem
  }

  .plans-page-head p {
    font-size: 0.5rem
  }

  .plans-page-head>a {
    right: 0.9375rem;
    top: 0.8125rem
  }

  .plans-frame {
    padding: 0.625rem;
    border-radius: 1.0625rem
  }

  .plans-frame .subscription-choice {
    min-height: 17.1875rem;
    padding: 0.875rem
  }

  .plans-frame .subscription-plan-grid {
    gap: 0.5625rem
  }
}

/* Account and subscription chrome uses the exact marketing-site width rhythm. */
.account-settings-top {
  height: 4.5rem;
  padding: 0 max(1.5rem, calc((100vw - 82.5rem)/2 + 1.5rem));
  box-sizing: border-box;
  border-top: 4px solid rgba(22, 22, 20, .78);
  background: rgba(241, 240, 236, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.account-settings-top>.settings-brand {
  width: 10.875rem;
  height: 2.75rem
}

.account-settings-top .settings-logo {
  width: 10.875rem;
  height: 2.75rem;
  object-fit: contain;
  object-position: left center
}

.settings-nav {
  gap: 0.3125rem
}

.settings-nav a {
  height: auto;
  padding: 0.625rem 0.9375rem;
  border-radius: 0.6875rem;
  font-size: 0.8125rem;
  font-weight: 650
}

.settings-actions {
  gap: 0.5rem
}

.settings-actions .theme-toggle {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem
}

.settings-actions .settings-back {
  height: auto;
  padding: 0.5625rem 0.8125rem;
  border-radius: 0.5625rem;
  font-size: 0.75rem
}

html[data-theme="dark"] .account-settings-top {
  border-top-color: rgba(22, 22, 20, .78);
  border-bottom-color: rgba(255, 255, 255, .07);
  background: rgba(13, 19, 32, .84)
}

@media(min-width:761px) {
  .account-settings-main:has(.subscription-page-content) {
    height: calc(var(--scaled-screen-height, 80dvh) - 4.5rem)
  }
}

@media(max-width:620px) {
  .account-settings-top {
    height: 4.5rem;
    padding: 0 1.5rem
  }
}

/* Match the account/subscription header to the landing header's real shell. */
.account-settings-top {
  position: sticky;
  top: 0;
  width: min(82.5rem, 100%);
  margin: 0 auto;
  padding: 0 1.5rem;
  isolation: isolate;
  border: 0;
  background: transparent;
}

.account-settings-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  box-sizing: border-box;
  transform: translateX(-50%);
  border-top: 4px solid rgba(22, 22, 20, .78);
  border-bottom: 1px solid rgba(18, 28, 50, .09);
  background: rgba(241, 240, 236, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.account-settings-top>.settings-brand {
  width: 10.875rem;
  height: 2.75rem
}

.account-settings-top .settings-logo {
  width: 10.875rem;
  height: 2.75rem
}

.settings-actions .settings-back {
  height: 2.125rem !important;
  padding: 0 0.75rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  white-space: nowrap;
  border-radius: 0.625rem;
  font-size: 0.625rem !important;
  line-height: 1;
}

html[data-theme="dark"] .account-settings-top {
  border: 0;
  background: transparent
}

html[data-theme="dark"] .account-settings-top:before {
  border-top-color: rgba(22, 22, 20, .78);
  border-bottom-color: rgba(255, 255, 255, .07);
  background: rgba(13, 19, 32, .84)
}

@media(max-width:620px) {
  .account-settings-top {
    width: 100%;
    padding: 0 1.5rem
  }
}

/* Account and subscription pages reuse the marketing header/footer verbatim. */
.account-settings-page>.account-settings-main {
  margin-top: 4.5rem
}

/* Keep marketing header and footer on one shared horizontal grid. */
:root {
  --marketing-chrome-width: 82.5rem;
  --marketing-chrome-gutter: 1.5rem;
}

.site-header .shell,
.marketing-footer .footer-grid,
.marketing-footer .footer-bottom {
  width: min(var(--marketing-chrome-width), 100%);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.site-header .shell {
  padding-left: var(--marketing-chrome-gutter);
  padding-right: var(--marketing-chrome-gutter);
}

.marketing-footer .footer-grid,
.marketing-footer .footer-bottom {
  padding-left: var(--marketing-chrome-gutter);
  padding-right: var(--marketing-chrome-gutter);
}

@media(max-width:760px) {
  :root {
    --marketing-chrome-gutter: 1rem
  }
}

@media(max-width:420px) {
  :root {
    --marketing-chrome-gutter: 0.75rem
  }
}

/* Anchor conversation actions to the row that opened them. */
.workspace-conversation.menu-open {
  z-index: 221;
  overflow: visible
}

.workspace-conversation>.conversation-actions-menu {
  position: absolute !important;
  left: auto !important;
  right: 0.1875rem !important;
  top: calc(100% + 0.25rem) !important;
  bottom: auto !important;
  z-index: 222 !important;
}

.workspace-conversation>.conversation-actions-menu.open-above {
  top: auto !important;
  bottom: calc(100% + 0.25rem) !important;
}

.chatbot-wallet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin: 0 0 1.125rem
}

.chatbot-wallet-card {
  padding: 1.375rem;
  border: 1px solid #e1e4eb;
  border-radius: 1rem;
  background: #fff
}

.chatbot-wallet-card small {
  color: #7855c9;
  font-size: 0.5625rem;
  font-weight: 850;
  letter-spacing: .12em
}

.chatbot-wallet-card h3 {
  margin: 0.4375rem 0;
  font-size: 1.0625rem
}

.chatbot-wallet-card p {
  margin: 0;
  color: #838a98;
  font-size: 0.6875rem;
  line-height: 1.55
}

.chatbot-wallet-card label {
  display: grid;
  gap: 0.4375rem;
  margin-top: 1.125rem;
  color: #596174;
  font-size: 0.625rem;
  font-weight: 750
}

.chatbot-wallet-card label>div {
  height: 2.75rem;
  display: flex;
  align-items: center;
  border: 1px solid #d9dce5;
  border-radius: 0.6875rem;
  overflow: hidden
}

.chatbot-wallet-card label b {
  height: 100%;
  padding: 0 0.8125rem;
  display: grid;
  place-items: center;
  background: #f4f1fb;
  color: #7855c9
}

.chatbot-wallet-card input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  outline: 0
}

.chatbot-wallet-card>button {
  height: 2.625rem;
  margin-top: 0.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #7655d1, #a53eb7);
  color: #fff;
  font-weight: 800;
  cursor: pointer
}

.wallet-requests>div:not(:first-child) {
  padding: 0.6875rem 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eceef3
}

.wallet-requests em {
  padding: 0.25rem 0.4375rem;
  border-radius: 0.4375rem;
  background: #f1f2f6;
  color: #737b8b;
  font-size: 0.5625rem;
  font-style: normal
}

.wallet-requests em.approved {
  background: #e8f8f3;
  color: #198a70
}

.wallet-requests em.rejected {
  background: #fff0f2;
  color: #b94759
}

.admin-topup-requests {
  margin-bottom: 1rem;
  padding: 1.125rem
}

.admin-topup-requests>div small {
  color: #7255c4;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .13em
}

.admin-topup-requests h3 {
  margin: 0.375rem 0 0.8125rem
}

.admin-topup-requests article {
  padding: 0.625rem 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.9375rem;
  border-top: 1px solid rgba(67, 80, 105, .09)
}

.admin-topup-requests article span b,
.admin-topup-requests article span small {
  display: block
}

.admin-topup-requests article span small {
  margin-top: 0.1875rem;
  color: #858e9d;
  font-size: 0.5rem
}

.admin-topup-requests article button {
  height: 1.875rem;
  margin-left: 0.3125rem;
  padding: 0 0.625rem;
  border: 1px solid rgba(112, 84, 199, .2);
  border-radius: 0.5rem;
  background: transparent;
  color: #6e50ba;
  cursor: pointer
}

.admin-topup-requests article button:first-child {
  color: #b74357
}

.admin-invoice-payment-requests {
  border-color: rgba(89, 129, 244, .18);
  background: linear-gradient(135deg, rgba(89, 129, 244, .045), rgba(163, 73, 221, .025));
}

.admin-invoice-payment-requests article>strong {
  color: #4d75dd;
  font-size: 0.75rem;
}

.admin-invoice-payment-requests article button:last-child {
  border-color: rgba(89, 129, 244, .25);
  background: linear-gradient(135deg, rgba(43, 187, 215, .11), rgba(156, 57, 220, .1));
  color: #5b62d8;
  font-weight: 800;
}

html[data-theme="dark"] .admin-invoice-payment-requests {
  border-color: rgba(89, 129, 244, .22);
  background: linear-gradient(135deg, rgba(89, 129, 244, .075), rgba(163, 73, 221, .04));
}

html[data-theme="dark"] .admin-invoice-payment-requests article>strong {
  color: #8ba7ff;
}

.row-action.admin-pay-invoice {
  border-color: rgba(27, 170, 141, .24);
  background: rgba(27, 170, 141, .08);
  color: #158a72;
}

.row-action.admin-pay-invoice:hover {
  background: rgba(27, 170, 141, .14);
}

.admin-invoice-payment-modal {
  width: min(28rem, 100%);
}

.admin-invoice-payment-modal>p b {
  color: #4d75dd;
}

.admin-invoice-payment-summary {
  margin: 0 0 1rem;
  padding: 0.6875rem 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  border: 1px solid rgba(89, 129, 244, .13);
  border-radius: 0.75rem;
  background: rgba(89, 129, 244, .045);
  text-align: left;
}

.admin-invoice-payment-summary span,
.admin-invoice-payment-summary small,
.admin-invoice-payment-summary b {
  display: block;
}

.admin-invoice-payment-summary small {
  color: #8993a3;
  font-size: 0.5rem;
}

.admin-invoice-payment-summary b {
  margin-top: 0.25rem;
  color: #344055;
  font-size: 0.6875rem;
}

html[data-theme="dark"] .row-action.admin-pay-invoice {
  border-color: rgba(52, 211, 153, .2);
  background: rgba(52, 211, 153, .08);
  color: #70d7b2;
}

html[data-theme="dark"] .admin-invoice-payment-summary {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .admin-invoice-payment-summary b {
  color: #ededed;
}

html[data-theme="dark"] .chatbot-wallet-card {
  background: #1c1f27;
  border-color: #30343d
}

html[data-theme="dark"] .chatbot-wallet-card label>div {
  border-color: #383c47
}

html[data-theme="dark"] .chatbot-wallet-card label b {
  background: #262331
}

@media(max-width:760px) {
  .chatbot-wallet-grid {
    grid-template-columns: 1fr
  }

  .admin-topup-requests article {
    grid-template-columns: 1fr auto
  }

  .admin-topup-requests article>div {
    grid-column: 1/-1
  }
}

/* Compact wallet dashboard: one desktop viewport, no inner scrollbar. */
@media (min-width:761px) {
  .chatbot-workspace-main:has(.wallet-stat-grid) {
    overflow: hidden;
    padding-bottom: 0.75rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-page-title {
    padding: 0.8125rem 0 0.625rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-page-title p {
    margin-top: 0.25rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-workspace-content {
    padding-bottom: 0
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-dashboard-hero {
    min-height: 7.625rem;
    padding: 1.125rem 1.5rem;
    border-radius: 1rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-dashboard-hero h2 {
    max-width: 45rem;
    margin: 0.375rem 0 0.3125rem;
    font-size: 1.5rem;
    line-height: 1.08
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-dashboard-hero p {
    font-size: 0.625rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-dashboard-hero>a {
    padding: 0.5625rem 0.8125rem;
    font-size: 0.625rem
  }

  .wallet-stat-grid {
    gap: 0.5625rem;
    margin: 0.625rem 0
  }

  .wallet-stat-grid article {
    min-height: 4.375rem;
    padding: 0.625rem 0.8125rem;
    border-radius: 0.75rem;
    gap: 0.625rem
  }

  .wallet-stat-grid article>span {
    width: 2.1875rem;
    height: 2.1875rem;
    border-radius: 0.625rem
  }

  .wallet-stat-grid b {
    margin: 0.1875rem 0 1px;
    font-size: 1.125rem
  }

  .wallet-stat-grid small {
    font-size: 0.4375rem
  }

  .wallet-stat-grid em {
    font-size: 0.5rem
  }

  .chatbot-wallet-grid {
    grid-template-columns: 1.25fr .75fr;
    gap: 0.625rem;
    margin-bottom: 0.625rem
  }

  .chatbot-wallet-card {
    min-height: 7rem;
    padding: 0.8125rem 0.9375rem;
    border-radius: 0.8125rem
  }

  #chatbotTopUpForm {
    display: grid;
    grid-template-columns: minmax(14.375rem, 1fr) minmax(13.125rem, .75fr) auto;
    align-items: end;
    gap: 0.75rem
  }

  #chatbotTopUpForm h3,
  .wallet-requests h3 {
    margin: 0.25rem 0;
    font-size: 0.875rem
  }

  #chatbotTopUpForm p {
    font-size: 0.5rem
  }

  #chatbotTopUpForm label {
    margin: 0;
    gap: 0.25rem;
    font-size: 0.5rem
  }

  #chatbotTopUpForm label>div {
    height: 2.125rem;
    border-radius: 0.5625rem
  }

  #chatbotTopUpForm>button {
    height: 2.125rem;
    margin: 0;
    padding: 0 0.75rem;
    font-size: 0.5625rem
  }

  .wallet-requests>div:not(:first-child) {
    padding: 0.375rem 0
  }

  .wallet-requests p {
    font-size: 0.5625rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-dashboard-grid {
    gap: 0.625rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-usage-chart,
  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-recent {
    min-height: 11.5625rem;
    padding: 0.8125rem;
    border-radius: 0.8125rem
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-bars {
    height: 6.75rem;
    margin-top: 0.75rem;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 34px, rgba(75, 87, 108, .07) 35px)
  }

  .chatbot-workspace-main:has(.wallet-stat-grid) .chatbot-recent>a {
    padding: 0.5rem 0
  }
}

/* Wallet dashboard reuses the existing chatbot management visual system. */
.wallet-overview-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(17.5rem, .8fr);
  gap: 0.6875rem;
  margin-bottom: 0.6875rem
}

.wallet-overview-grid .overview-panel {
  min-width: 0;
  min-height: 7rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  overflow: hidden
}

.wallet-topup-panel {
  display: grid;
  grid-template-columns: minmax(11.875rem, 1fr) minmax(16.25rem, 26.25rem);
  grid-template-areas: "heading controls" "description controls";
  align-items: center;
  gap: 0.1875rem 1.125rem
}

.wallet-topup-panel>.overview-panel-head {
  grid-area: heading;
  min-width: 0;
  align-self: end
}

.wallet-topup-panel>.overview-panel-head>div {
  min-width: 0
}

.wallet-topup-panel>.overview-panel-head h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.wallet-topup-panel>p {
  grid-area: description;
  align-self: start;
  margin: 0.1875rem 0 0;
  color: #7f899a;
  font-size: 0.5rem;
  white-space: normal
}

.wallet-topup-controls {
  grid-area: controls;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(8.125rem, 1fr) max-content;
  gap: 0.5625rem;
  align-items: center
}

.wallet-topup-controls label {
  min-width: 0;
  height: 2.125rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(75, 87, 108, .14);
  border-radius: 0.5625rem;
  background: rgba(255, 255, 255, .36)
}

.wallet-topup-controls label b {
  height: 100%;
  padding: 0 0.6875rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(112, 84, 199, .08);
  color: #6d50bb;
  font-size: 0.5625rem
}

.wallet-topup-controls input {
  width: 100%;
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0 0.625rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.5625rem;
  outline: 0;
  appearance: textfield
}

.wallet-topup-controls input::-webkit-inner-spin-button,
.wallet-topup-controls input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none
}

.wallet-topup-controls button {
  height: 2.125rem;
  max-width: 100%;
  padding: 0 0.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  border: 0;
  border-radius: 0.5625rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer
}

.wallet-history-list {
  display: grid;
  margin-top: 0.5rem
}

.wallet-history-list>div {
  min-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(75, 87, 108, .07)
}

.wallet-history-list b {
  font-size: 0.5625rem
}

.wallet-history-list em {
  padding: 0.25rem 0.4375rem;
  border-radius: 0.4375rem;
  background: rgba(112, 84, 199, .08);
  color: #6d50bb;
  font-size: 0.4375rem;
  font-style: normal
}

.wallet-history-list em.approved {
  background: rgba(28, 170, 141, .09);
  color: #178e76
}

.wallet-history-list em.rejected {
  background: rgba(199, 66, 87, .09);
  color: #b74357
}

.wallet-history-list p {
  margin: 0.5625rem 0 0;
  color: #8792a3;
  font-size: 0.5rem
}

.wallet-chart-grid {
  margin-bottom: 0
}

.wallet-chart-grid .overview-panel {
  min-height: 13.125rem;
  padding: 0.875rem 1rem
}

.wallet-chart-grid .chatbot-traffic-chart {
  height: 9.0625rem
}

.wallet-chart-grid .chatbot-traffic-chart svg {
  height: 7.6875rem
}

.wallet-chart-grid .chatbot-recent>a {
  padding: 0.5rem 0
}

.wallet-admin-metrics {
  margin-bottom: 0.6875rem
}

.wallet-admin-metrics .admin-metric {
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.75rem 0.875rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 0.625rem;
  overflow: hidden
}

.wallet-admin-metrics .admin-metric>span {
  width: 2rem;
  height: 2rem;
  margin: 0;
  grid-row: 1/4
}

.wallet-admin-metrics .admin-metric small {
  align-self: end
}

.wallet-admin-metrics .admin-metric strong {
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.1875rem
}

.wallet-admin-metrics .admin-metric p {
  max-width: 100%;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.wallet-dashboard .chatbot-admin-intro {
  margin-bottom: 0.6875rem;
  padding: 0.75rem 0.9375rem
}

.wallet-dashboard .chatbot-admin-intro p {
  font-size: 0.5625rem
}

.wallet-dashboard .chatbot-admin-intro>div>div {
  margin-top: 0.4375rem
}

html[data-theme="dark"] .wallet-topup-controls label {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .wallet-topup-controls label b {
  background: rgba(130, 94, 215, .14);
  color: #bda8ed
}

html[data-theme="dark"] .wallet-history-list>div {
  border-color: rgba(255, 255, 255, .06)
}

@media (min-width:761px) {
  .chatbot-workspace-main:has(.wallet-dashboard) {
    overflow: hidden;
    padding-bottom: 0.625rem
  }

  .chatbot-workspace-main:has(.wallet-dashboard) .chatbot-page-title {
    padding: 0.75rem 0 0.5625rem
  }

  .chatbot-workspace-main:has(.wallet-dashboard) .chatbot-page-title p {
    margin-top: 0.25rem
  }

  .chatbot-workspace-main:has(.wallet-dashboard) .chatbot-workspace-content {
    padding-bottom: 0
  }
}

@media (max-width:1180px) {
  .wallet-topup-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "description" "controls"
  }

  .wallet-topup-panel>.overview-panel-head {
    align-self: auto
  }

  .wallet-topup-panel>p {
    margin: 0.1875rem 0 0.4375rem
  }

  .wallet-topup-controls {
    width: 100%;
    max-width: 30rem
  }
}

@media (max-width:900px) {
  .wallet-overview-grid {
    grid-template-columns: 1fr
  }

  .wallet-overview-grid .overview-panel {
    overflow: visible
  }
}

@media (max-width:760px) {
  .wallet-topup-controls {
    max-width: none;
    grid-template-columns: 1fr
  }

  .wallet-topup-controls button {
    width: 100%
  }

  .wallet-admin-metrics .admin-metric {
    display: block
  }

  .wallet-admin-metrics .admin-metric>span {
    margin-bottom: 0.5625rem
  }

  .wallet-chart-grid .chatbot-traffic-chart {
    height: 10.875rem
  }

  .wallet-chart-grid .chatbot-traffic-chart svg {
    height: 9.375rem
  }
}

.wallet-topup-controls {
  position: relative;
  margin-top: 0.875rem
}

.wallet-minimum-note {
  position: absolute;
  top: -0.9375rem;
  left: 0;
  color: #7f899a;
  font-size: 0.4375rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap
}

.wallet-chart-grid .chatbot-traffic-chart svg {
  width: calc(100% - 1.875rem);
  margin-left: 1.875rem
}

.wallet-chart-grid .chatbot-traffic-chart .chart-axis {
  margin-left: 1.875rem
}

.chart-y-axis {
  position: absolute;
  z-index: 2;
  top: 1.1875rem;
  left: 0;
  width: 1.4375rem;
  height: 5.4375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  color: #8994a5;
  font-size: 0.4375rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none
}

.chart-y-axis span:after {
  content: "";
  display: inline-block;
  width: 0.1875rem;
  margin-left: 0.1875rem;
  border-top: 1px solid rgba(117, 92, 200, .35);
  vertical-align: middle
}

html[data-theme="dark"] .wallet-minimum-note,
html[data-theme="dark"] .chart-y-axis {
  color: #8290a5
}

@media(max-width:760px) {
  .chart-y-axis {
    top: 1.5rem;
    height: 6.5625rem
  }

  .wallet-chart-grid .chatbot-traffic-chart svg {
    width: calc(100% - 1.75rem);
    margin-left: 1.75rem
  }

  .wallet-chart-grid .chatbot-traffic-chart .chart-axis {
    margin-left: 1.75rem
  }
}

.inline-topup-list {
  display: grid;
  gap: 0.3125rem
}

.inline-topup-request {
  height: 1.8125rem;
  padding: 0 0.1875rem 0 0.5625rem;
  display: grid;
  grid-template-columns: auto auto 1.5625rem 1.5625rem;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgba(112, 84, 199, .2);
  border-radius: 0.5rem;
  background: rgba(112, 84, 199, .06);
  white-space: nowrap
}

.inline-topup-request b {
  color: #654bb0;
  font-size: 0.5rem
}

.inline-topup-request small {
  color: #8791a1;
  font-size: 0.4375rem
}

.inline-topup-request button {
  width: 1.5625rem;
  height: 1.4375rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.5rem;
  cursor: pointer
}

.inline-topup-request button.reject {
  color: #ba4358
}

.inline-topup-request button.approve {
  background: rgba(28, 170, 141, .11);
  color: #168c74
}

.inline-topup-request button:hover {
  background: rgba(112, 84, 199, .12)
}

html[data-theme="dark"] .inline-topup-request {
  border-color: rgba(155, 115, 225, .22);
  background: rgba(139, 96, 218, .08)
}

html[data-theme="dark"] .inline-topup-request b {
  color: #c3adf0
}

@media(max-width:1180px) {
  .users-management-table .user-row-actions {
    flex-wrap: wrap
  }

  .inline-topup-list {
    width: 100%
  }

  .inline-topup-request {
    width: max-content
  }
}

.workspace-package-usage {
  display: grid;
  gap: 0.375rem;
  margin: 2px 0 0.5rem
}

.workspace-package-usage .workspace-menu-usage {
  margin: 0 0.4375rem;
  padding: 0.5rem
}

.workspace-package-usage .workspace-menu-usage>small {
  display: block;
  margin-top: 0.1875rem;
  color: #8b95a5;
  font-size: 0.4375rem
}

.workspace-package-usage .chatbot-usage-row {
  border-color: rgba(112, 84, 199, .13);
  background: rgba(112, 84, 199, .035)
}

.workspace-package-usage .chatbot-usage-row b {
  color: #6d50bb
}

html[data-theme="dark"] .workspace-package-usage .workspace-menu-usage>small {
  color: #77869b
}

html[data-theme="dark"] .workspace-package-usage .chatbot-usage-row b {
  color: #c1acf0
}

/* Paket kullanımlarını mevcut yönetim paneli ölçeğinde kompakt tut. */
.admin-chatbot-usage {
  min-width: 0
}

.admin-chatbot-usage>small {
  margin-bottom: 0.1875rem;
  font-size: 0.375rem
}

.admin-chatbot-usage>b {
  font-size: 0.5625rem;
  line-height: 1.15
}

.admin-chatbot-usage>span {
  display: block;
  margin-top: 0.1875rem;
  color: #8993a3;
  font-size: 0.4375rem;
  line-height: 1.2
}

.admin-usage-pair {
  min-width: 11.125rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.375rem
}

.admin-usage-pair>span {
  min-width: 0;
  padding: 0.375rem 0.4375rem;
  border: 1px solid rgba(67, 80, 105, .09);
  border-radius: 0.5rem;
  background: rgba(75, 87, 108, .025)
}

.admin-usage-pair small,
.admin-usage-pair b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.admin-usage-pair small {
  margin: 0 0 0.1875rem;
  color: #8791a2;
  font-size: 0.375rem;
  font-weight: 850;
  letter-spacing: .06em
}

.admin-usage-pair b {
  font-size: 0.5rem;
  line-height: 1.2
}

.workspace-package-usage {
  gap: 0.3125rem
}

.workspace-package-usage .workspace-menu-usage {
  padding: 0.4375rem 0.5rem
}

.workspace-package-usage .workspace-menu-usage span {
  font-size: 0.375rem
}

.workspace-package-usage .workspace-menu-usage b {
  font-size: 0.4375rem
}

.workspace-package-usage .workspace-menu-usage>small {
  font-size: 0.375rem
}

.workspace-package-usage .workspace-usage-track {
  height: 0.1875rem;
  margin-top: 0.375rem
}

html[data-theme="dark"] .admin-usage-pair>span {
  border-color: rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .025)
}

@media(max-width:1120px) {
  .admin-usage-pair {
    min-width: 9.625rem;
    gap: 0.25rem
  }

  .admin-usage-pair>span {
    padding: 0.3125rem
  }

  .admin-usage-pair b {
    font-size: 0.4375rem
  }
}

/* Yönetim tablosundaki aylık kullanım değerleri kart değil, sade kolonlar olarak görünür. */
.admin-usage-pair {
  min-width: 9.0625rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.125rem
}

.admin-usage-pair>span {
  min-width: 3.625rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent
}

html[data-theme="dark"] .admin-usage-pair>span {
  border: 0;
  background: transparent
}

@media(max-width:1120px) {
  .admin-usage-pair {
    min-width: 8.125rem;
    gap: 0.75rem
  }

  .admin-usage-pair>span {
    min-width: 3.25rem;
    padding: 0
  }
}

/* Mesaj trafiği zaman aralığı seçimi */
.traffic-period-switch {
  margin-left: auto;
  padding: 0.1875rem;
  display: flex;
  gap: 2px;
  border: 1px solid rgba(112, 84, 199, .13);
  border-radius: 0.5625rem;
  background: rgba(112, 84, 199, .055)
}

.traffic-period-switch button {
  min-width: 2.625rem;
  height: 1.5rem;
  padding: 0 0.5625rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #7e8797;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 800;
  cursor: pointer
}

.traffic-period-switch button.active {
  background: #fff;
  color: #6d50bb;
  box-shadow: 0 3px 10px rgba(67, 52, 116, .11)
}

html[data-theme="dark"] .traffic-period-switch {
  border-color: rgba(160, 137, 230, .2);
  background: rgba(160, 137, 230, .08)
}

html[data-theme="dark"] .traffic-period-switch button {
  color: #99a3b4
}

html[data-theme="dark"] .traffic-period-switch button.active {
  background: #292d38;
  color: #c7b7f4
}

@media(max-width:560px) {
  .traffic-period-switch button {
    min-width: 2.25rem;
    padding: 0 0.4375rem
  }

  .wallet-chart-grid .chatbot-panel-head {
    flex-wrap: wrap
  }

  .traffic-period-switch {
    order: 2;
    margin-left: 0
  }
}

/* Pro platform bakiyesi ve hesap kullanım özeti */
.platform-usage-card {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(37, 187, 207, .07), rgba(112, 84, 199, .07) 55%, rgba(239, 93, 164, .05))
}

.platform-usage-card .setting-card-head>em {
  margin-left: auto;
  max-width: 16.25rem;
  color: #7d8798;
  font-size: 0.625rem;
  font-style: normal;
  line-height: 1.45;
  text-align: right
}

.platform-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.375rem
}

.platform-usage-grid article {
  min-width: 0;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(112, 84, 199, .11);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, .72)
}

.platform-usage-grid article>span {
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 2.375rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(37, 187, 207, .14), rgba(112, 84, 199, .16));
  color: #6f54c2
}

.platform-usage-grid article div {
  min-width: 0
}

.platform-usage-grid small,
.platform-usage-grid b {
  display: block
}

.platform-usage-grid small {
  margin-bottom: 0.3125rem;
  color: #8791a1;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: .06em
}

.platform-usage-grid b {
  overflow: hidden;
  color: #17223a;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap
}

html[data-theme="dark"] .platform-usage-card {
  background: linear-gradient(135deg, rgba(37, 187, 207, .08), rgba(112, 84, 199, .1) 55%, rgba(239, 93, 164, .05))
}

html[data-theme="dark"] .platform-usage-grid article {
  border-color: rgba(165, 137, 232, .15);
  background: rgba(255, 255, 255, .025)
}

html[data-theme="dark"] .platform-usage-grid b {
  color: #edf2fb
}

@media(max-width:900px) {
  .platform-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:560px) {
  .platform-usage-card .setting-card-head>em {
    display: none
  }

  .platform-usage-grid {
    grid-template-columns: 1fr
  }

  .platform-usage-grid article {
    padding: 0.8125rem
  }
}

/* Shared chatbot empty state: identical across assistants, integration and settings. */
.chatbot-workspace-empty {
  width: 100%;
  min-height: 25rem;
  margin: clamp(0.75rem, 3.5vh, 2.5rem) 0 0;
  padding: clamp(1.75rem, 3vw, 3rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(13.5rem, .48fr) minmax(22rem, .9fr);
  gap: clamp(1.5rem, 2.4vw, 3.25rem);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(55, 67, 90, .11);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(248, 247, 251, .78));
  box-shadow: 0 1.5rem 4rem rgba(48, 42, 66, .07);
  isolation: isolate
}

.chatbot-workspace-empty::before {
  content: "";
  width: 23rem;
  height: 23rem;
  position: absolute;
  z-index: -1;
  top: -13rem;
  left: -9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 190, 209, .12), rgba(115, 91, 224, .055) 48%, transparent 72%);
  pointer-events: none
}

.chatbot-empty-copy {
  max-width: 35rem;
  position: relative
}

.chatbot-empty-mark {
  width: 4.75rem;
  height: 4.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: grid;
  place-items: center
}

.chatbot-empty-mark>span {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112, 87, 214, .2);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(35, 190, 209, .12), rgba(115, 91, 224, .16) 58%, rgba(169, 49, 207, .12));
  color: #7254d0;
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 .875rem 2rem rgba(83, 65, 156, .12)
}

.chatbot-empty-mark>i {
  width: .55rem;
  height: .55rem;
  position: absolute;
  right: .05rem;
  top: .75rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #24bdd0;
  box-shadow: 0 0 0 .25rem rgba(36, 189, 208, .1)
}

.chatbot-empty-mark>i:last-child {
  width: .42rem;
  height: .42rem;
  top: auto;
  right: .7rem;
  bottom: .15rem;
  background: #9b43d4;
  box-shadow: 0 0 0 .2rem rgba(155, 67, 212, .09)
}

.chatbot-empty-copy>small {
  display: block;
  color: #7659d0;
  font-size: .625rem;
  font-weight: 850;
  letter-spacing: .13em
}

.chatbot-empty-copy h2 {
  max-width: 31rem;
  margin: .65rem 0 .75rem;
  color: var(--text);
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.045em
}

.chatbot-empty-copy>p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75
}

.chatbot-empty-actions {
  margin-top: 1.65rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem
}

.chatbot-empty-actions>a {
  min-height: 2.9rem;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 0;
  border-radius: .8rem;
  background: linear-gradient(105deg, #20bfd1, #735ee4 58%, #a730d2);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  box-shadow: 0 .75rem 1.75rem rgba(93, 73, 187, .2);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease
}

.chatbot-empty-actions>a:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 1rem 2.2rem rgba(93, 73, 187, .25)
}

.chatbot-empty-actions>a:focus-visible {
  outline: 3px solid color-mix(in srgb, #735ee4, transparent 70%);
  outline-offset: 3px
}

.chatbot-empty-actions>span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 650
}

.chatbot-empty-actions>span i {
  color: #7659d0
}

.chatbot-empty-demo {
  min-width: 0;
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
  isolation: isolate
}

.chatbot-empty-demo::before,
.chatbot-empty-demo::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none
}

.chatbot-empty-demo::before {
  width: 13rem;
  height: 13rem;
  top: 48%;
  left: 50%;
  border: 1px solid rgba(117, 88, 207, .12);
  transform: translate(-50%, -50%)
}

.chatbot-empty-demo::after {
  width: 9.5rem;
  height: 9.5rem;
  top: 48%;
  left: 50%;
  background: radial-gradient(circle, rgba(35, 190, 209, .11), rgba(115, 91, 224, .08) 48%, transparent 72%);
  transform: translate(-50%, -50%)
}

.chatbot-demo-card {
  width: min(100%, 15.5rem);
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(59, 71, 93, .13);
  border-radius: 1.1rem;
  background: rgba(250, 250, 252, .94);
  box-shadow: 0 1.35rem 3rem rgba(58, 48, 91, .13);
  transform: translateY(-.35rem)
}

.chatbot-demo-card header {
  padding: .85rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(115deg, rgba(31, 185, 207, .78), rgba(113, 84, 203, .8) 58%, rgba(199, 67, 145, .72));
  color: #fff
}

.chatbot-demo-card header>span {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .7rem;
  background: rgba(20, 24, 39, .2)
}

.chatbot-demo-card header>div {
  min-width: 0
}

.chatbot-demo-card header b,
.chatbot-demo-card header small {
  display: block
}

.chatbot-demo-card header b {
  overflow: hidden;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap
}

.chatbot-demo-card header small {
  margin-top: .2rem;
  color: rgba(255, 255, 255, .78);
  font-size: .5rem
}

.chatbot-demo-card header small i {
  width: .34rem;
  height: .34rem;
  margin-right: .2rem;
  display: inline-block;
  border-radius: 50%;
  background: #78f0bd;
  box-shadow: 0 0 0 .18rem rgba(120, 240, 189, .15)
}

.chatbot-demo-body {
  min-height: 9.2rem;
  padding: 1rem .85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, rgba(113, 84, 203, .035), transparent 55%)
}

.chatbot-demo-body>p {
  width: 88%;
  margin: 0;
  padding: .7rem .75rem;
  border: 1px solid rgba(112, 84, 199, .13);
  border-radius: .8rem .8rem .8rem .25rem;
  background: #fff;
  color: #2b3140;
  font-size: .57rem;
  font-weight: 650;
  line-height: 1.5;
  box-shadow: 0 .5rem 1.2rem rgba(52, 45, 76, .055)
}

.chatbot-demo-body>div {
  display: flex;
  gap: .35rem
}

.chatbot-demo-body>div span {
  padding: .32rem .45rem;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  border: 1px solid rgba(67, 80, 105, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #7c8595;
  font-size: .45rem;
  font-weight: 800
}

.chatbot-demo-body>div span:first-child i {
  color: #d94a61
}

.chatbot-demo-body>div span:last-child i {
  color: #1cabc0
}

.chatbot-demo-card footer {
  padding: .65rem .7rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  border-top: 1px solid rgba(67, 80, 105, .09);
  background: rgba(255, 255, 255, .8)
}

.chatbot-demo-card footer span {
  height: 1.8rem;
  padding: 0 .65rem;
  display: flex;
  align-items: center;
  flex: 1;
  border: 1px solid rgba(112, 84, 199, .16);
  border-radius: 999px;
  color: #9198a5;
  font-size: .5rem
}

.chatbot-demo-card footer>i {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #22bcd0, #735ee4 58%, #a730d2);
  color: #fff;
  font-size: .55rem
}

.chatbot-demo-caption {
  position: absolute;
  z-index: 2;
  right: -.25rem;
  bottom: 1.05rem;
  padding: .45rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(52, 189, 137, .18);
  border-radius: 999px;
  background: rgba(245, 252, 249, .94);
  color: #2d956d;
  font-size: .48rem;
  font-weight: 800;
  box-shadow: 0 .65rem 1.4rem rgba(39, 94, 73, .1)
}

.chatbot-empty-orbit {
  width: min(100%, 17rem);
  height: 18.5rem;
  position: relative;
  z-index: 1
}

.chatbot-empty-orbit svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
  fill: none;
  stroke: rgba(113, 84, 203, .26);
  stroke-width: 1.2;
  stroke-dasharray: 4 5
}

.chatbot-empty-orbit svg circle {
  stroke: rgba(35, 190, 209, .13);
  stroke-dasharray: 2 7
}

.chatbot-orbit-core {
  width: 5.25rem;
  height: 5.25rem;
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(130, 99, 220, .26);
  border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(35, 190, 209, .18), rgba(113, 84, 203, .24) 55%, rgba(199, 67, 145, .17));
  color: #7357ca;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1.2rem 2.5rem rgba(77, 59, 144, .18);
  transform: translate(-50%, -50%) rotate(-4deg)
}

.chatbot-orbit-core::before {
  content: "";
  position: absolute;
  inset: -.65rem;
  border: 1px solid rgba(113, 84, 203, .13);
  border-radius: 1.95rem
}

.chatbot-orbit-core i {
  font-size: 1.55rem
}

.chatbot-orbit-core b {
  margin-top: -1rem;
  font-size: .52rem;
  letter-spacing: .15em
}

.chatbot-orbit-node {
  min-width: 5.4rem;
  padding: .55rem .65rem;
  position: absolute;
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(65, 78, 102, .11);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .88);
  color: #596579;
  font-size: .58rem;
  box-shadow: 0 .75rem 1.65rem rgba(45, 51, 70, .09)
}

.chatbot-orbit-node i {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: .48rem
}

.chatbot-orbit-node b {
  font-size: .56rem
}

.chatbot-orbit-node.model {
  top: 1rem;
  left: -.4rem
}

.chatbot-orbit-node.model i {
  background: rgba(35, 190, 209, .12);
  color: #159db1
}

.chatbot-orbit-node.knowledge {
  top: 1rem;
  right: -.4rem
}

.chatbot-orbit-node.knowledge i {
  background: rgba(113, 84, 203, .11);
  color: #7357c8
}

.chatbot-orbit-node.publish {
  bottom: .55rem;
  left: 50%;
  transform: translateX(-50%)
}

.chatbot-orbit-node.publish i {
  background: rgba(199, 67, 145, .1);
  color: #bd3f82
}

.chatbot-orbit-caption {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: .1rem;
  padding: .45rem .7rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(65, 78, 102, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #7c8595;
  font-size: .48rem;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 .7rem 1.5rem rgba(45, 51, 70, .08);
  transform: translateX(-50%)
}

.chatbot-orbit-caption i {
  color: #7659d0
}

.chatbot-empty-journey {
  padding: 1.35rem;
  border: 1px solid rgba(65, 76, 98, .1);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65)
}

.chatbot-empty-journey>div {
  padding: .1rem .2rem .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(65, 76, 98, .09)
}

.chatbot-empty-journey>div small {
  color: #7659d0;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .11em
}

.chatbot-empty-journey>div span {
  color: var(--muted);
  font-size: .6rem;
  font-weight: 650
}

.chatbot-empty-journey ol {
  margin: 0;
  padding: .25rem 0 0;
  list-style: none
}

.chatbot-empty-journey li {
  min-height: 4.75rem;
  padding: .8rem .25rem;
  display: grid;
  grid-template-columns: 1.75rem 2.4rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  border-bottom: 1px solid rgba(65, 76, 98, .075)
}

.chatbot-empty-journey li:last-child {
  border-bottom: 0
}

.chatbot-empty-journey li>span {
  color: #8b94a3;
  font-size: .55rem;
  font-weight: 850
}

.chatbot-empty-journey li>i {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: .75rem;
  background: rgba(113, 84, 203, .085);
  color: #7357c8;
  font-size: .85rem
}

.chatbot-empty-journey li:nth-child(1)>i {
  background: rgba(31, 185, 207, .105);
  color: #159db1
}

.chatbot-empty-journey li:nth-child(2)>i {
  background: rgba(113, 84, 203, .1);
  color: #7357c8
}

.chatbot-empty-journey li:nth-child(3)>i {
  background: rgba(199, 67, 145, .095);
  color: #bd3f82
}

.chatbot-empty-journey li div {
  min-width: 0
}

.chatbot-empty-journey li b {
  display: block;
  color: var(--text);
  font-size: .75rem;
  line-height: 1.35
}

.chatbot-empty-journey li small {
  margin-top: .25rem;
  display: block;
  color: var(--muted);
  font-size: .625rem;
  line-height: 1.45
}

html[data-theme="dark"] .chatbot-workspace-empty {
  border-color: rgba(255, 255, 255, .085);
  background: linear-gradient(145deg, #232323, #1d1d1d);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .22)
}

html[data-theme="dark"] .chatbot-workspace-empty::before {
  opacity: .55
}

html[data-theme="dark"] .chatbot-empty-mark>span {
  border-color: rgba(144, 112, 230, .24);
  background: linear-gradient(145deg, rgba(35, 190, 209, .1), rgba(115, 91, 224, .15) 58%, rgba(169, 49, 207, .09));
  color: #ad94ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 .875rem 2rem rgba(0, 0, 0, .25)
}

html[data-theme="dark"] .chatbot-empty-mark>i {
  border-color: #232323
}

html[data-theme="dark"] .chatbot-demo-card {
  border-color: rgba(255, 255, 255, .09);
  background: #171717;
  box-shadow: 0 1.35rem 3rem rgba(0, 0, 0, .3)
}

html[data-theme="dark"] .chatbot-demo-body {
  background: linear-gradient(145deg, rgba(121, 88, 210, .06), transparent 55%)
}

html[data-theme="dark"] .chatbot-demo-body>p {
  border-color: rgba(255, 255, 255, .085);
  background: #242424;
  color: #ededed;
  box-shadow: none
}

html[data-theme="dark"] .chatbot-demo-body>div span {
  border-color: rgba(255, 255, 255, .075);
  background: #202020;
  color: #a4a4a4
}

html[data-theme="dark"] .chatbot-demo-card footer {
  border-color: rgba(255, 255, 255, .075);
  background: #151515
}

html[data-theme="dark"] .chatbot-demo-card footer span {
  border-color: rgba(255, 255, 255, .1);
  color: #8f8f8f
}

html[data-theme="dark"] .chatbot-demo-caption {
  border-color: rgba(80, 205, 154, .15);
  background: rgba(28, 43, 37, .96);
  color: #7fdbb3
}

html[data-theme="dark"] .chatbot-empty-orbit svg {
  stroke: rgba(145, 112, 232, .3)
}

html[data-theme="dark"] .chatbot-empty-orbit svg circle {
  stroke: rgba(35, 190, 209, .16)
}

html[data-theme="dark"] .chatbot-orbit-core {
  border-color: rgba(145, 112, 232, .27);
  background: linear-gradient(145deg, rgba(35, 190, 209, .13), rgba(113, 84, 203, .22) 55%, rgba(199, 67, 145, .13));
  color: #b69cf2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1.2rem 2.5rem rgba(0, 0, 0, .28)
}

html[data-theme="dark"] .chatbot-orbit-core::before {
  border-color: rgba(145, 112, 232, .16)
}

html[data-theme="dark"] .chatbot-orbit-node,
html[data-theme="dark"] .chatbot-orbit-caption {
  border-color: rgba(255, 255, 255, .085);
  background: rgba(30, 30, 30, .94);
  color: #aaa;
  box-shadow: 0 .75rem 1.65rem rgba(0, 0, 0, .23)
}

html[data-theme="dark"] .chatbot-orbit-node.model i {
  background: rgba(35, 190, 209, .13);
  color: #5bd4e3
}

html[data-theme="dark"] .chatbot-orbit-node.knowledge i {
  background: rgba(139, 102, 224, .15);
  color: #b59cf3
}

html[data-theme="dark"] .chatbot-orbit-node.publish i {
  background: rgba(207, 73, 151, .14);
  color: #ed83ba
}

html[data-theme="dark"] .chatbot-orbit-caption i {
  color: #ad94ef
}

html[data-theme="dark"] .chatbot-empty-copy>small,
html[data-theme="dark"] .chatbot-empty-actions>span i,
html[data-theme="dark"] .chatbot-empty-journey>div small {
  color: #ad94ef
}

html[data-theme="dark"] .chatbot-empty-journey {
  border-color: rgba(255, 255, 255, .08);
  background: #191919;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035)
}

html[data-theme="dark"] .chatbot-empty-journey>div,
html[data-theme="dark"] .chatbot-empty-journey li {
  border-color: rgba(255, 255, 255, .07)
}

html[data-theme="dark"] .chatbot-empty-journey li>span {
  color: #777
}

html[data-theme="dark"] .chatbot-empty-journey li>i {
  background: rgba(139, 102, 224, .12);
  color: #b19aeb
}

html[data-theme="dark"] .chatbot-empty-journey li:nth-child(1)>i {
  background: rgba(35, 190, 209, .12);
  color: #5bd4e3
}

html[data-theme="dark"] .chatbot-empty-journey li:nth-child(2)>i {
  background: rgba(139, 102, 224, .14);
  color: #b59cf3
}

html[data-theme="dark"] .chatbot-empty-journey li:nth-child(3)>i {
  background: rgba(207, 73, 151, .13);
  color: #ed83ba
}

@media(max-width:1500px) {
  .chatbot-workspace-empty {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr);
    gap: 2rem
  }

  .chatbot-empty-demo {
    display: none
  }
}

@media(max-width:1000px) {
  .chatbot-workspace-empty {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .chatbot-empty-copy {
    max-width: none
  }
}

@media(max-width:620px) {
  .chatbot-workspace-empty {
    margin-top: .5rem;
    padding: 1.35rem;
    gap: 1.5rem;
    border-radius: 1.15rem
  }

  .chatbot-empty-mark {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.1rem
  }

  .chatbot-empty-mark>span {
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 1.05rem
  }

  .chatbot-empty-copy h2 {
    font-size: 1.55rem
  }

  .chatbot-empty-copy>p {
    font-size: .78rem;
    line-height: 1.65
  }

  .chatbot-empty-actions {
    align-items: stretch;
    flex-direction: column
  }

  .chatbot-empty-actions>a {
    width: 100%
  }

  .chatbot-empty-journey {
    padding: 1rem
  }

  .chatbot-empty-journey li {
    grid-template-columns: 1.5rem 2.2rem minmax(0, 1fr);
    gap: .6rem
  }

  .chatbot-empty-journey li>i {
    width: 2.2rem;
    height: 2.2rem
  }
}

/* Mobile stability pass: keep every app surface inside the visual viewport. */
@media(max-width:900px) {
  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    min-width: 0
  }

  html,
  body {
    overflow-x: hidden;
    overflow-x: clip
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    max-width: 100%;
    font-size: 16px !important
  }

  .shell,
  .home-content,
  .landing-block,
  .section-head,
  .hero-copy,
  .ai-preview,
  .workflow-copy,
  .workflow-steps,
  .feature-four,
  .capability-grid,
  .assistant-cards,
  .plan-grid,
  .simple-pricing,
  .account-settings-main,
  .settings-page-content,
  .subscription-page-content,
  .admin-content,
  .chatbot-workspace-main,
  .chatbot-workspace-content {
    min-width: 0;
    max-width: 100%
  }

  .site-header {
    padding-top: env(safe-area-inset-top)
  }

  .site-header .shell {
    width: 100%;
    padding-left: max(var(--marketing-chrome-gutter), env(safe-area-inset-left));
    padding-right: max(var(--marketing-chrome-gutter), env(safe-area-inset-right))
  }

  .site-header .nav,
  .site-header .brand,
  .site-header .nav-actions {
    min-width: 0
  }

  .site-header .brand-logo {
    width: min(8.875rem, 42vw);
    max-width: 100%;
    height: auto
  }

  .site-header .theme-toggle,
  .site-header .start-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center
  }

  .home-content {
    width: 100%;
    overflow: hidden
  }

  /* My Assistants uses the exact same content box as the admin editor. */
  .user-assistant-workspace .admin-content.assistant-editor-open #myAssistantBody {
    width: 100%;
    max-width: none;
    padding: 0 !important;
    box-sizing: border-box
  }

  .user-assistant-workspace .admin-content.assistant-editor-open .assistant-detail-grid {
    width: 100%;
    height: 100%;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr)
  }

  .admin-content.assistant-editor-open #myAssistantBody {
    padding-bottom: 0
  }

  .marketing-hero {
    width: auto;
    max-width: none;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    grid-template-columns: minmax(0, 1fr) !important
  }

  .marketing-hero:before {
    left: 0;
    right: 0
  }

  .hero-copy,
  .ai-preview {
    width: 100%
  }

  .ai-preview {
    transform: none
  }

  .preview-glow {
    right: -3rem;
    width: 11rem;
    height: 11rem
  }

  .feature-showcase:before,
  .capability-block:before,
  .assistants-showcase:before,
  .pricing-showcase:before {
    left: 0;
    width: 100%;
    max-width: 100%;
    transform: none
  }

  .workflow-block {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2.5rem;
    align-items: stretch
  }

  .workflow-copy {
    width: 100%;
    max-width: 100%;
    justify-self: stretch
  }

  .workflow-copy h2,
  .workflow-copy>p,
  .workflow-actions {
    width: 100%;
    max-width: 100%
  }

  .workflow-steps {
    width: 100%;
    padding-left: 0
  }

  .workflow-steps .workflow-step {
    width: 100%;
    grid-template-columns: 2.75rem minmax(0, 1fr) !important;
    gap: .75rem
  }

  .step-content,
  .step-heading,
  .feature-card-body,
  .capability-copy,
  .assistant-card-copy,
  .plan-card,
  .simple-plan {
    min-width: 0
  }

  .step-heading h3,
  .feature-card h3,
  .capability-card h3,
  .assistant-card h3,
  .plan-card p,
  .simple-plan p,
  .simple-plan li {
    overflow-wrap: anywhere
  }

  .feature-showcase .feature-card,
  .capability-block .capability-card,
  .assistants-showcase .assistant-card,
  .pricing-showcase .simple-plan {
    width: 100%;
    max-width: 100%
  }

  .pricing-showcase .simple-plan {
    min-height: 0 !important
  }

  .hero-copy .hero-actions .btn,
  .pricing-showcase .simple-plan>.btn,
  .account-submit,
  .passkey-login,
  .setting-primary,
  .setting-secondary,
  .setting-danger,
  .current-plan-card button,
  .subscription-choice>button,
  .chatbots-hero>button,
  .chatbot-form-actions button,
  .admin-create-btn,
  .modal button {
    min-height: 44px
  }

  .marketing-footer .footer-grid,
  .marketing-footer .footer-bottom {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right))
  }

  .marketing-footer .footer-column>a,
  .marketing-footer .footer-contact-link {
    min-height: 44px;
    display: flex;
    align-items: center
  }

  .marketing-footer .social {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center
  }

  /* Auth pages must grow and scroll; registration was previously clipped. */
  html.auth-page {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: auto
  }

  html.auth-page body {
    height: auto;
    min-height: 100dvh;
    overflow: visible
  }

  html.auth-page #app {
    height: auto;
    min-height: 100dvh;
    overflow: visible
  }

  html.auth-page .account-gate {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: hidden;
    overflow-y: clip
  }

  html.auth-page .account-shell {
    width: min(calc(100% - 1.5rem), 27.5rem);
    height: auto;
    min-height: 100dvh;
    padding-top: max(.875rem, env(safe-area-inset-top));
    padding-bottom: max(.875rem, env(safe-area-inset-bottom));
    align-content: center
  }

  html.auth-page .account-register .account-shell {
    align-content: start
  }

  .account-card {
    width: 100%;
    max-width: 100%
  }

  .account-tabs a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .account-consent {
    min-height: 44px;
    align-items: center
  }

  .account-legal-link {
    min-height: 44px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    display: inline-flex;
    align-items: center
  }

  /* Chat workspace: preserve the rail, but return usable width to messages. */
  .workspace-layout {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    grid-template-columns: 3.5rem minmax(0, 1fr) !important
  }

  .workspace-sidebar,
  .workspace-main,
  .workspace-top,
  .workspace-chat-area,
  .workspace-messages,
  .workspace-messages .msg,
  .workspace-messages .message-body,
  .composer-shell,
  .workspace-composer {
    min-width: 0;
    max-width: 100%
  }

  .workspace-sidebar {
    padding-left: .375rem;
    padding-right: .375rem
  }

  .workspace-brand,
  .workspace-new-chat {
    max-width: 2.5rem
  }

  .workspace-composer-wrap,
  .has-conversation .workspace-composer-wrap,
  .sidebar-collapsed.has-conversation .workspace-composer-wrap {
    left: 3.5rem !important;
    right: 0 !important;
    width: auto;
    max-width: none;
    padding-left: max(.5rem, env(safe-area-inset-left));
    padding-right: max(.5rem, env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom))
  }

  .workspace-disclaimer {
    left: 3.5rem
  }

  .workspace-chat-area {
    padding-left: .75rem;
    padding-right: .75rem;
    scrollbar-gutter: auto
  }

  .workspace-messages .bubble,
  .assistant-answer-content {
    max-width: 100%;
    overflow-wrap: anywhere
  }

  .workspace-welcome {
    max-width: 100%;
    padding-left: .75rem;
    padding-right: .75rem
  }

  .workspace-suggestions {
    max-width: 100%;
    scroll-padding-left: .5rem;
    -webkit-overflow-scrolling: touch
  }

  .assistant-popover,
  .workspace-usermenu,
  .conversation-actions-menu {
    max-width: calc(100vw - 4.5rem)
  }

  /* Settings, subscription and modal content. */
  .settings-page-content,
  .subscription-page-content {
    width: 100%;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right))
  }

  .account-settings-stack,
  .account-settings-grid,
  .setting-fields,
  .password-setting-fields,
  .platform-usage-grid,
  .subscription-plan-grid,
  .chatbot-grid,
  .chatbot-fields,
  .models-layout,
  .settings-grid {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .setting-fields .wide,
  .chatbot-fields label.wide {
    grid-column: auto
  }

  .security-row,
  .passkey-intro,
  .archived-conversation-list article,
  .current-plan-card,
  .chatbots-hero,
  .chatbot-editor-head {
    min-width: 0;
    align-items: flex-start;
    flex-wrap: wrap
  }

  .security-row>div,
  .passkey-intro>div,
  .current-plan-card>div,
  .chatbots-hero>div,
  .chatbot-editor-head>div {
    min-width: 0;
    max-width: 100%
  }

  .modal-back,
  .conversation-confirm-back,
  .avatar-modal-back {
    padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left))
  }

  .modal,
  .conversation-confirm,
  .avatar-modal,
  .otp-login-modal,
  .otp-setup-modal {
    width: min(100%, 31.25rem);
    max-width: 100%;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto
  }

  /* Admin and chatbot workspaces use a compact, non-overflowing rail. */
  .admin-layout.admin-workspace,
  .admin-workspace.chatbot-workspace {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 4rem minmax(0, 1fr) !important
  }

  .admin-sidebar,
  .chatbot-workspace .chatbot-workspace-side {
    width: auto;
    max-width: 4rem;
    padding-left: .375rem;
    padding-right: .375rem
  }

  .admin-content,
  .chatbot-workspace-main {
    min-width: 0;
    overflow-x: hidden
  }

  .admin-head,
  .admin-page-title,
  .users-control-head,
  .models-page-lead,
  .chatbot-section-lead,
  .chatbot-admin-intro {
    min-width: 0;
    align-items: flex-start;
    flex-wrap: wrap
  }

  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }
}

@media(max-width:420px) {
  .site-header .brand-logo {
    width: min(8rem, 40vw)
  }

  .site-header .nav-actions {
    gap: .375rem
  }

  .site-header .theme-toggle {
    width: 2.375rem;
    min-width: 2.375rem
  }

  .site-header .start-btn {
    padding-left: .625rem;
    padding-right: .625rem;
    font-size: .6875rem
  }

  .hero-copy h1 {
    font-size: clamp(2.25rem, 12vw, 2.625rem)
  }

  .section-head.centered h2,
  .section-head.left h2,
  .workflow-copy h2 {
    font-size: 2rem
  }

  .feature-showcase .feature-card,
  .assistants-showcase .assistant-card,
  .pricing-showcase .simple-plan,
  .account-setting-card,
  .subscription-choice,
  .chatbot-editor-card {
    padding: 1.125rem !important
  }

  .feature-showcase .feature-card,
  .assistants-showcase .assistant-card {
    min-height: 0
  }

  .admin-metrics,
  .chatbot-admin-metrics,
  .platform-usage-grid {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .admin-head .admin-create-btn,
  .users-control-head>button,
  .chatbot-section-lead>a,
  .chatbots-hero>button {
    width: 100%;
    justify-content: center
  }
}

/* Assistant avatars use the same edge-to-edge circular treatment as chatbot logos. */
.assistant-brand-avatar {
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important
}

.assistant-brand-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  transform: none !important;
  filter: none !important
}

.assistant-brand-avatar.has-custom-assistant-icon img {
  transform: scale(1.4) !important
}

/* Phone workspaces: desktop rails become full, dismissible navigation drawers. */
.mobile-drawer-backdrop,
.mobile-menu-trigger,
.workspace-mobile-brand,
.workspace-mobile-new-chat {
  display: none
}

.workspace-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem
}

@media(max-width:900px) {
  html.mobile-drawer-open,
  html.mobile-drawer-open body {
    overflow: hidden
  }

  .mobile-menu-trigger {
    width: 2.625rem;
    height: 2.625rem;
    flex: 0 0 2.625rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(91, 101, 124, .15);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .72);
    color: #6150a7;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 .4rem 1.2rem rgba(38, 43, 61, .05)
  }

  html[data-theme="dark"] .mobile-menu-trigger {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .055);
    color: #c7b3f6
  }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 79;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(14, 17, 25, .54);
    backdrop-filter: blur(3px);
    transition: opacity .22s ease, visibility 0s linear .22s
  }

  .mobile-sidebar-open>.mobile-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s
  }

  /* Chat */
  .workspace-layout {
    display: block !important;
    grid-template-columns: none !important
  }

  .workspace-main {
    width: 100%;
    max-width: 100%;
    position: relative
  }

  .workspace-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(19.5rem, calc(100vw - 3rem)) !important;
    max-width: min(19.5rem, calc(100vw - 3rem)) !important;
    padding: max(1rem, env(safe-area-inset-top)) .875rem max(.875rem, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    box-shadow: 1.5rem 0 3.5rem rgba(8, 12, 20, .2);
    transition: transform .24s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .24s
  }

  .workspace-layout.mobile-sidebar-open>.workspace-sidebar {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s
  }

  .workspace-sidebar .workspace-brand {
    width: 10.75rem !important;
    max-width: calc(100% - .5rem) !important;
    height: 3rem;
    margin: 0 .25rem 1rem
  }

  .workspace-sidebar .workspace-logo {
    width: 10.75rem;
    max-width: 100%;
    height: auto
  }

  .workspace-sidebar .workspace-new-chat {
    width: 100% !important;
    max-width: none !important;
    min-height: 2.875rem;
    justify-content: flex-start !important;
    gap: .75rem;
    padding: 0 .875rem !important
  }

  .workspace-sidebar .workspace-new-chat span,
  .workspace-sidebar .workspace-history-head,
  .workspace-sidebar .workspace-conversations,
  .workspace-sidebar .workspace-userline .userinfo,
  .workspace-sidebar .workspace-userline .workspace-avatar {
    display: flex !important
  }

  .workspace-sidebar .workspace-conversations {
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: .75rem;
    padding-right: .125rem
  }

  .workspace-sidebar .workspace-history-head {
    align-items: center;
    justify-content: space-between
  }

  .workspace-sidebar .workspace-userline {
    min-width: 0;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: .625rem !important
  }

  .workspace-sidebar .workspace-userline .workspace-avatar {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center
  }

  .workspace-sidebar .workspace-userline .userinfo {
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column
  }

  .workspace-sidebar .workspace-userline .account-menu-trigger {
    margin-left: auto;
    flex: 0 0 auto
  }

  .workspace-sidebar .workspace-usermenu {
    width: calc(100% - 1.75rem);
    max-width: none;
    left: .875rem;
    right: auto
  }

  .workspace-top {
    min-height: calc(4rem + env(safe-area-inset-top));
    height: calc(4rem + env(safe-area-inset-top));
    flex-basis: calc(4rem + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: .65rem
  }

  .workspace-mobile-brand {
    width: min(7rem, 31vw);
    min-width: 0;
    display: flex;
    align-items: center
  }

  .workspace-mobile-logo {
    display: block;
    width: 100%;
    height: auto
  }

  .workspace-mobile-brand .workspace-logo-dark {
    display: none
  }

  html[data-theme="dark"] .workspace-mobile-brand .workspace-logo-light {
    display: none
  }

  html[data-theme="dark"] .workspace-mobile-brand .workspace-logo-dark {
    display: block
  }

  .workspace-top>.workspace-top-actions {
    display: flex !important;
    gap: .4rem
  }

  .workspace-mobile-new-chat {
    width: 2.625rem;
    height: 2.625rem;
    flex: 0 0 2.625rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(91, 101, 124, .15);
    border-radius: .8rem;
    background: rgba(112, 84, 199, .08);
    color: #6b51bd;
    font: inherit;
    cursor: pointer
  }

  html[data-theme="dark"] .workspace-mobile-new-chat {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(181, 151, 237, .1);
    color: #c7b3f6
  }

  .workspace-theme {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto
  }

  .workspace-composer-wrap,
  .has-conversation .workspace-composer-wrap,
  .sidebar-collapsed.has-conversation .workspace-composer-wrap {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important
  }

  .workspace-disclaimer {
    left: 0 !important;
    width: 100%;
    padding-left: .75rem;
    padding-right: .75rem
  }

  .workspace-chat-area {
    width: 100%;
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right))
  }

  .is-new-conversation .workspace-welcome,
  .sidebar-collapsed.is-new-conversation .workspace-welcome {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
    transform: none !important
  }

  .assistant-popover,
  .conversation-actions-menu {
    max-width: calc(100vw - 1rem)
  }

  /* Management and chatbot panels */
  .admin-layout.admin-workspace,
  .admin-workspace.chatbot-workspace {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
    max-width: 100%;
    position: fixed;
    inset: 0
  }

  .admin-sidebar,
  .chatbot-workspace .chatbot-workspace-side {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 80;
    width: min(19.5rem, calc(100vw - 3rem)) !important;
    max-width: min(19.5rem, calc(100vw - 3rem)) !important;
    padding: max(1rem, env(safe-area-inset-top)) .875rem max(.875rem, env(safe-area-inset-bottom)) !important;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    box-shadow: 1.5rem 0 3.5rem rgba(8, 12, 20, .2);
    transition: transform .24s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .24s
  }

  .admin-workspace.mobile-sidebar-open>.admin-sidebar {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s
  }

  .admin-sidebar .admin-brand {
    width: 11.25rem !important;
    max-width: calc(100% - .5rem) !important;
    height: 3rem;
    margin: 0 .25rem 1rem
  }

  .admin-sidebar .admin-logo {
    width: 11.25rem !important;
    max-width: 100%;
    height: auto
  }

  .admin-sidebar .admin-nav {
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto
  }

  .admin-sidebar .admin-nav button,
  .chatbot-workspace .chatbot-workspace-nav button {
    width: 100% !important;
    min-height: 2.75rem;
    justify-content: flex-start !important;
    gap: .625rem;
    padding: 0 .75rem !important
  }

  .admin-sidebar .admin-nav button span,
  .admin-sidebar .admin-return span,
  .admin-sidebar .admin-profile>div {
    display: block !important
  }

  .admin-sidebar .admin-profile {
    min-width: 0;
    justify-content: flex-start !important;
    padding: .5rem !important
  }

  .admin-sidebar .admin-profile .avatar {
    display: grid !important;
    flex: 0 0 auto
  }

  .admin-sidebar .admin-profile>div {
    min-width: 0;
    flex: 1 1 auto
  }

  .admin-content,
  .chatbot-workspace-main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom))
  }

  .admin-head,
  .chatbot-workspace-head {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: calc(4rem + env(safe-area-inset-top));
    height: calc(4rem + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .65rem;
    background: rgba(246, 246, 243, .92);
    backdrop-filter: blur(18px)
  }

  html[data-theme="dark"] .admin-head,
  html[data-theme="dark"] .chatbot-workspace-head {
    background: rgba(16, 18, 23, .9)
  }

  .admin-head>span,
  .chatbot-workspace-head>span {
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: .4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .admin-head .admin-theme-toggle,
  .chatbot-workspace-head .admin-theme-toggle {
    position: static !important;
    margin-left: auto;
    flex: 0 0 auto
  }

  .admin-page-title,
  .chatbot-page-title,
  #adminBody,
  .chatbot-workspace-content {
    width: 100%;
    min-width: 0;
    max-width: 100%
  }

  .overview-grid,
  .admin-system-grid,
  .admin-settings-grid,
  .assistant-detail-grid,
  .chatbot-integration-grid,
  .assistant-detail-fields,
  .chatbot-field-pair {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .assistant-detail-fields .wide {
    grid-column: auto !important
  }

  .assistant-detail-stats,
  .users-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .table-scroll,
  .knowledge-scroll-region {
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch
  }

  .users-control-panel,
  .assistant-settings-panel,
  .knowledge-panel,
  .chatbot-form-panel,
  .chatbot-preview-card,
  .chatbot-script-card {
    min-width: 0;
    max-width: 100%
  }

  .knowledge-tools,
  .assistant-detail-actions,
  .chatbot-settings-list article {
    min-width: 0;
    flex-wrap: wrap
  }
}

@media(max-width:480px) {
  .workspace-top {
    gap: .45rem;
    padding-left: max(.55rem, env(safe-area-inset-left));
    padding-right: max(.55rem, env(safe-area-inset-right))
  }

  .workspace-mobile-brand {
    width: min(6.25rem, 29vw)
  }

  .workspace-top-actions {
    gap: .3rem
  }

  .workspace-mobile-menu-trigger,
  .workspace-mobile-new-chat,
  .workspace-theme {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    flex-basis: 2.5rem
  }

  .workspace-composer {
    gap: .25rem;
    padding-left: .35rem;
    padding-right: .35rem
  }

  .workspace-composer textarea {
    min-width: 0;
    padding-left: .3rem;
    padding-right: .2rem
  }

  .workspace-tools {
    gap: .15rem
  }

  .workspace-welcome h1 {
    font-size: clamp(1.75rem, 9vw, 2.15rem);
    overflow-wrap: anywhere
  }

  .workspace-welcome>p {
    font-size: clamp(1rem, 5.5vw, 1.35rem)
  }

  .admin-head,
  .chatbot-workspace-head {
    padding-left: .625rem;
    padding-right: .625rem;
    gap: .5rem
  }

  .admin-head>span,
  .chatbot-workspace-head>span {
    font-size: .7rem
  }

  .admin-page-title,
  .chatbot-page-title {
    padding-left: .875rem !important;
    padding-right: .875rem !important
  }

  #adminBody,
  .chatbot-workspace-content {
    padding-left: .875rem !important;
    padding-right: .875rem !important
  }

  .assistant-detail-stats,
  .users-overview {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .admin-metrics,
  .chatbot-admin-metrics {
    grid-template-columns: minmax(0, 1fr) !important
  }

  .assistant-detail-head {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .assistant-detail-head>div {
    min-width: 0;
    flex: 1 1 calc(100% - 6rem)
  }
}
/* 2026-08 assistant workspace visual system refinements */
.assistant-brand-avatar,
.assistant-popover button>.assistant-brand-avatar,
.assistant-select .assistant-brand-avatar,
.assistant-icon-preview,
html[data-theme="dark"] .assistant-brand-avatar,
html[data-theme="dark"] .assistant-popover button>.assistant-brand-avatar,
html[data-theme="dark"] .assistant-select .assistant-brand-avatar,
html[data-theme="dark"] .assistant-icon-preview {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.assistant-brand-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: none;
  transform: none;
}

.user-assistant-workspace .assistant-manage-card>p {
  min-height: 2.6rem;
  max-height: 2.6rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.user-assistant-workspace .my-assistant-dashboard-list>a>div {
  min-width: 0;
}

.user-assistant-workspace .my-assistant-dashboard-list b,
.user-assistant-workspace .my-assistant-dashboard-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-assistant-workspace .my-assistant-limit-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(44, 190, 210, .18);
  background:
    radial-gradient(circle at 5% 0%, rgba(37, 188, 208, .12), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(160, 55, 219, .1), transparent 38%),
    rgba(255, 255, 255, .72);
}

.user-assistant-workspace .my-assistant-limit-panel::after {
  content: "";
  position: absolute;
  inset: auto -3rem -4rem auto;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(45, 186, 211, .12);
  border-radius: 50%;
  pointer-events: none;
}

.user-assistant-workspace .my-assistant-limit-panel>* {
  position: relative;
  z-index: 1;
}

.user-assistant-workspace .my-assistant-limit-panel form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: .45rem;
  border: 1px solid rgba(92, 107, 132, .12);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .52);
}

.user-assistant-workspace .my-assistant-limit-panel form button {
  min-width: 8.8rem;
  border: 0;
  border-radius: .65rem;
  background: linear-gradient(110deg, #25bcd2, #5f79e9 53%, #a432d6);
  background-clip: padding-box;
  box-shadow: 0 8px 20px rgba(84, 91, 207, .2);
}

.my-assistant-admin-access {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .7rem;
  padding: .7rem;
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: .8rem;
  color: #087b59;
  background: rgba(16, 185, 129, .08);
}

.my-assistant-admin-access>i {
  font-size: 1rem;
}

.my-assistant-admin-access>div {
  display: grid;
  gap: .12rem;
}

.my-assistant-admin-access b {
  font-size: .72rem;
}

.my-assistant-admin-access small {
  font-size: .62rem;
}

.my-assistant-section-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .72fr) minmax(0, 1fr);
  grid-auto-flow: row;
  gap: .8rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.my-assistant-section-dashboard>.assistants-lead,
.my-assistant-section-dashboard>.my-assistant-dashboard-metrics {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

.user-assistant-workspace .my-assistant-section-dashboard>.my-assistant-wallet-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .72fr) minmax(0, 1fr);
  gap: .8rem;
  order: 1;
  margin-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.my-assistant-wallet-grid .wallet-topup-panel {
  --tone: 34, 184, 207;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "heading" "description" "controls";
  align-items: start;
  box-sizing: border-box;
  grid-column: 1 / 3;
}

.my-assistant-wallet-grid .wallet-history-panel {
  --tone: 34, 184, 137;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  grid-column: 3;
}

.my-assistant-wallet-grid .wallet-topup-panel>.overview-panel-head {
  width: 100%;
  align-self: auto;
}

.my-assistant-wallet-grid .wallet-topup-panel>.overview-panel-head h3 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.my-assistant-wallet-grid .wallet-topup-panel>p {
  margin-top: .25rem;
}

.my-assistant-wallet-grid .wallet-topup-controls {
  width: 100%;
  min-width: 0;
  max-width: 32rem;
  margin-top: .65rem;
  grid-template-columns: minmax(0, 1fr) max-content;
  box-sizing: border-box;
}

.my-assistant-wallet-grid .wallet-topup-controls label,
.my-assistant-wallet-grid .wallet-topup-controls input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.my-assistant-wallet-grid .wallet-topup-controls button {
  max-width: 100%;
  box-sizing: border-box;
}

.my-assistant-section-dashboard>.my-assistant-dashboard-grid {
  display: contents;
}

.my-assistant-section-dashboard>.my-assistant-dashboard-grid>article:first-child {
  order: 2;
  min-width: 0;
  max-width: 100%;
  min-height: 12rem;
}

.my-assistant-section-dashboard>.my-assistant-dashboard-grid>.my-assistant-capacity-summary {
  order: 4;
  min-width: 0;
  max-width: 100%;
  min-height: 12rem;
}

.my-assistant-section-dashboard>.my-assistant-dashboard-shortcuts,
.my-assistant-section-dashboard>.overview-shortcuts {
  order: 3;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: 1fr;
  align-content: stretch;
  gap: .65rem;
  margin: 0;
}

.my-assistant-section-dashboard>.overview-shortcuts button {
  min-height: 5.65rem;
}

.user-assistant-workspace .admin-page-title h1 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.user-assistant-workspace .my-assistant-dashboard-empty b {
  font-size: .78rem;
}

.user-assistant-workspace .my-assistant-dashboard-empty span {
  font-size: .68rem;
}

.workspace-usermenu button>i {
  transition: transform .18s ease, box-shadow .18s ease;
}

.workspace-usermenu button:hover>i {
  transform: translateY(-1px) scale(1.04);
}

.workspace-usermenu button[onclick*="#settings"]>i {
  color: #269ab7;
  background: rgba(34, 184, 207, .13);
  box-shadow: 0 5px 14px rgba(34, 184, 207, .12);
}

.workspace-usermenu button[onclick*="#chatbots"]>i {
  color: #4e79e7;
  background: rgba(67, 112, 226, .13);
  box-shadow: 0 5px 14px rgba(67, 112, 226, .12);
}

.workspace-usermenu button[onclick*="#my-assistants"]>i {
  color: #a64bdb;
  background: rgba(164, 58, 217, .13);
  box-shadow: 0 5px 14px rgba(164, 58, 217, .12);
}

.workspace-usermenu button[onclick*="#subscription"]>i {
  color: #dc8a1d;
  background: rgba(245, 158, 11, .14);
  box-shadow: 0 5px 14px rgba(245, 158, 11, .12);
}

.workspace-usermenu button[onclick*="#admin"]>i {
  color: #22a875;
  background: rgba(16, 185, 129, .13);
  box-shadow: 0 5px 14px rgba(16, 185, 129, .12);
}

.workspace-usermenu button[onclick*="#settings"] b { color: #278da7; }
.workspace-usermenu button[onclick*="#chatbots"] b { color: #4e70ca; }
.workspace-usermenu button[onclick*="#my-assistants"] b { color: #9850bd; }
.workspace-usermenu button[onclick*="#subscription"] b { color: #c57b1b; }
.workspace-usermenu button[onclick*="#admin"] b { color: #178b64; }

.subscription-benefits article:nth-child(1)>i {
  color: #168ca7;
  background: rgba(34, 190, 211, .14);
}

.subscription-benefits article:nth-child(2)>i {
  color: #d18019;
  background: rgba(245, 158, 11, .14);
}

.subscription-benefits article:nth-child(3)>i {
  color: #b13e83;
  background: rgba(236, 72, 153, .13);
}

.subscription-benefits article:nth-child(1) b { color: #168ca7; }
.subscription-benefits article:nth-child(2) b { color: #c87812; }
.subscription-benefits article:nth-child(3) b { color: #aa387b; }

.subscription-benefits article:nth-child(1) { border-top-color: rgba(34, 190, 211, .4); }
.subscription-benefits article:nth-child(2) { border-top-color: rgba(245, 158, 11, .4); }
.subscription-benefits article:nth-child(3) { border-top-color: rgba(236, 72, 153, .38); }

.feature-showcase .feature-card:nth-child(3n+1),
.capability-block .capability-card:nth-child(3n+1),
.workflow-step:nth-child(3n+1) { --landing-accent: #22b8cf; --landing-soft: rgba(34,184,207,.12); }
.feature-showcase .feature-card:nth-child(3n+2),
.capability-block .capability-card:nth-child(3n+2),
.workflow-step:nth-child(3n+2) { --landing-accent: #f59e0b; --landing-soft: rgba(245,158,11,.12); }
.feature-showcase .feature-card:nth-child(3n),
.capability-block .capability-card:nth-child(3n),
.workflow-step:nth-child(3n) { --landing-accent: #ec4899; --landing-soft: rgba(236,72,153,.11); }

.feature-showcase .feature-card,
.capability-block .capability-card,
.workflow-step {
  border-top-color: color-mix(in srgb, var(--landing-accent) 45%, transparent);
  background-image: linear-gradient(145deg, var(--landing-soft), transparent 48%);
}

.feature-showcase .feature-card i,
.capability-block .capability-icon,
.workflow-step .step-icon,
.workflow-step .step-result i {
  color: var(--landing-accent) !important;
}

html[data-theme="dark"] .user-assistant-workspace .my-assistant-limit-panel {
  background:
    radial-gradient(circle at 5% 0%, rgba(37, 188, 208, .13), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(160, 55, 219, .11), transparent 38%),
    #202024;
}

html[data-theme="dark"] .user-assistant-workspace .my-assistant-limit-panel form {
  background: rgba(255, 255, 255, .035);
}

html[data-theme="dark"] .user-assistant-workspace .overview-panel-head>span,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-capacity-summary>a,
html[data-theme="dark"] .user-assistant-workspace .my-assistant-dashboard-empty i,
html[data-theme="dark"] .plans-frame .choice-price strong,
html[data-theme="dark"] .pricing-showcase .simple-plan .price,
html[data-theme="dark"] .pricing-showcase .plan-badge,
html[data-theme="dark"] .plans-frame .admin-approved {
  color: #f2eff8 !important;
}

html[data-theme="dark"] .workspace-usermenu button b {
  filter: brightness(1.32) saturate(.88);
}

html[data-theme="dark"] .subscription-benefits article:nth-child(1)>i { color: #62d7e8; }
html[data-theme="dark"] .subscription-benefits article:nth-child(2)>i { color: #ffc35d; }
html[data-theme="dark"] .subscription-benefits article:nth-child(3)>i { color: #ff83bd; }
html[data-theme="dark"] .subscription-benefits article:nth-child(1) b { color: #8ae6f1; }
html[data-theme="dark"] .subscription-benefits article:nth-child(2) b { color: #ffd17f; }
html[data-theme="dark"] .subscription-benefits article:nth-child(3) b { color: #ff9ccc; }

@media (max-width: 1180px) {
  .my-assistant-section-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .7fr);
  }

  .my-assistant-section-dashboard>.my-assistant-dashboard-grid>article:first-child {
    grid-column: 1;
  }

  .my-assistant-section-dashboard>.overview-shortcuts {
    grid-column: 2;
  }

  .my-assistant-section-dashboard>.my-assistant-dashboard-grid>.my-assistant-capacity-summary {
    grid-column: 1 / -1;
  }

  .user-assistant-workspace .my-assistant-section-dashboard>.my-assistant-wallet-grid {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .7fr);
  }

  .my-assistant-wallet-grid .wallet-topup-panel {
    grid-column: 1;
  }

  .my-assistant-wallet-grid .wallet-history-panel {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .my-assistant-section-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-assistant-section-dashboard>.my-assistant-dashboard-grid>article:first-child,
  .my-assistant-section-dashboard>.overview-shortcuts,
  .my-assistant-section-dashboard>.my-assistant-dashboard-grid>.my-assistant-capacity-summary {
    grid-column: 1;
  }

  .my-assistant-wallet-grid .wallet-topup-controls {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .my-assistant-wallet-grid .wallet-topup-controls button {
    width: 100%;
  }

  .user-assistant-workspace .my-assistant-section-dashboard>.my-assistant-wallet-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-assistant-wallet-grid .wallet-topup-panel,
  .my-assistant-wallet-grid .wallet-history-panel {
    grid-column: 1;
  }

  .user-assistant-workspace .my-assistant-limit-panel form {
    grid-template-columns: 1fr;
  }

  .my-assistant-pending-request {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Keep the chat theme control visible in the workspace header. */
.workspace-top>.workspace-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Prevent long assistant names and descriptions from escaping the picker. */
.assistant-popover {
  box-sizing: border-box;
  max-width: min(16.875rem, calc(100vw - 4rem));
}

.assistant-popover button {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.assistant-popover button>span {
  width: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
}

.assistant-popover button b,
.assistant-popover button small {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-popover button>.assistant-brand-avatar,
.assistant-popover button>i:last-child {
  flex: 0 0 auto;
}

@media(max-width: 620px) {
  .assistant-popover {
    width: min(16.25rem, calc(100vw - 4rem));
    max-width: calc(100vw - 4rem);
  }
}

/* Mobile chat stays anchored to the bottom and uses a one-line composer. */
@media(max-width: 760px) {
  .is-new-conversation .workspace-composer-wrap,
  .sidebar-collapsed.is-new-conversation .workspace-composer-wrap,
  .has-conversation .workspace-composer-wrap {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    padding: .6rem max(.65rem, env(safe-area-inset-right)) max(1.75rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));
    background: linear-gradient(transparent, var(--workspace-mobile-composer-bg, #f7f7f4) 24%);
  }

  html[data-theme="dark"] .workspace-composer-wrap {
    --workspace-mobile-composer-bg: #171719;
  }

  .workspace-composer {
    min-height: 3.35rem;
    height: 3.35rem;
    display: flex;
    align-items: center;
    padding: .35rem .4rem;
    border-radius: 1rem;
  }

  .workspace-composer textarea {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: 2.5rem !important;
    padding: .58rem .4rem !important;
    line-height: 1.3rem;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden !important;
  }

  .workspace-suggestions {
    display: none !important;
  }

  .workspace-chat-area,
  .is-new-conversation .workspace-chat-area {
    padding-bottom: 7.5rem;
  }

  .admin-sidebar .admin-sidebar-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .admin-sidebar .admin-return {
    width: 100% !important;
    min-height: 2.65rem;
    justify-content: flex-start !important;
    text-align: left;
    padding: 0 .8rem !important;
  }

  .admin-sidebar .admin-return span {
    width: auto !important;
    max-width: none !important;
    display: inline !important;
    white-space: nowrap;
  }

  .admin-sidebar .admin-profile {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    text-align: left;
  }
}

/* Account session management */
.session-setting-card .setting-card-head {
  margin-bottom: 0.875rem;
}

.session-setting-card .setting-card-head>div {
  min-width: 0;
  flex: 1;
}

.session-setting-card .setting-card-head>span:first-child {
  background: linear-gradient(135deg, rgba(25, 181, 205, .14), rgba(66, 117, 217, .14));
  color: #375da8;
}

.session-setting-card .setting-card-head>.session-count {
  width: auto;
  height: auto;
  min-width: max-content;
  padding: 0.4rem 0.575rem;
  display: inline-flex;
  border-radius: 999px;
  background: rgba(27, 170, 141, .09);
  color: #158c75;
  font-size: 0.46875rem;
  font-weight: 800;
  line-height: 1;
}

.session-intro {
  padding: 0.75rem 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  border: 1px solid rgba(67, 80, 104, .09);
  border-radius: 0.6875rem;
  background: rgba(75, 87, 108, .025);
}

.session-intro b,
.session-intro small {
  display: block;
}

.session-intro b {
  color: #344055;
  font-size: 0.53125rem;
}

.session-intro small {
  max-width: 26rem;
  margin-top: 0.25rem;
  color: #818c9d;
  font-size: 0.40625rem;
  line-height: 1.5;
}

.session-intro>button,
.session-empty>button {
  min-height: 2rem;
  padding: 0 0.6875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  border: 1px solid rgba(190, 65, 86, .14);
  border-radius: 0.5625rem;
  background: rgba(190, 65, 86, .045);
  color: #ad3d52;
  font: inherit;
  font-size: 0.4375rem;
  font-weight: 800;
  cursor: pointer;
}

.session-intro>button:hover,
.session-empty>button:hover {
  background: rgba(190, 65, 86, .09);
}

.session-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6875rem;
}

.session-item {
  min-height: 4.625rem;
  padding: 0.625rem 0.6875rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6875rem;
  border: 1px solid rgba(67, 80, 104, .09);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, .35);
}

.session-item.is-current {
  border-color: rgba(27, 170, 141, .2);
  background: rgba(27, 170, 141, .035);
}

.session-device-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: rgba(66, 117, 217, .08);
  color: #4266aa;
  font-size: 0.6875rem;
}

.session-item.is-current .session-device-icon {
  background: rgba(27, 170, 141, .1);
  color: #168f77;
}

.session-item-copy {
  min-width: 0;
}

.session-item-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.session-item-title b {
  color: #344055;
  font-size: 0.5625rem;
}

.session-item-title>span {
  padding: 0.25rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  background: rgba(27, 170, 141, .09);
  color: #158c75;
  font-size: 0.375rem;
  font-weight: 850;
}

.session-item-title>span i {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: currentColor;
}

.session-item-copy>small,
.session-item-copy>em {
  display: block;
  color: #8792a2;
  font-size: 0.40625rem;
  font-style: normal;
}

.session-item-copy>small {
  margin-top: 0.2rem;
}

.session-item-copy>em {
  margin-top: 0.3125rem;
}

.session-facts {
  margin-top: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem 0.75rem;
  color: #697588;
  font-size: 0.40625rem;
}

.session-facts span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.session-facts i {
  color: #7385a4;
  font-size: 0.375rem;
}

.session-end-button {
  min-height: 1.9375rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid rgba(190, 65, 86, .13);
  border-radius: 0.5625rem;
  background: rgba(190, 65, 86, .035);
  color: #ad3d52;
  font: inherit;
  font-size: 0.40625rem;
  font-weight: 800;
  cursor: pointer;
}

.session-end-button:hover {
  background: rgba(190, 65, 86, .09);
}

.session-empty {
  min-height: 3.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px dashed rgba(67, 80, 104, .12);
  border-radius: 0.6875rem;
  color: #8792a2;
  font-size: 0.46875rem;
  text-align: center;
}

.session-empty.is-error {
  color: #a64a5a;
}

.session-setting-card.is-loading {
  opacity: .65;
  pointer-events: none;
}

html[data-theme="dark"] .session-setting-card .setting-card-head>span:first-child,
html[data-theme="dark"] .session-device-icon {
  background: #343434;
  color: #dedede;
}

html[data-theme="dark"] .session-intro,
html[data-theme="dark"] .session-item {
  border-color: rgba(255, 255, 255, .08);
  background: #292929;
}

html[data-theme="dark"] .session-item.is-current {
  border-color: rgba(79, 194, 160, .2);
  background: #2b302e;
}

html[data-theme="dark"] .session-intro b,
html[data-theme="dark"] .session-item-title b {
  color: #e5e5e5;
}

html[data-theme="dark"] .session-intro small,
html[data-theme="dark"] .session-item-copy>small,
html[data-theme="dark"] .session-item-copy>em,
html[data-theme="dark"] .session-facts {
  color: #929292;
}

html[data-theme="dark"] .session-facts i {
  color: #aaa;
}

html[data-theme="dark"] .session-intro>button,
html[data-theme="dark"] .session-end-button,
html[data-theme="dark"] .session-empty>button {
  border-color: rgba(238, 157, 170, .15);
  background: #34282a;
  color: #ec9daa;
}

html[data-theme="dark"] .session-empty {
  border-color: rgba(255, 255, 255, .09);
  color: #929292;
}

@media(max-width:600px) {
  .session-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-intro>button {
    width: 100%;
  }

  .session-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .session-end-button {
    width: 100%;
    grid-column: 2;
  }

  .session-facts {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3125rem;
  }

  .session-empty.is-error {
    flex-wrap: wrap;
  }
}

/* Readable, wide and tabbed account settings */
.settings-page-content {
  width: min(70rem, calc(100% - 3rem));
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.account-settings-title {
  margin-bottom: 1.125rem;
}

.account-settings-title>span {
  font-size: 0.625rem;
  letter-spacing: .16em;
}

.account-settings-title h1 {
  margin: 0.375rem 0 0.4375rem;
  font-size: 1.875rem;
}

.account-settings-title p {
  font-size: 0.8125rem;
  line-height: 1.6;
}

.settings-tabs {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.375rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(89, 129, 244, .24) transparent;
  border: 1px solid rgba(66, 79, 102, .1);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 14px 38px rgba(40, 49, 70, .04);
}

.settings-tabs button {
  --settings-tab-rgb: 26, 178, 203;
  --settings-tab-rgb-secondary: 69, 142, 255;
  --settings-tab-accent: #159db8;
  --settings-tab-accent-secondary: #397ee8;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.5625rem 0.6875rem;
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5625rem;
  border: 1px solid transparent;
  border-radius: 0.875rem;
  background: transparent;
  color: #647086;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.settings-tabs button[data-settings-tab="security"] {
  --settings-tab-rgb: 36, 190, 137;
  --settings-tab-rgb-secondary: 21, 176, 190;
  --settings-tab-accent: #1a9d70;
  --settings-tab-accent-secondary: #1496a4;
}

.settings-tabs button[data-settings-tab="sessions"] {
  --settings-tab-rgb: 246, 166, 35;
  --settings-tab-rgb-secondary: 244, 105, 53;
  --settings-tab-accent: #d9890d;
  --settings-tab-accent-secondary: #df6338;
}

.settings-tabs button[data-settings-tab="billing"] {
  --settings-tab-rgb: 89, 129, 244;
  --settings-tab-rgb-secondary: 163, 73, 221;
  --settings-tab-accent: #4d75dd;
  --settings-tab-accent-secondary: #9749cf;
}

.settings-tabs button[data-settings-tab="conversations"] {
  --settings-tab-rgb: 236, 76, 151;
  --settings-tab-rgb-secondary: 244, 111, 80;
  --settings-tab-accent: #cf4385;
  --settings-tab-accent-secondary: #dd6547;
}

.settings-tabs button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--settings-tab-rgb), .1), rgba(var(--settings-tab-rgb-secondary), .055));
  opacity: 0;
  transition: opacity .24s ease;
}

.settings-tabs button>* {
  position: relative;
  z-index: 2;
}

.settings-tabs button>i {
  width: 2.125rem;
  height: 2.125rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--settings-tab-rgb), .14);
  border-radius: 0.6875rem;
  background: linear-gradient(135deg, rgba(var(--settings-tab-rgb), .13), rgba(var(--settings-tab-rgb-secondary), .08));
  color: var(--settings-tab-accent);
  font-size: 0.75rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, .45);
  transition: color .28s ease, background .28s ease, border-color .28s ease, transform .28s ease;
}

.settings-tabs button>span,
.settings-tabs button b,
.settings-tabs button small {
  min-width: 0;
  display: block;
}

.settings-tabs button b {
  overflow: hidden;
  color: #344055;
  font-size: 0.6875rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tabs button small {
  margin-top: 0.1875rem;
  overflow: hidden;
  color: #8a94a4;
  font-size: 0.5rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tabs button em {
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(var(--settings-tab-rgb), .14);
  background: rgba(var(--settings-tab-rgb), .09);
  color: var(--settings-tab-accent);
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: 850;
}

.settings-tabs button:hover {
  border-color: rgba(var(--settings-tab-rgb), .18);
  transform: translateY(-1px);
}

.settings-tabs button:hover::before {
  opacity: .56;
}

.settings-tabs button.active {
  border-color: rgba(var(--settings-tab-rgb), .3);
  background: rgba(var(--settings-tab-rgb), .035);
  color: var(--settings-tab-accent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 8px 22px rgba(var(--settings-tab-rgb), .055);
}

.settings-tabs button.active::before {
  opacity: 1;
}

.settings-tabs button.active>i {
  border-color: rgba(var(--settings-tab-rgb), .25);
  background: linear-gradient(135deg, rgba(var(--settings-tab-rgb), .24), rgba(var(--settings-tab-rgb-secondary), .17));
  color: var(--settings-tab-accent);
  transform: none;
}

.settings-tabs button.active b {
  color: color-mix(in srgb, var(--settings-tab-accent) 32%, #273246);
}

.settings-tabs button.active em {
  border-color: rgba(var(--settings-tab-rgb), .2);
  background: rgba(var(--settings-tab-rgb), .14);
  color: var(--settings-tab-accent);
}

.settings-tabs button:focus-visible {
  outline: 3px solid rgba(36, 188, 213, .24);
  outline-offset: 2px;
}

.account-settings-stack.single-column {
  display: block;
}

.settings-tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  animation: settings-panel-in .22s ease both;
}

.settings-tab-panel[hidden] {
  display: none !important;
}

.settings-tab-panel .account-setting-card {
  --settings-card-rgb: 26, 178, 203;
  --settings-card-rgb-secondary: 69, 142, 255;
  --settings-card-accent: #159db8;
  --settings-card-accent-secondary: #397ee8;
  position: relative;
  border-color: rgba(var(--settings-card-rgb), .17);
  border-radius: 1.25rem;
  box-shadow: 0 14px 38px rgba(var(--settings-card-rgb), .045);
}

.settings-tab-panel .account-setting-card::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: 1.35rem;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--settings-card-accent), var(--settings-card-accent-secondary));
  opacity: .72;
}

#passwordForm {
  --settings-card-rgb: 62, 128, 238;
  --settings-card-rgb-secondary: 80, 98, 220;
  --settings-card-accent: #397ad4;
  --settings-card-accent-secondary: #4e5dcc;
}

.email-security-card {
  --settings-card-rgb: 20, 184, 166;
  --settings-card-rgb-secondary: 33, 196, 118;
  --settings-card-accent: #159b8d;
  --settings-card-accent-secondary: #1aa269;
}

.otp-setting-card {
  --settings-card-rgb: 245, 158, 11;
  --settings-card-rgb-secondary: 244, 105, 53;
  --settings-card-accent: #d88a0d;
  --settings-card-accent-secondary: #de6337;
}

.passkey-setting-card {
  --settings-card-rgb: 236, 72, 153;
  --settings-card-rgb-secondary: 193, 80, 203;
  --settings-card-accent: #cf4686;
  --settings-card-accent-secondary: #a84db7;
}

.platform-usage-card {
  --settings-card-rgb: 14, 165, 233;
  --settings-card-rgb-secondary: 20, 184, 166;
  --settings-card-accent: #168fc4;
  --settings-card-accent-secondary: #159b8d;
}

.billing-setting-card {
  --settings-card-rgb: 89, 129, 244;
  --settings-card-rgb-secondary: 163, 73, 221;
  --settings-card-accent: #4d75dd;
  --settings-card-accent-secondary: #9749cf;
}

.session-setting-card {
  --settings-card-rgb: 249, 133, 35;
  --settings-card-rgb-secondary: 239, 90, 55;
  --settings-card-accent: #df781a;
  --settings-card-accent-secondary: #dc5739;
}

.archived-conversations-card {
  --settings-card-rgb: 14, 165, 233;
  --settings-card-rgb-secondary: 56, 189, 190;
  --settings-card-accent: #118bbb;
  --settings-card-accent-secondary: #2c9fa2;
}

.conversation-danger-card {
  --settings-card-rgb: 239, 68, 68;
  --settings-card-rgb-secondary: 244, 105, 53;
  --settings-card-accent: #d84848;
  --settings-card-accent-secondary: #dc633b;
}

.settings-tab-panel .account-setting-card .setting-card-head>span:first-child {
  border: 1px solid rgba(var(--settings-card-rgb), .18);
  background: linear-gradient(135deg, rgba(var(--settings-card-rgb), .18), rgba(var(--settings-card-rgb-secondary), .1));
  color: var(--settings-card-accent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 6px 18px rgba(var(--settings-card-rgb), .08);
}

.settings-tab-panel .account-setting-card .setting-card-head small,
.settings-tab-panel .account-setting-card .otp-heading small {
  color: var(--settings-card-accent);
}

.settings-tab-panel .account-setting-card .setting-card-head h3,
.settings-tab-panel .account-setting-card .otp-heading b {
  color: color-mix(in srgb, var(--settings-card-accent) 24%, #273246);
}

.settings-tab-panel .account-setting-card .setting-card-head>span:first-child i,
.settings-tab-panel .account-setting-card .archived-empty i,
.settings-tab-panel .account-setting-card .passkey-item>span i {
  color: var(--settings-card-accent);
}

.platform-usage-grid article:nth-child(1)>span {
  color: #d58a0c;
  background: rgba(245, 158, 11, .11);
}

.platform-usage-grid article:nth-child(2)>span {
  color: #df6338;
  background: rgba(244, 105, 53, .11);
}

.platform-usage-grid article:nth-child(3)>span {
  color: #cf4385;
  background: rgba(236, 76, 151, .1);
}

.platform-usage-grid article:nth-child(4)>span {
  color: #168fc4;
  background: rgba(14, 165, 233, .1);
}

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

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

.account-settings-stack.single-column .account-setting-card {
  width: 100%;
  padding: 1.1875rem 1.3125rem;
  border-radius: 1rem;
}

.account-settings-stack .setting-card-head {
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.account-settings-stack .setting-card-head>span {
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 2.375rem;
  border-radius: 0.6875rem;
  font-size: 0.75rem;
}

.account-settings-stack .setting-card-head small {
  font-size: 0.5625rem;
  line-height: 1.3;
}

.account-settings-stack .setting-card-head h3 {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.3;
}

.account-settings-stack .setting-fields {
  gap: 0.75rem;
}

.account-settings-stack .setting-fields label,
.account-settings-stack .profile-personalization>label,
.account-settings-stack .avatar-change-control>span {
  font-size: 0.6875rem;
}

.account-settings-stack .setting-fields input,
.account-settings-stack .account-field select,
.account-settings-stack .profile-personalization select {
  height: 2.625rem;
  margin-top: 0.375rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}

.account-settings-stack .avatar-change-control>div {
  height: 2.625rem;
  margin-top: 0.375rem;
  padding: 0.25rem 0.4375rem;
}

.account-settings-stack .current-profile-avatar {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
}

.account-settings-stack .avatar-change-control button {
  display: inline-flex;
  height: 2rem;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  line-height: 1;
}

.account-settings-stack .avatar-change-control button i {
  margin-right: 0;
}

.account-settings-stack .setting-primary,
.account-settings-stack .setting-secondary,
.account-settings-stack .setting-danger {
  min-height: 2.375rem;
  padding: 0 0.875rem;
  font-size: 0.6875rem;
}

.account-settings-stack .security-row {
  padding: 0.6875rem 0;
}

.account-settings-stack .security-row b {
  font-size: 0.75rem;
}

.account-settings-stack .security-row small {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  line-height: 1.5;
}

.account-settings-stack .setting-status {
  padding: 0.4375rem 0.625rem;
  font-size: 0.625rem;
}

.account-settings-stack .otp-accordion-toggle {
  min-height: 5.75rem;
  padding: 1rem 1.1875rem;
}

.account-settings-stack .otp-heading small {
  font-size: 0.5625rem;
}

.account-settings-stack .otp-heading b {
  font-size: 0.875rem;
}

.account-settings-stack .otp-heading em,
.otp-toggle-label {
  font-size: 0.625rem;
}

.account-settings-stack .otp-accordion-panel {
  padding: 1rem 1.1875rem 1.1875rem;
}

.otp-panel-intro {
  padding: 0.75rem 0.875rem;
}

.otp-panel-intro b,
.account-settings-stack .otp-option b {
  font-size: 0.75rem;
}

.otp-panel-intro small,
.account-settings-stack .otp-option small {
  margin-top: 0.25rem;
  font-size: 0.625rem;
  line-height: 1.45;
}

.account-settings-stack .otp-option {
  min-height: 4.75rem;
  padding: 0.8125rem 0.9375rem;
}

.passkey-intro {
  padding: 0.8125rem 0.9375rem;
}

.passkey-intro b,
.passkey-item b {
  font-size: 0.75rem;
}

.passkey-intro small,
.passkey-item small {
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  line-height: 1.5;
}

.passkey-intro>button {
  height: 2.375rem;
  padding: 0 0.875rem;
  font-size: 0.625rem;
}

.passkey-item {
  min-height: 4.125rem;
  padding: 0.625rem 0.75rem;
}

.passkey-item>span {
  width: 2.375rem;
  height: 2.375rem;
}

.passkey-empty,
.passkey-loading,
.archived-empty {
  font-size: 0.6875rem;
}

.passkey-setting-card .setting-card-head>.passkey-support-status {
  padding: 0.4375rem 0.625rem !important;
  font-size: 0.625rem !important;
}

.platform-usage-card .setting-card-head>em {
  max-width: 22rem;
  font-size: 0.6875rem;
}

.platform-usage-grid small {
  font-size: 0.625rem;
}

.platform-usage-grid b {
  font-size: 1.0625rem;
}

.archived-conversation-list article {
  min-height: 4.125rem;
  padding: 0.625rem 0.75rem;
}

.archived-conversation-list b {
  font-size: 0.75rem;
}

.archived-conversation-list small,
.archived-conversation-list button,
.conversation-danger-card>p {
  font-size: 0.625rem;
  line-height: 1.5;
}

.archived-conversation-list button {
  height: 2.25rem;
  padding: 0 0.75rem;
}

.session-setting-card .setting-card-head>.session-count {
  padding: 0.4375rem 0.625rem;
  font-size: 0.625rem;
}

.session-intro {
  padding: 0.8125rem 0.9375rem;
  border-radius: 0.75rem;
}

.session-intro b {
  font-size: 0.75rem;
}

.session-intro small {
  max-width: 42rem;
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  line-height: 1.55;
}

.session-intro>button,
.session-empty>button {
  min-height: 2.375rem;
  padding: 0 0.75rem;
  font-size: 0.625rem;
}

.session-list {
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.session-item {
  min-height: 5.875rem;
  padding: 0.8125rem 0.9375rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8125rem;
  border-radius: 0.75rem;
}

.session-device-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

.session-item-title {
  gap: 0.625rem;
}

.session-item-title b {
  font-size: 0.8125rem;
}

.session-item-title>span {
  padding: 0.25rem 0.4375rem;
  font-size: 0.5625rem;
}

.session-item-copy>small {
  margin-top: 0.25rem;
  font-size: 0.625rem;
}

.session-facts {
  margin-top: 0.5rem;
  gap: 0.4375rem 1rem;
  font-size: 0.625rem;
}

.session-facts i {
  font-size: 0.625rem;
}

.session-item-copy>em {
  margin-top: 0.4375rem;
  font-size: 0.5625rem;
}

.session-end-button {
  min-height: 2.375rem;
  padding: 0 0.75rem;
  font-size: 0.625rem;
}

.session-empty {
  min-height: 4.25rem;
  font-size: 0.6875rem;
}

.billing-setting-card .setting-card-head {
  align-items: center;
}

.billing-debt,
.billing-clear {
  margin-left: auto;
  min-height: 2.125rem;
  padding: 0 0.6875rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.75rem;
  white-space: nowrap;
}

.billing-debt {
  border: 1px solid rgba(239, 68, 68, .16);
  background: rgba(239, 68, 68, .065);
  text-align: left;
}

.billing-debt small {
  color: #c44a4a !important;
  font-size: 0.5rem !important;
  letter-spacing: .09em;
}

.billing-debt b {
  margin: 0 0 0 0.125rem;
  color: #bd3e48;
  font-size: 0.75rem;
}

.billing-clear {
  border: 1px solid rgba(16, 185, 129, .14);
  background: rgba(16, 185, 129, .075);
  color: #168a69;
  font-size: 0.625rem;
  font-weight: 800;
}

.billing-cycle {
  margin-bottom: 1rem;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.625rem;
  border: 1px solid rgba(89, 129, 244, .12);
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgba(89, 129, 244, .055), rgba(163, 73, 221, .035));
}

.billing-cycle>span {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.875rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
}

.billing-cycle>span>i {
  width: 1.875rem;
  height: 1.875rem;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(89, 129, 244, .1);
  color: #4d75dd;
  font-size: 0.6875rem;
}

.billing-cycle>span:nth-of-type(2)>i {
  background: rgba(245, 158, 11, .11);
  color: #d88a0d;
}

.billing-cycle>span:nth-of-type(3)>i {
  background: rgba(16, 185, 129, .1);
  color: #168a69;
}

.billing-cycle>span b,
.billing-cycle>span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-cycle>span b {
  color: #3a4659;
  font-size: 0.625rem;
}

.billing-cycle>span small {
  margin-top: 0.125rem;
  color: #8490a2;
  font-size: 0.5rem;
}

.billing-cycle>i {
  color: rgba(89, 129, 244, .45);
  font-size: 0.5625rem;
}

.billing-section-head {
  margin: 0.125rem 0 0.5625rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.billing-section-head small,
.billing-section-head h4 {
  display: block;
}

.billing-section-head small {
  color: #4d75dd;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.billing-section-head h4 {
  margin: 0.1875rem 0 0;
  color: #354054;
  font-size: 0.75rem;
}

.billing-section-head>span {
  color: #8993a3;
  font-size: 0.5625rem;
  font-weight: 750;
}

.billing-subscriptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.billing-subscription {
  min-width: 0;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid rgba(66, 79, 102, .1);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, .45);
}

.billing-subscription.awaiting-payment {
  border-color: rgba(245, 158, 11, .2);
  background: rgba(245, 158, 11, .045);
}

.billing-subscription.awaiting-payment>div>small {
  color: #c47d0c;
}

.billing-plan-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.6875rem;
  background: rgba(89, 129, 244, .11);
  color: #4d75dd;
  font-size: 0.75rem;
}

.billing-plan-icon.chatbot {
  background: rgba(163, 73, 221, .1);
  color: #9749cf;
}

.billing-subscription>div small,
.billing-subscription>div b,
.billing-subscription>div em {
  display: block;
}

.billing-subscription>div small {
  color: #168a69;
  font-size: 0.4375rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.billing-subscription>div b {
  margin-top: 0.1875rem;
  color: #354054;
  font-size: 0.6875rem;
}

.billing-subscription>div em {
  margin-top: 0.125rem;
  color: #778296;
  font-size: 0.5625rem;
  font-style: normal;
}

.billing-subscription dl {
  margin: 0;
  display: flex;
  gap: 0.875rem;
}

.billing-subscription dl div {
  text-align: right;
}

.billing-subscription dt,
.billing-subscription dd {
  margin: 0;
}

.billing-subscription dt {
  color: #929baa;
  font-size: 0.4375rem;
}

.billing-subscription dd {
  margin-top: 0.1875rem;
  color: #4b5568;
  font-size: 0.5625rem;
  font-weight: 800;
}

.invoice-history-head {
  margin-top: 1rem;
}

.billing-invoices {
  display: grid;
  gap: 0.625rem;
}

.billing-pagination {
  padding-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4375rem;
}

.billing-pagination button {
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(89, 129, 244, .16);
  border-radius: 0.5625rem;
  background: rgba(89, 129, 244, .06);
  color: #4d75dd;
  cursor: pointer;
}

.billing-pagination button:disabled {
  opacity: .35;
  cursor: default;
}

.billing-pagination span {
  min-width: 2.5rem;
  color: #7e899a;
  font-size: 0.5625rem;
  font-weight: 800;
  text-align: center;
}

.billing-invoice {
  overflow: hidden;
  border: 1px solid rgba(66, 79, 102, .1);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, .42);
}

.billing-invoice.overdue {
  border-color: rgba(239, 68, 68, .2);
  background: rgba(239, 68, 68, .025);
}

.billing-invoice-head {
  padding: 0.6875rem 0.75rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5625rem;
  border-bottom: 1px solid rgba(66, 79, 102, .08);
}

.billing-invoice-head>span {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.5625rem;
  background: rgba(89, 129, 244, .09);
  color: #4d75dd;
  font-size: 0.6875rem;
}

.billing-invoice-head small,
.billing-invoice-head b {
  display: block;
}

.billing-invoice-head small {
  color: #929baa;
  font-size: 0.5rem;
}

.billing-invoice-head b {
  margin-top: 0.125rem;
  color: #354054;
  font-size: 0.6875rem;
}

.billing-invoice-head>em {
  padding: 0.3125rem 0.5rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, .09);
  color: #c47d0c;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 850;
}

.billing-invoice.overdue .billing-invoice-head>em {
  background: rgba(239, 68, 68, .1);
  color: #c7464d;
}

.billing-invoice.paid .billing-invoice-head>em {
  background: rgba(16, 185, 129, .09);
  color: #168a69;
}

.billing-invoice-dates {
  padding: 0.625rem 0.75rem;
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 0.75rem;
}

.billing-invoice-dates span small,
.billing-invoice-dates span b {
  display: block;
}

.billing-invoice-dates span small {
  color: #929baa;
  font-size: 0.5rem;
}

.billing-invoice-dates span b {
  margin-top: 0.1875rem;
  color: #4b5568;
  font-size: 0.5625rem;
}

.billing-invoice-total {
  padding: 0.5625rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(66, 79, 102, .07);
  background: rgba(66, 79, 102, .025);
}

.billing-invoice-total span small,
.billing-invoice-total span b,
.billing-invoice-total strong small {
  display: block;
}

.billing-invoice-total small {
  color: #929baa;
  font-size: 0.46875rem;
  font-weight: 700;
}

.billing-invoice-total span b {
  margin-top: 0.125rem;
  color: #596579;
  font-size: 0.5625rem;
}

.billing-invoice-total .late b {
  color: #c7464d;
}

.billing-invoice-total strong {
  margin-left: auto;
  color: #344055;
  font-size: 0.75rem;
  text-align: right;
}

.billing-invoice-actions {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  border-top: 1px solid rgba(66, 79, 102, .07);
}

.billing-invoice-actions>span {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: #7e899a;
  font-size: 0.5625rem;
}

.billing-invoice-actions>span.pending {
  color: #c47d0c;
  font-weight: 800;
}

.billing-invoice-actions button,
.billing-invoice-actions a,
.billing-empty button {
  min-height: 2rem;
  padding: 0 0.6875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid rgba(89, 129, 244, .2);
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #2bbbd7, #9c39dc);
  color: #fff;
  font: inherit;
  font-size: 0.5625rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(89, 129, 244, .12);
}

.billing-invoice-actions button:disabled {
  opacity: .6;
  cursor: wait;
}

.billing-empty {
  min-height: 4.5rem;
  padding: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 1px dashed rgba(89, 129, 244, .18);
  border-radius: 0.875rem;
  color: #7f8999;
  text-align: left;
}

.billing-empty>i {
  color: #4d75dd;
}

.billing-empty span b,
.billing-empty span small {
  display: block;
}

.billing-empty span b {
  color: #4a5568;
  font-size: 0.6875rem;
}

.billing-empty span small {
  margin-top: 0.1875rem;
  font-size: 0.5625rem;
}

.billing-empty.is-error {
  border-color: rgba(239, 68, 68, .2);
}

.billing-empty.is-error>i {
  color: #d14b52;
}

html[data-theme="dark"] .billing-cycle,
html[data-theme="dark"] .billing-subscription,
html[data-theme="dark"] .billing-invoice {
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .billing-subscription.awaiting-payment {
  border-color: rgba(245, 158, 11, .2);
  background: rgba(245, 158, 11, .055);
}

html[data-theme="dark"] .billing-cycle>span b,
html[data-theme="dark"] .billing-section-head h4,
html[data-theme="dark"] .billing-subscription>div b,
html[data-theme="dark"] .billing-subscription dd,
html[data-theme="dark"] .billing-invoice-head b,
html[data-theme="dark"] .billing-invoice-dates span b,
html[data-theme="dark"] .billing-invoice-total strong,
html[data-theme="dark"] .billing-empty span b {
  color: #e6e6e6;
}

html[data-theme="dark"] .billing-subscription>div em,
html[data-theme="dark"] .billing-cycle>span small,
html[data-theme="dark"] .billing-invoice-dates span b,
html[data-theme="dark"] .billing-invoice-actions>span {
  color: #9b9b9b;
}

html[data-theme="dark"] .billing-invoice-head,
html[data-theme="dark"] .billing-invoice-total,
html[data-theme="dark"] .billing-invoice-actions {
  border-color: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .billing-invoice-total {
  background: rgba(255, 255, 255, .018);
}

html[data-theme="dark"] .settings-tabs {
  border-color: rgba(255, 255, 255, .08);
  background: #202020;
  box-shadow: none;
}

html[data-theme="dark"] .settings-tabs button {
  color: #aaa;
}

html[data-theme="dark"] .settings-tabs button>i {
  border-color: rgba(var(--settings-tab-rgb), .2);
  background: linear-gradient(135deg, rgba(var(--settings-tab-rgb), .18), rgba(var(--settings-tab-rgb-secondary), .1));
  color: color-mix(in srgb, var(--settings-tab-accent) 76%, white);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

html[data-theme="dark"] .settings-tabs button b {
  color: #d8d8d8;
}

html[data-theme="dark"] .settings-tabs button small {
  color: #929292;
}

html[data-theme="dark"] .settings-tabs button:hover {
  border-color: rgba(var(--settings-tab-rgb), .24);
  background: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .settings-tabs button.active {
  border-color: rgba(var(--settings-tab-rgb), .3);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 10px 28px rgba(var(--settings-tab-rgb), .08), inset 0 1px rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .settings-tabs button.active>i {
  border-color: rgba(var(--settings-tab-rgb), .3);
  background: linear-gradient(135deg, rgba(var(--settings-tab-rgb), .29), rgba(var(--settings-tab-rgb-secondary), .18));
  color: color-mix(in srgb, var(--settings-tab-accent) 67%, white);
}

html[data-theme="dark"] .settings-tabs button.active b {
  color: color-mix(in srgb, var(--settings-tab-accent) 40%, white);
}

html[data-theme="dark"] .settings-tabs button em {
  border-color: rgba(var(--settings-tab-rgb), .21);
  background: rgba(var(--settings-tab-rgb), .14);
  color: color-mix(in srgb, var(--settings-tab-accent) 70%, white);
}

html[data-theme="dark"] .settings-tab-panel .account-setting-card {
  border-color: rgba(var(--settings-card-rgb), .2);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .settings-tab-panel .account-setting-card .setting-card-head>span:first-child {
  border-color: rgba(var(--settings-card-rgb), .22);
  background: linear-gradient(135deg, rgba(var(--settings-card-rgb), .23), rgba(var(--settings-card-rgb-secondary), .12));
  color: color-mix(in srgb, var(--settings-card-accent) 68%, white);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 8px 20px rgba(var(--settings-card-rgb), .06);
}

html[data-theme="dark"] .settings-tab-panel .account-setting-card .setting-card-head small,
html[data-theme="dark"] .settings-tab-panel .account-setting-card .otp-heading small {
  color: color-mix(in srgb, var(--settings-card-accent) 72%, white);
}

html[data-theme="dark"] .settings-tab-panel .account-setting-card .setting-card-head h3,
html[data-theme="dark"] .settings-tab-panel .account-setting-card .otp-heading b {
  color: color-mix(in srgb, var(--settings-card-accent) 31%, #f5f5f5);
}

@media(max-width:900px) {
  .settings-page-content {
    width: min(100% - 2rem, 62rem);
    padding-top: 1.75rem;
  }

  .settings-tabs {
    grid-template-columns: repeat(5, minmax(9.5rem, 1fr));
  }

  .billing-subscriptions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media(max-width:600px) {
  .settings-page-content {
    width: 100%;
    padding: 1.25rem max(0.75rem, env(safe-area-inset-right)) 2.5rem max(0.75rem, env(safe-area-inset-left));
  }

  .account-settings-title {
    margin-bottom: 1rem;
  }

  .account-settings-title h1 {
    font-size: 1.75rem;
  }

  .account-settings-title p {
    font-size: 0.8125rem;
  }

  .settings-tabs {
    margin-bottom: 0.875rem;
    padding: 0.375rem;
    gap: 0.375rem;
    border-radius: 0.875rem;
  }

  .settings-tabs button {
    min-height: 3.875rem;
    padding: 0.625rem;
    grid-template-columns: 2.125rem minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .settings-tabs button>i {
    width: 2.125rem;
    height: 2.125rem;
  }

  .settings-tabs button b {
    font-size: 0.6875rem;
  }

  .settings-tabs button small {
    font-size: 0.5625rem;
  }

  .settings-tabs button em {
    display: none;
  }

  .account-settings-stack.single-column .account-setting-card {
    padding: 1.125rem;
  }

  .account-settings-stack .setting-card-head h3 {
    font-size: 0.9375rem;
  }

  .account-settings-stack .otp-accordion-toggle,
  .account-settings-stack .otp-accordion-panel {
    padding-right: 1.125rem;
    padding-left: 1.125rem;
  }

  .session-item {
    min-height: 0;
    padding: 0.875rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
  }

  .session-device-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .session-end-button {
    width: 100%;
    grid-column: 2;
  }

  .billing-setting-card .setting-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .billing-debt,
  .billing-clear {
    width: 100%;
    margin: 0.25rem 0 0;
    grid-column: 1 / -1;
    text-align: left;
  }

  .billing-cycle {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-cycle>i {
    display: none;
  }

  .billing-cycle>span b,
  .billing-cycle>span small {
    white-space: normal;
  }

  .billing-subscription {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .billing-subscription dl {
    grid-column: 2;
    justify-content: space-between;
  }

  .billing-subscription dl div {
    text-align: left;
  }

  .billing-invoice-dates {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .billing-invoice-total {
    flex-wrap: wrap;
  }

  .billing-invoice-total strong {
    width: 100%;
    padding-top: 0.375rem;
    border-top: 1px solid rgba(66, 79, 102, .07);
  }

  .billing-invoice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-invoice-actions>span {
    margin-right: 0;
  }

  .billing-invoice-actions button,
  .billing-invoice-actions a {
    width: 100%;
  }
}

@media(max-width:420px) {
  .settings-tabs button {
    grid-template-columns: 1.875rem minmax(0, 1fr);
  }

  .settings-tabs button>i {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.6875rem;
  }

  .settings-tabs button small {
    display: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .settings-tab-panel,
  .settings-tabs button {
    animation: none;
    transition: none;
  }
}

/* Live character limits for assistant and chatbot editors. */
.has-character-limit {
  position: relative;
  --character-limit-input-center: 1.21875rem;
}

.has-character-limit>input:not([type="checkbox"]):not([type="radio"]) {
  padding-right: 3.25rem !important;
}

.has-character-limit>textarea {
  padding-right: 3.25rem !important;
  padding-bottom: 1.25rem !important;
}

.character-limit-counter {
  position: absolute;
  z-index: 2;
  right: .62rem;
  bottom: .42rem;
  padding: .12rem .3rem;
  border-radius: .35rem;
  color: #817990;
  background: color-mix(in srgb, var(--panel, #fff) 88%, transparent);
  font-size: .48rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.has-character-limit:has(>input:not([type="checkbox"]):not([type="radio"]))>.character-limit-counter {
  top: calc(100% - var(--character-limit-input-center));
  bottom: auto;
  transform: translateY(-50%);
}

@media (min-width: 761px) and (max-width: 900px) {
  .chatbot-workspace-main.chatbot-editor-open .has-character-limit,
  .admin-content.assistant-editor-open .has-character-limit {
    --character-limit-input-center: 1.03125rem;
  }
}

.character-limit-counter.is-full {
  color: #a96b08;
  background: rgba(245, 158, 11, .12);
}

.character-limit-counter.is-over,
.character-limit-invalid {
  color: #c83d4f !important;
  border-color: rgba(239, 68, 68, .55) !important;
}

.character-limit-counter.is-over {
  background: rgba(239, 68, 68, .12);
}

html[data-theme="dark"] .character-limit-counter {
  color: #b9b1c7;
  background: rgba(18, 18, 21, .9);
}

html[data-theme="dark"] .character-limit-counter.is-full {
  color: #ffc45f;
  background: rgba(245, 158, 11, .14);
}

html[data-theme="dark"] .character-limit-counter.is-over {
  color: #ff8794;
  background: rgba(239, 68, 68, .15);
}

.my-assistant-capacity-summary>a {
  width: fit-content;
  min-height: 2.35rem;
  margin-top: .85rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(45, 187, 210, .22);
  border-radius: .65rem;
  color: #fff;
  background: linear-gradient(110deg, #25bcd2, #6576e8 55%, #a331d5);
  box-shadow: 0 8px 20px rgba(82, 91, 201, .2);
  text-decoration: none;
}

.my-assistant-capacity-summary>a:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

html[data-theme="dark"] .user-assistant-workspace .my-assistant-capacity-summary>a {
  color: #fff !important;
  background: linear-gradient(110deg, #25bcd2, #6576e8 55%, #a331d5);
}

.user-assistant-workspace a.capacity-action-button {
  width: fit-content !important;
  min-width: 9.25rem !important;
  min-height: 2.35rem !important;
  margin-top: .85rem !important;
  padding: .55rem .8rem !important;
  display: inline-grid !important;
  grid-template-columns: .65rem auto .65rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(73, 193, 219, .34) !important;
  border-radius: .7rem !important;
  color: #fff !important;
  background: linear-gradient(110deg, #24bdd3, #6377e9 55%, #a532d7) !important;
  background-clip: padding-box !important;
  box-shadow: 0 8px 18px rgba(81, 91, 204, .18) !important;
  font-size: .68rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.user-assistant-workspace a.capacity-action-button::before {
  width: .65rem;
  content: "";
}

.user-assistant-workspace a.capacity-action-button>i {
  width: .65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
}

.user-assistant-workspace a.capacity-action-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.07) !important;
}

.trust-strip article:nth-child(1)>i { color: #39c8df; background: rgba(34,184,207,.14); }
.trust-strip article:nth-child(2)>i { color: #f2a52b; background: rgba(245,158,11,.14); }
.trust-strip article:nth-child(3)>i { color: #b46aed; background: rgba(168,85,247,.14); }
.trust-strip article:nth-child(4)>i { color: #35c990; background: rgba(16,185,129,.14); }

.admin-sidebar .admin-nav button:nth-child(1)>i { color: #55a7ff; }
.admin-sidebar .admin-nav button:nth-child(2)>i { color: #b66af0; }
.admin-sidebar .admin-nav button:nth-child(3)>i { color: #f0a32f; }
.admin-sidebar .admin-nav button:nth-child(4)>i { color: #3ac9db; }
.admin-sidebar .admin-nav button:nth-child(5)>i { color: #39bd88; }
.admin-sidebar .admin-nav button:nth-child(6)>i { color: #ed6e8f; }

html[data-theme="dark"] .trust-strip article:nth-child(1)>i { color: #67dded; }
html[data-theme="dark"] .trust-strip article:nth-child(2)>i { color: #ffc45f; }
html[data-theme="dark"] .trust-strip article:nth-child(3)>i { color: #d49aff; }
html[data-theme="dark"] .trust-strip article:nth-child(4)>i { color: #6ae1ae; }

/* Keep the recent-assistants card compact and proportional. */
.user-assistant-workspace .my-assistant-dashboard-grid>article:first-child {
  padding: .85rem .95rem;
}

.user-assistant-workspace .my-assistant-dashboard-grid>article:first-child .overview-panel-head small {
  font-size: .46rem;
  letter-spacing: .09em;
}

.user-assistant-workspace .my-assistant-dashboard-grid>article:first-child .overview-panel-head h3 {
  margin-top: .3rem;
  font-size: .76rem;
  line-height: 1.25;
}

.user-assistant-workspace .my-assistant-dashboard-grid>article:first-child .overview-panel-head>a {
  min-height: 1.8rem;
  padding: .4rem .58rem;
  border-radius: .55rem;
  font-size: .55rem;
  line-height: 1;
}

.user-assistant-workspace .my-assistant-dashboard-list {
  gap: .4rem;
  margin-top: .7rem;
}

.user-assistant-workspace .my-assistant-dashboard-list>a {
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .55rem;
  padding: .52rem .58rem;
  border-radius: .65rem;
}

.user-assistant-workspace .my-assistant-dashboard-list .assistant-card-icon {
  width: 2rem;
  height: 2rem;
}

.user-assistant-workspace .my-assistant-dashboard-list b {
  font-size: .65rem;
  line-height: 1.2;
}

.user-assistant-workspace .my-assistant-dashboard-list small {
  font-size: .52rem;
  line-height: 1.2;
}

.user-assistant-workspace .my-assistant-dashboard-list em {
  padding: .28rem .42rem;
  font-size: .5rem;
  line-height: 1;
}

@media(max-width: 620px) {
  .user-assistant-workspace .my-assistant-dashboard-grid>article:first-child {
    padding: .75rem;
  }

  .user-assistant-workspace .my-assistant-dashboard-list>a {
    grid-template-columns: 1.85rem minmax(0, 1fr) auto;
    gap: .48rem;
    padding: .48rem;
  }

  .user-assistant-workspace .my-assistant-dashboard-list .assistant-card-icon {
    width: 1.85rem;
    height: 1.85rem;
  }
}

/* Chat composer keeps fixed corners while multiline input grows upward. */
.workspace-composer {
  border-radius: 1.875rem !important;
  overflow: hidden;
}

@media(max-width: 760px) {
  .workspace-composer {
    border-radius: 1rem !important;
  }

  .workspace-conversation .conversation-menu-trigger {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 1.85rem;
  }

  .workspace-conversation>span {
    min-width: 0;
    padding-right: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Prevent gradient and decorative layers from bleeding past button edges. */
button,
.btn,
[class*="-btn"] {
  box-sizing: border-box;
  background-clip: padding-box;
}

:is(.admin-create-btn, .capacity-action-button, .my-assistant-request-pagination button, .assistant-detail-actions button, .assistant-builder-submit, .chatbot-form-submit button, .workspace-send, .workspace-mobile-new-chat) {
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box !important;
}

:is(.admin-create-btn, .capacity-action-button, .my-assistant-request-pagination button, .assistant-detail-actions button, .assistant-builder-submit, .chatbot-form-submit button, .workspace-send, .workspace-mobile-new-chat)::before,
:is(.admin-create-btn, .capacity-action-button, .my-assistant-request-pagination button, .assistant-detail-actions button, .assistant-builder-submit, .chatbot-form-submit button, .workspace-send, .workspace-mobile-new-chat)::after {
  max-width: 100%;
  border-radius: inherit;
}

@media(max-width: 900px) {
  /* Settings surfaces enter without off-canvas decorative flashes. */
  .account-settings-page,
  .account-settings-main,
  .settings-page-content,
  .workspace-usermenu,
  .workspace-usermenu button,
  .workspace-usermenu button>i {
    animation: none !important;
    transition: none !important;
  }

  .account-settings-page,
  .account-settings-main,
  .settings-page-content,
  .workspace-usermenu {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  .settings-page-content::before {
    inset: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .workspace-usermenu button:hover>i,
  .workspace-usermenu button:active>i {
    transform: none !important;
  }
}

@media(max-width: 760px) {
  /* Keep the mobile footer on the workspace's natural background. */
  .workspace-main {
    --workspace-mobile-fade-bg: #f7f7f4;
    overflow: hidden !important;
  }

  html[data-theme="dark"] .workspace-main {
    --workspace-mobile-fade-bg: #1c1c1c;
  }

  .workspace-main::after {
    content: "";
    position: fixed;
    z-index: 29;
    right: 0;
    bottom: max(5.1rem, calc(4.1rem + env(safe-area-inset-bottom)));
    left: 0;
    height: 2.75rem;
    background: linear-gradient(to bottom, transparent, var(--workspace-mobile-fade-bg) 92%);
    pointer-events: none;
  }

  .is-new-conversation .workspace-composer-wrap,
  .sidebar-collapsed.is-new-conversation .workspace-composer-wrap,
  .has-conversation .workspace-composer-wrap {
    background: transparent !important;
    box-shadow: none !important;
  }

  .workspace-chat-area,
  .is-new-conversation .workspace-chat-area {
    margin-bottom: 0;
    padding-bottom: max(8rem, calc(7rem + env(safe-area-inset-bottom)));
    overscroll-behavior-y: contain;
  }
}
/* Full-conversation sharing */
.conversation-actions-menu button[data-action="share"] i {
  color: #22b8f0;
}

.conversation-share-back {
  z-index: 1300;
  padding: 1.25rem;
  background: rgba(6, 10, 19, .7);
  backdrop-filter: blur(.75rem);
}

.conversation-share-modal {
  width: min(37rem, 100%);
  padding: 1.5rem;
  border: 1px solid rgba(34, 184, 240, .24);
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 0 0, rgba(34, 184, 240, .13), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(168, 85, 247, .12), transparent 34%),
    #fff;
  box-shadow: 0 1.75rem 5rem rgba(4, 8, 18, .28);
}

.conversation-share-head {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 2.5rem;
  gap: .9rem;
  align-items: start;
}

.conversation-share-head > span {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid rgba(34, 184, 240, .28);
  border-radius: 1.05rem;
  color: #0891b2;
  background: linear-gradient(145deg, rgba(34, 184, 240, .16), rgba(168, 85, 247, .13));
}

.conversation-share-head small {
  display: block;
  margin: .1rem 0 .35rem;
  color: #8b5cf6;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .14em;
}

.conversation-share-head h2 {
  margin: 0;
  color: #152033;
  font-size: 1.35rem;
}

.conversation-share-head p {
  margin: .4rem 0 0;
  color: #68748a;
  font-size: .84rem;
  line-height: 1.55;
}

.conversation-share-head p b {
  color: #24324a;
}

#closeConversationShare {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: .72rem;
  color: #64748b;
  background: rgba(148, 163, 184, .08);
  font-size: .76rem;
}

.conversation-share-link {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: .45rem .45rem .45rem .9rem;
  border: 1px solid rgba(34, 184, 240, .26);
  border-radius: 1.05rem;
  background: rgba(241, 245, 249, .88);
  box-shadow: inset 0 0 0 .2rem rgba(34, 184, 240, .035);
}

.conversation-share-link > i {
  color: #06a6c8;
}

.conversation-share-link input {
  width: 100%;
  min-width: 0;
  padding: .75rem 0;
  border: 0;
  outline: 0;
  color: #25324a;
  background: transparent;
  font-size: .79rem;
}

.conversation-share-link button,
.conversation-share-actions button {
  min-height: 2.25rem;
  border-radius: .7rem;
  font-size: .72rem;
  font-weight: 800;
}

.conversation-share-link button {
  padding: 0 .72rem;
  border: 0;
  color: #fff;
  background: linear-gradient(100deg, #22b8f0, #8657f6 56%, #b12bd8);
}

.conversation-share-link button span {
  margin-left: .25rem;
}

.conversation-share-notice {
  display: flex;
  gap: .7rem;
  margin-top: .9rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(139, 92, 246, .16);
  border-radius: 1rem;
  color: #68748a;
  background: rgba(139, 92, 246, .055);
}

.conversation-share-notice > i {
  margin-top: .15rem;
  color: #8b5cf6;
}

.conversation-share-notice p {
  margin: 0;
  font-size: .79rem;
  line-height: 1.5;
}

.conversation-share-notice b {
  color: #334155;
}

.conversation-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .9rem;
}

.conversation-share-actions button {
  padding: 0 .9rem;
  border: 1px solid rgba(100, 116, 139, .2);
  color: #536176;
  background: rgba(148, 163, 184, .08);
}

.conversation-share-actions #nativeConversationShare {
  border: 0;
  color: #fff;
  background: linear-gradient(100deg, #22b8f0, #8b5cf6 62%, #b12bd8);
}

.conversation-share-import {
  display: grid;
  min-height: 100vh;
  padding: 1.5rem;
  place-items: center;
  color: #e8eefc;
  background:
    radial-gradient(circle at 35% 20%, rgba(34, 184, 240, .16), transparent 34rem),
    radial-gradient(circle at 72% 70%, rgba(168, 85, 247, .13), transparent 34rem),
    #0b101a;
}

.conversation-share-import section {
  width: min(32rem, 100%);
  padding: 2.25rem;
  text-align: center;
  border: 1px solid rgba(118, 143, 184, .18);
  border-radius: 1.75rem;
  background: rgba(19, 27, 41, .88);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .3);
}

.conversation-share-import section > span {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.1rem;
  place-items: center;
  border: 1px solid rgba(34, 184, 240, .3);
  border-radius: 1.35rem;
  color: #58d8ff;
  background: linear-gradient(145deg, rgba(34, 184, 240, .18), rgba(168, 85, 247, .17));
}

.conversation-share-import small {
  color: #a78bfa;
  font-weight: 850;
  letter-spacing: .14em;
}

.conversation-share-import h1 {
  margin: .55rem 0 .6rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.conversation-share-import p {
  margin: 0;
  color: #94a3b8;
  line-height: 1.55;
}

.conversation-share-spinner {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  margin: 1.4rem auto 0;
  border: .18rem solid rgba(148, 163, 184, .18);
  border-top-color: #38c7ef;
  border-right-color: #9a62f5;
  border-radius: 50%;
  animation: conversation-share-spin .7s linear infinite;
}

@keyframes conversation-share-spin {
  to { transform: rotate(360deg); }
}

html[data-theme="dark"] .conversation-share-modal {
  background:
    radial-gradient(circle at 0 0, rgba(34, 184, 240, .12), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(168, 85, 247, .1), transparent 34%),
    #171b24;
}

html[data-theme="dark"] .conversation-share-head h2,
html[data-theme="dark"] .conversation-share-head p b,
html[data-theme="dark"] .conversation-share-notice b {
  color: #f1f5f9;
}

html[data-theme="dark"] .conversation-share-head p,
html[data-theme="dark"] .conversation-share-notice {
  color: #9aa7bb;
}

html[data-theme="dark"] .conversation-share-link {
  background: rgba(10, 15, 24, .72);
}

html[data-theme="dark"] .conversation-share-link input {
  color: #dce6f5;
}

@media (max-width: 35rem) {
  .conversation-share-modal { padding: 1.1rem; border-radius: 1.35rem; }
  .conversation-share-head { grid-template-columns: 2.8rem minmax(0, 1fr) 2.25rem; gap: .7rem; }
  .conversation-share-head > span { width: 2.8rem; height: 2.8rem; border-radius: .9rem; }
  #closeConversationShare { width: 2.1rem; height: 2.1rem; }
  .conversation-share-link { grid-template-columns: 1rem minmax(0, 1fr); }
  .conversation-share-link button { grid-column: 1 / -1; width: 100%; }
  .conversation-share-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .conversation-share-actions button:only-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-share-spinner { animation-duration: 1.5s; }
}

/* Developer access management refresh */
.developer-mode-console {
  grid-template-columns: minmax(18rem, .78fr) minmax(31rem, 1.22fr);
  border-radius: 1.45rem;
}

.developer-mode-header {
  padding: clamp(1.2rem, 2.2vw, 1.75rem);
}

.developer-mode-generator {
  gap: .7rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.developer-mode-generator-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, .45fr);
  gap: .65rem;
}

.developer-mode-generator-note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  padding: .58rem .68rem;
  color: #687c88;
  border: 1px solid rgba(18, 157, 184, .12);
  border-radius: .78rem;
  background: rgba(20, 163, 190, .055);
  font-size: .6rem;
  line-height: 1.5;
}

.developer-mode-generator-note i {
  margin-top: .12rem;
  color: #119cb7;
}

.developer-mode-records {
  gap: .8rem;
  border-radius: 1.35rem;
}

.developer-mode-records-head {
  align-items: center;
}

.developer-mode-record {
  display: grid;
  grid-template-columns: minmax(11rem, .7fr) minmax(18rem, 1fr) minmax(24rem, 1.25fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .72rem;
  border-radius: 1rem;
  overflow: visible;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.developer-mode-record:hover {
  transform: translateY(-1px);
}

.developer-mode-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
}

.developer-mode-record-top>em {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  flex: 0 0 auto;
  padding: .34rem .48rem;
  color: #0b7b68;
  border-radius: 999px;
  background: #e9f9f4;
  font-size: .56rem;
  font-style: normal;
  font-weight: 850;
}

.developer-mode-record-top>em i {
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  background: #17ae91;
  box-shadow: 0 0 0 3px rgba(23, 174, 145, .1);
}

.developer-mode-record.is-revoked .developer-mode-record-top>em {
  color: #9a6a16;
  background: #fff6df;
}

.developer-mode-record.is-revoked .developer-mode-record-top>em i {
  background: #d99a2e;
  box-shadow: none;
}

.developer-mode-record.is-expired .developer-mode-record-top>em {
  color: #8b6e76;
  background: #f7eff2;
}

.developer-mode-record.is-expired .developer-mode-record-top>em i {
  background: #a6878f;
  box-shadow: none;
}

.developer-mode-record-dates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .42rem;
  min-width: 0;
}

.developer-mode-record-dates>span {
  min-width: 0;
  padding: .46rem .52rem;
  border: 1px solid #e2e9ed;
  border-radius: .7rem;
  background: rgba(248, 251, 252, .85);
}

.developer-mode-record-dates small,
.developer-mode-record-dates b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-mode-record-dates small {
  color: #8b99a1;
  font-size: .44rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.developer-mode-record-dates b {
  margin-top: .16rem;
  color: #415763;
  font-size: .56rem;
}

.developer-mode-remaining.is-live b {
  color: #0c806a;
}

.developer-mode-remaining.is-revoked b {
  color: #a06d18;
}

.developer-mode-remaining.is-expired b {
  color: #92717a;
}

.developer-mode-record-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42rem;
  min-width: 0;
}

.developer-mode-record .developer-mode-record-values button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  gap: .5rem;
  min-width: 0;
  min-height: 2.85rem;
  padding: .45rem .58rem;
  color: #2d5967;
  border: 1px solid #d8e5ea;
  border-radius: .78rem;
  background: #f5fafc;
  text-align: left;
}

.developer-mode-record-values button>i:first-child {
  color: #119cb8;
}

.developer-mode-record-values button>i:last-child {
  color: #8d9ca4;
}

.developer-mode-record-values span,
.developer-mode-record-values small,
.developer-mode-record-values code {
  display: block;
  min-width: 0;
}

.developer-mode-record-values small {
  color: #896fd4;
  font: 800 .45rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.developer-mode-record-values code {
  overflow: hidden;
  margin-top: .14rem;
  color: #48606c;
  font: 700 .54rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.developer-mode-record .developer-mode-record-values button:hover:not(:disabled) {
  border-color: #9ed5df;
  background: #edf9fb;
  transform: none;
}

.developer-mode-record .developer-mode-record-values button.copied {
  color: #087a66;
  border-color: #9edccc;
  background: #ecfaf6;
}

.developer-mode-record .developer-mode-record-values button:disabled {
  opacity: .52;
  filter: saturate(.45);
  cursor: not-allowed;
}

.developer-mode-record-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}

.developer-mode-record .developer-mode-record-controls button {
  min-width: 0;
  min-height: 2.2rem;
  padding: 0 .65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: .56rem;
  white-space: nowrap;
}

.developer-mode-record .developer-mode-record-controls .developer-mode-stop {
  color: #a36d12;
  border-color: rgba(210, 148, 40, .18);
  background: rgba(239, 176, 57, .08);
}

.developer-mode-record .developer-mode-record-controls .developer-mode-delete {
  color: #b14c5d;
  border-color: rgba(196, 76, 96, .16);
  background: rgba(206, 76, 98, .065);
}

.developer-mode-record.is-revoked,
.developer-mode-record.is-expired {
  opacity: .86;
}

.developer-mode-record.is-revoked {
  border-color: #eadfc6;
  background: #fffdf8;
}

.developer-mode-record.is-expired {
  border-color: #e8dde1;
  background: #fdfafb;
}

.developer-mode-record-filters button[data-developer-filter="revoked"].active {
  color: #9b6a16;
}

.developer-mode-record-filters button[data-developer-filter="revoked"].active>i {
  background: #d99a2e;
}

html[data-theme="dark"] .developer-mode-generator-note {
  color: #91a6b0;
  border-color: rgba(71, 187, 207, .13);
  background: rgba(40, 157, 179, .07);
}

html[data-theme="dark"] .developer-mode-record-dates>span {
  border-color: #2b3a45;
  background: #101922;
}

html[data-theme="dark"] .developer-mode-record-dates b,
html[data-theme="dark"] .developer-mode-record-values code {
  color: #a8bbc4;
}

html[data-theme="dark"] .developer-mode-record .developer-mode-record-values button {
  color: #a8bbc4;
  border-color: #30404c;
  background: #101922;
}

html[data-theme="dark"] .developer-mode-record.is-revoked {
  border-color: #4a412f;
  background: #1d1c19;
}

html[data-theme="dark"] .developer-mode-record.is-expired {
  border-color: #45343a;
  background: #1b171a;
}

html[data-theme="dark"] .developer-mode-record.is-revoked .developer-mode-record-top>em {
  color: #e0b665;
  background: #342b18;
}

html[data-theme="dark"] .developer-mode-record.is-expired .developer-mode-record-top>em {
  color: #c2a8af;
  background: #2b2227;
}

@media (max-width: 1240px) {
  .developer-mode-record {
    grid-template-columns: minmax(12rem, .75fr) minmax(20rem, 1.25fr) auto;
  }

  .developer-mode-record-dates {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 920px) {
  .developer-mode-console {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-mode-record {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .developer-mode-record-dates,
  .developer-mode-record-values {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .developer-mode-generator-fields,
  .developer-mode-record-dates,
  .developer-mode-record-values {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-mode-record-controls {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .developer-mode-record .developer-mode-record-controls button {
    flex: 1;
  }
}

/* Round, theme-aware transient popups and confirmation dialogs */
html[data-theme] body .toast {
  border-radius: 999px !important;
  background-image: radial-gradient(circle at 12% 0, var(--toast-soft), transparent 42%) !important;
}

html[data-theme] body :is(.conversation-confirm, .delete-confirm-modal, .avatar-modal, .limit-modal, .otp-login-modal, .otp-setup-modal) {
  border-radius: 1.75rem !important;
  overflow: hidden;
}

html[data-theme] body :is(.delete-confirm-modal, .conversation-confirm)>span,
html[data-theme] body .conversation-confirm-icon {
  border-radius: 1.05rem;
}

html[data-theme] body :is(.delete-confirm-modal, .conversation-confirm) button {
  border-radius: 999px !important;
}

html[data-theme] body .delete-confirm-modal {
  color: var(--aris-text) !important;
  border-color: color-mix(in srgb, #df657a 22%, var(--aris-line)) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(210, 72, 98, .11), transparent 11rem),
    var(--aris-surface-raised) !important;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .34) !important;
}

html[data-theme] body .delete-confirm-modal h2 {
  color: var(--aris-text) !important;
}

html[data-theme] body .delete-confirm-modal p {
  color: var(--aris-muted) !important;
}

html[data-theme] body .delete-confirm-modal p b {
  color: var(--aris-text-soft) !important;
}

html[data-theme] body .delete-confirm-modal #cancelDelete {
  color: var(--aris-text-soft) !important;
  border-color: var(--aris-line) !important;
  background: var(--aris-field) !important;
}

/* Private assistant viewer management */
.assistant-viewers-panel {
  margin-top: .75rem;
  padding: .95rem;
  overflow: hidden;
  border: 1px solid rgba(34, 184, 240, .18);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0 0, rgba(34, 184, 240, .075), transparent 26rem),
    var(--panel, #fff);
  box-shadow: 0 .9rem 2.5rem rgba(15, 23, 42, .06);
}

.assistant-viewers-head {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.assistant-viewers-head small,
.assistant-viewer-owner > small,
.assistant-viewer-assigned > div:first-child small {
  color: #8b5cf6;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.assistant-viewers-head h3 {
  margin: .2rem 0 .15rem;
  color: var(--text, #172033);
  font-size: .95rem;
}

.assistant-viewers-head p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted, #718096);
  font-size: .76rem;
  line-height: 1.5;
}

#assistantViewerCount {
  display: inline-flex;
  flex: 0 0 auto;
  gap: .4rem;
  align-items: center;
  padding: .4rem .6rem;
  border: 1px solid rgba(34, 184, 240, .18);
  border-radius: .72rem;
  color: #0891b2;
  background: rgba(34, 184, 240, .08);
  font-size: .7rem;
  font-weight: 800;
}

.assistant-viewer-add {
  margin-top: .7rem;
  padding: .68rem;
  border: 1px solid rgba(100, 116, 139, .14);
  border-radius: .85rem;
  background: rgba(148, 163, 184, .045);
}

.assistant-viewer-add > label {
  display: block;
  margin-bottom: .3rem;
  color: var(--text, #334155);
  font-size: .7rem;
  font-weight: 800;
}

.assistant-viewer-add > div {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
  padding: .25rem .25rem .25rem .7rem;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: .82rem;
  background: var(--field-bg, #fff);
}

.assistant-viewer-add > div > i {
  color: #8b5cf6;
}

.assistant-viewer-add input {
  min-width: 0;
  padding: .45rem 0;
  border: 0;
  outline: 0;
  color: var(--text, #172033);
  background: transparent;
  font-size: .75rem;
}

.assistant-viewer-add button {
  min-height: 1.95rem;
  padding: 0 .78rem;
  border: 0;
  border-radius: .68rem;
  color: #fff;
  background: linear-gradient(100deg, #22b8f0, #8b5cf6 65%, #b12bd8);
  font-size: .7rem;
  font-weight: 800;
}

.assistant-viewer-add > small {
  display: block;
  margin-top: .3rem;
  color: var(--muted, #718096);
  font-size: .65rem;
}

.assistant-viewer-public-note {
  display: flex;
  gap: .7rem;
  align-items: center;
  margin-top: .7rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: .9rem;
  color: #059669;
  background: rgba(16, 185, 129, .07);
}

.assistant-viewer-public-note span {
  display: grid;
  gap: .1rem;
}

.assistant-viewer-public-note b { font-size: .75rem; }
.assistant-viewer-public-note small { color: var(--muted, #718096); font-size: .67rem; }

.assistant-viewers-list {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
}

.assistant-viewer-owner,
.assistant-viewer-assigned {
  display: grid;
  gap: .32rem;
}

.assistant-viewer-owner {
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(100, 116, 139, .14);
}

.assistant-viewer-assigned > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.assistant-viewer-assigned > div:first-child span {
  color: var(--muted, #718096);
  font-size: .66rem;
  font-weight: 750;
}

.assistant-viewer-row {
  display: grid;
  grid-template-columns: 2rem minmax(10rem, 1fr) auto minmax(7rem, auto) 1.9rem;
  gap: .6rem;
  align-items: center;
  min-height: 3.05rem;
  padding: .42rem .6rem;
  border: 1px solid rgba(100, 116, 139, .14);
  border-radius: .9rem;
  background: rgba(148, 163, 184, .035);
}

.assistant-viewer-row.is-owner {
  grid-template-columns: 2rem minmax(10rem, 1fr) auto auto;
  border-color: rgba(245, 158, 11, .22);
  background: linear-gradient(100deg, rgba(245, 158, 11, .075), rgba(139, 92, 246, .035));
}

.assistant-viewer-avatar {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: .65rem;
}

.assistant-viewer-identity {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.assistant-viewer-identity b,
.assistant-viewer-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-viewer-identity b {
  color: var(--text, #25324a);
  font-size: .76rem;
}

.assistant-viewer-identity small {
  color: var(--muted, #718096);
  font-size: .67rem;
}

.assistant-viewer-role {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  padding: .3rem .5rem;
  border-radius: .6rem;
  color: #7c3aed;
  background: rgba(139, 92, 246, .09);
  font-size: .65rem;
  font-weight: 800;
  white-space: nowrap;
}

.assistant-viewer-row.is-owner .assistant-viewer-role {
  color: #b45309;
  background: rgba(245, 158, 11, .11);
}

.assistant-viewer-row > em {
  color: var(--muted, #718096);
  font-size: .63rem;
  font-style: normal;
  text-align: right;
}

.assistant-viewer-row > button {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(239, 68, 68, .16);
  border-radius: .65rem;
  color: #ef4444;
  background: rgba(239, 68, 68, .055);
}

.assistant-viewer-row > button:hover {
  color: #fff;
  background: #ef4444;
}

.assistant-viewers-empty,
.assistant-viewers-loading {
  display: flex;
  gap: .65rem;
  align-items: center;
  min-height: 3.1rem;
  padding: .65rem;
  border: 1px dashed rgba(100, 116, 139, .2);
  border-radius: .9rem;
  color: var(--muted, #718096);
  font-size: .72rem;
}

.assistant-viewers-empty > i,
.assistant-viewers-loading > i { color: #8b5cf6; }
.assistant-viewers-empty span { display: grid; gap: .1rem; }
.assistant-viewers-empty b { color: var(--text, #334155); font-size: .73rem; }
.assistant-viewers-empty small { font-size: .65rem; }
.assistant-viewers-empty.is-error > i { color: #ef4444; }

.assistant-viewers-pagination {
  display: flex;
  gap: .55rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: .55rem;
}

.assistant-viewers-pagination button {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(100, 116, 139, .18);
  border-radius: .62rem;
  color: #7c3aed;
  background: rgba(139, 92, 246, .07);
}

.assistant-viewers-pagination button:disabled { opacity: .38; }
.assistant-viewers-pagination span { color: var(--muted, #718096); font-size: .68rem; }
.assistant-viewers-pagination span b { color: #7c3aed; }

html[data-theme="dark"] .assistant-viewers-panel {
  --panel: #242424;
  --field-bg: #191919;
  --text: #ededed;
  --muted: #a4a4a4;
  border-color: rgba(255, 255, 255, .09);
  background: #242424;
  box-shadow: none;
}

html[data-theme="dark"] #assistantViewerCount {
  border-color: rgba(167, 139, 250, .2);
  color: #c4b5fd;
  background: rgba(139, 92, 246, .1);
}

html[data-theme="dark"] .assistant-viewer-add,
html[data-theme="dark"] .assistant-viewer-row,
html[data-theme="dark"] .assistant-viewers-empty,
html[data-theme="dark"] .assistant-viewers-loading {
  border-color: rgba(255, 255, 255, .085);
  background: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .assistant-viewer-add > div {
  border-color: rgba(255, 255, 255, .1);
  background: #191919;
}

html[data-theme="dark"] .assistant-viewer-owner {
  border-color: rgba(255, 255, 255, .075);
}

html[data-theme="dark"] .assistant-viewer-row.is-owner {
  border-color: rgba(245, 158, 11, .22);
  background: linear-gradient(100deg, rgba(245, 158, 11, .07), rgba(255, 255, 255, .018));
}

html[data-theme="dark"] .assistant-viewers-pagination button {
  border-color: rgba(255, 255, 255, .1);
  color: #c4b5fd;
  background: #292929;
}

@media (max-width: 48rem) {
  .assistant-viewers-panel { padding: .8rem; }
  .assistant-viewers-head { display: grid; }
  #assistantViewerCount { justify-self: start; }
  .assistant-viewer-row,
  .assistant-viewer-row.is-owner {
    grid-template-columns: 2rem minmax(0, 1fr) 1.9rem;
    gap: .55rem;
  }
  .assistant-viewer-row.is-owner { grid-template-columns: 2rem minmax(0, 1fr); }
  .assistant-viewer-role { grid-column: 2; justify-self: start; }
  .assistant-viewer-row > em { grid-column: 2; text-align: left; }
  .assistant-viewer-row > button { grid-column: 3; grid-row: 1 / span 3; }
  .assistant-viewer-row.is-owner > em { grid-column: 2; }
}

@media (max-width: 35rem) {
  .assistant-viewer-add > div { grid-template-columns: 1rem minmax(0, 1fr); }
  .assistant-viewer-add button { grid-column: 1 / -1; width: 100%; }
}

.assistant-access-settings {
  margin-top: .75rem;
  padding: .85rem;
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, .09), transparent 25rem),
    radial-gradient(circle at 0 100%, rgba(34, 184, 240, .07), transparent 25rem),
    #fff;
  box-shadow: 0 .9rem 2.5rem rgba(15, 23, 42, .06);
}

.assistant-access-settings-head {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) minmax(13rem, 17rem);
  gap: .7rem;
  align-items: center;
}

.assistant-access-settings-head > span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, .24);
  border-radius: .76rem;
  color: #8b5cf6;
  background: linear-gradient(145deg, rgba(34, 184, 240, .11), rgba(139, 92, 246, .14));
}

.assistant-access-settings-head > div > small,
.assistant-access-settings-empty small {
  color: #8b5cf6;
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .13em;
}

.assistant-access-settings-head h2 {
  margin: .16rem 0 .1rem;
  color: #202a3d;
  font-size: .92rem;
}

.assistant-access-settings-head p {
  margin: 0;
  color: #718096;
  font-size: .7rem;
  line-height: 1.45;
}

.assistant-access-settings-head > label {
  display: grid;
  gap: .35rem;
  color: #596579;
  font-size: .66rem;
  font-weight: 800;
}

.assistant-access-settings-head select {
  width: 100%;
  min-height: 2.2rem;
  padding: 0 2rem 0 .75rem;
  border: 1px solid rgba(100, 116, 139, .2);
  border-radius: .75rem;
  outline: 0;
  color: #25324a;
  background-color: rgba(248, 250, 252, .92);
  font-size: .72rem;
  font-weight: 750;
}

.assistant-access-settings #assistantAccessSettingsContent > .assistant-viewers-panel {
  margin-top: .75rem;
  box-shadow: none;
}

.assistant-access-settings-empty {
  display: flex;
  gap: .8rem;
  align-items: center;
  min-height: 5rem;
  padding: .9rem;
  border: 1px dashed rgba(139, 92, 246, .25);
  border-radius: 1rem;
  color: #8b5cf6;
  background: rgba(139, 92, 246, .045);
}

.assistant-access-settings-empty > i {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: .78rem;
  background: rgba(139, 92, 246, .1);
}

.assistant-access-settings-empty > div {
  display: grid;
  gap: .12rem;
}

.assistant-access-settings-empty b { color: #263247; font-size: .78rem; }
.assistant-access-settings-empty span { color: #718096; font-size: .68rem; }

html[data-theme="dark"] .assistant-access-settings {
  border-color: rgba(255, 255, 255, .09);
  background: #202020;
  box-shadow: none;
}

html[data-theme="dark"] .assistant-access-settings-head > span {
  border-color: rgba(255, 255, 255, .11);
  color: #c4b5fd;
  background: #292929;
}

html[data-theme="dark"] .assistant-access-settings-head h2,
html[data-theme="dark"] .assistant-access-settings-empty b {
  color: #eef3fb;
}

html[data-theme="dark"] .assistant-access-settings-head p,
html[data-theme="dark"] .assistant-access-settings-head > label,
html[data-theme="dark"] .assistant-access-settings-empty span {
  color: #98a5b9;
}

html[data-theme="dark"] .assistant-access-settings-head select {
  border-color: rgba(255, 255, 255, .1);
  color: #ededed;
  background-color: #191919;
  color-scheme: dark;
}

html[data-theme="dark"] .assistant-access-settings-head select option {
  color: #ededed;
  background: #191919;
}

@media (max-width: 60rem) {
  .assistant-access-settings-head {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
  .assistant-access-settings-head > label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 35rem) {
  .assistant-access-settings { padding: .7rem; border-radius: .9rem; }
  .assistant-access-settings-head { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .6rem; }
  .assistant-access-settings-head > span { width: 2.25rem; height: 2.25rem; border-radius: .7rem; }
}

/* Compact payments workspace */
.billing-setting-card .setting-card-head h3 {
  margin: 0;
}

.billing-history-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
}

.billing-history-tools > span {
  color: #8993a3;
  font-size: .54rem;
  font-weight: 750;
  white-space: nowrap;
}

.billing-filter {
  padding: .16rem;
  display: inline-flex;
  align-items: center;
  gap: .12rem;
  border: 1px solid rgba(89, 129, 244, .11);
  border-radius: .58rem;
  background: rgba(255, 255, 255, .66);
}

.billing-filter button {
  min-width: 3.4rem;
  min-height: 1.65rem;
  padding: 0 .62rem;
  border: 0;
  border-radius: .45rem;
  color: #778296;
  background: transparent;
  font: inherit;
  font-size: .54rem;
  font-weight: 800;
  cursor: pointer;
}

.billing-filter button.active {
  color: #fff;
  background: #6755bd;
  box-shadow: 0 3px 9px rgba(103, 85, 189, .16);
}

.billing-subscription {
  padding: .68rem .72rem;
  grid-template-columns: 2.25rem minmax(7rem, 1fr) auto minmax(12rem, 1.35fr);
  gap: .68rem;
}

.billing-plan-copy {
  min-width: 0;
}

.billing-plan-state {
  min-height: 1.55rem;
  padding: 0 .52rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  border-radius: 999px;
  color: #168a69;
  background: rgba(16, 185, 129, .09);
  font-size: .48rem;
  font-weight: 850;
  white-space: nowrap;
}

.billing-plan-state.waiting {
  color: #bd7605;
  background: rgba(245, 158, 11, .1);
}

.billing-plan-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .68rem;
}

.billing-plan-meta span {
  min-width: 0;
  text-align: right;
}

.billing-plan-meta small,
.billing-plan-meta b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-plan-meta small {
  color: #929baa;
  font-size: .44rem;
}

.billing-plan-meta b {
  margin-top: .16rem;
  color: #4b5568;
  font-size: .54rem;
  font-weight: 800;
}

.billing-invoices {
  gap: .45rem;
}

.billing-invoice[hidden],
.billing-filter-empty[hidden],
.billing-pagination[hidden] {
  display: none !important;
}

.billing-invoice {
  min-height: 3.65rem;
  padding: .55rem .62rem;
  display: grid;
  grid-template-columns: minmax(10.5rem, 1.25fr) minmax(10rem, 1fr) minmax(6.3rem, .65fr) auto auto auto;
  align-items: center;
  gap: .75rem;
  overflow: hidden;
  border-radius: .72rem;
}

.billing-invoice-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.billing-invoice-main > span {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: .56rem;
  color: #4d75dd;
  background: rgba(89, 129, 244, .09);
  font-size: .66rem;
}

.billing-invoice-main > div {
  min-width: 0;
}

.billing-invoice-main small,
.billing-invoice-main b,
.billing-invoice-fact small,
.billing-invoice-fact b,
.billing-invoice-amount small {
  display: block;
}

.billing-invoice-main small {
  overflow: hidden;
  color: #929baa;
  font-size: .47rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-invoice-main b {
  margin-top: .12rem;
  color: #354054;
  font-size: .64rem;
}

.billing-invoice-fact {
  min-width: 0;
}

.billing-invoice-fact small,
.billing-invoice-amount small {
  color: #929baa;
  font-size: .44rem;
  font-weight: 700;
}

.billing-invoice-fact b {
  margin-top: .16rem;
  overflow: hidden;
  color: #596579;
  font-size: .52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-invoice-amount {
  color: #344055;
  font-size: .72rem;
  text-align: right;
  white-space: nowrap;
}

.billing-invoice-status {
  padding: .3rem .48rem;
  border-radius: 999px;
  color: #c47d0c;
  background: rgba(245, 158, 11, .09);
  font-size: .47rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.billing-invoice.overdue .billing-invoice-status {
  color: #c7464d;
  background: rgba(239, 68, 68, .1);
}

.billing-invoice.paid .billing-invoice-status {
  color: #168a69;
  background: rgba(16, 185, 129, .09);
}

.billing-invoice.void .billing-invoice-status {
  color: #9a6070;
  background: rgba(190, 71, 96, .08);
}

.billing-invoice.balance-top-up {
  border-color: rgba(28, 165, 134, .16);
  background: linear-gradient(105deg, rgba(28, 165, 134, .045), rgba(255, 255, 255, .7));
}

.billing-invoice.balance-top-up .billing-invoice-main > span {
  color: #168a69;
  background: rgba(16, 185, 129, .1);
}

.billing-invoice-actions .balance-result {
  color: #168a69;
  font-weight: 800;
}

.billing-invoice .billing-invoice-actions {
  min-height: 0;
  padding: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .34rem;
  border: 0;
}

.billing-invoice .billing-invoice-actions > span {
  margin: 0;
  max-width: 9.5rem;
  overflow: hidden;
  font-size: .49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-invoice-actions .receipt-action {
  position: relative;
  isolation: isolate;
  min-height: 1.82rem;
  padding: 0 .58rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: .54rem;
  box-shadow: none;
  white-space: nowrap;
  background-clip: padding-box;
}

.billing-invoice-actions .receipt-action.view {
  border-color: rgba(34, 159, 190, .2);
  color: #247d97;
  background: rgba(34, 184, 213, .075);
}

.billing-invoice-actions .receipt-action.download {
  border-color: #278eaa;
  color: #fff;
  background: #278eaa;
  background-image: none;
}

.billing-invoice-actions .receipt-action.download::before {
  content: none;
}

.billing-filter-empty {
  grid-column: 1 / -1;
}

html[data-theme="dark"] .billing-history-tools > span,
html[data-theme="dark"] .billing-invoice-fact b,
html[data-theme="dark"] .billing-plan-meta b {
  color: #aeb6c5;
}

html[data-theme="dark"] .billing-filter {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .billing-filter button {
  color: #9ba5b6;
}

html[data-theme="dark"] .billing-filter button.active {
  color: #fff;
  background: #6755bd;
}

html[data-theme="dark"] .billing-invoice-main b,
html[data-theme="dark"] .billing-invoice-amount {
  color: #eef1f7;
}

html[data-theme="dark"] .billing-invoice.balance-top-up {
  border-color: rgba(56, 201, 165, .14);
  background: linear-gradient(105deg, rgba(28, 165, 134, .065), rgba(255, 255, 255, .025));
}

html[data-theme="dark"] .billing-invoice-actions .receipt-action.view {
  border-color: rgba(79, 195, 220, .22);
  color: #8bd6e7;
  background: rgba(34, 184, 213, .085);
}

html[data-theme="dark"] .billing-invoice-actions .receipt-action.download {
  border-color: #267f99;
  background: #267f99;
}

@media (max-width: 72rem) {
  .billing-invoice {
    grid-template-columns: minmax(10rem, 1.2fr) minmax(9rem, 1fr) auto auto auto;
  }
  .billing-invoice-fact:not(.billing-invoice-period) {
    display: none;
  }
}

@media (max-width: 58rem) {
  .billing-subscriptions {
    grid-template-columns: minmax(0, 1fr);
  }
  .billing-invoice {
    grid-template-columns: minmax(10rem, 1fr) auto auto;
  }
  .billing-invoice-fact,
  .billing-invoice-status {
    display: none;
  }
}

@media (max-width: 44rem) {
  .billing-section-head.invoice-history-head {
    align-items: stretch;
    flex-direction: column;
  }
  .billing-history-tools {
    justify-content: space-between;
  }
  .billing-filter {
    flex: 1;
  }
  .billing-filter button {
    flex: 1;
  }
  .billing-subscription {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  }
  .billing-plan-meta {
    grid-column: 2 / -1;
  }
  .billing-plan-meta span {
    text-align: left;
  }
  .billing-invoice {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .billing-invoice-amount {
    display: none;
  }
  .billing-invoice .billing-invoice-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .billing-invoice-actions .receipt-action {
    flex: 1;
  }
  .billing-invoice .billing-invoice-actions > span {
    max-width: none;
  }
}

/* 2026-08-24 responsive polish: marketing, chat, settings and sharing */
input[data-otp-code] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  word-spacing: 0;
  text-align: center;
}

.site-header .nav-actions .login-btn,
.site-header .nav-actions .start-btn,
.site-header .nav-actions .continue-btn {
  border-radius: 999px !important;
  background-clip: padding-box !important;
  overflow: hidden;
}

.conversation-menu-trigger {
  border-radius: 999px !important;
  overflow: hidden;
}

.workspace-conversation.menu-open .conversation-menu-trigger {
  background: rgba(75, 87, 109, .09);
  box-shadow: inset 0 0 0 1px rgba(75, 87, 109, .07);
}

html[data-theme="dark"] .workspace-conversation.menu-open .conversation-menu-trigger {
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
}

/* Keep the expanded workspace sidebar visually consistent across breakpoints. */
.workspace-sidebar {
  background:
    radial-gradient(circle at 8% 8%, rgba(34, 184, 240, .09), transparent 13rem),
    radial-gradient(circle at 100% 92%, rgba(139, 92, 246, .1), transparent 15rem),
    #fafaf8 !important;
}

html[data-theme="dark"] .workspace-sidebar {
  background:
    radial-gradient(circle at 8% 8%, rgba(34, 184, 240, .075), transparent 13rem),
    radial-gradient(circle at 100% 92%, rgba(139, 92, 246, .1), transparent 15rem),
    #171719 !important;
}

.workspace-main {
  background:
    radial-gradient(circle at 10% 12%, rgba(34, 184, 240, .075), transparent 32rem),
    radial-gradient(circle at 92% 84%, rgba(139, 92, 246, .09), transparent 38rem),
    linear-gradient(145deg, #f8f8f5, #f4f5f6) !important;
}

html[data-theme="dark"] .workspace-main {
  background:
    radial-gradient(circle at 10% 12%, rgba(34, 184, 240, .055), transparent 32rem),
    radial-gradient(circle at 92% 84%, rgba(139, 92, 246, .085), transparent 38rem),
    linear-gradient(145deg, #1c1c1c, #19191d) !important;
  background-image:
    radial-gradient(circle at 10% 12%, rgba(34, 184, 240, .055), transparent 32rem),
    radial-gradient(circle at 92% 84%, rgba(139, 92, 246, .085), transparent 38rem),
    linear-gradient(145deg, #1c1c1c, #19191d) !important;
}

.workspace-top {
  background:
    radial-gradient(circle at 14% 0%, rgba(34, 184, 240, .12), transparent 20rem),
    radial-gradient(circle at 88% 100%, rgba(139, 92, 246, .11), transparent 24rem),
    rgba(248, 248, 246, .86) !important;
  border-color: rgba(75, 87, 109, .1) !important;
  box-shadow: 0 1px rgba(255, 255, 255, .55), 0 .65rem 1.8rem rgba(42, 48, 70, .035);
  backdrop-filter: blur(18px) saturate(1.08);
}

html[data-theme="dark"] .workspace-top {
  background:
    radial-gradient(circle at 14% 0%, rgba(34, 184, 240, .075), transparent 20rem),
    radial-gradient(circle at 88% 100%, rgba(139, 92, 246, .1), transparent 24rem),
    rgba(24, 24, 27, .88) !important;
  border-color: rgba(255, 255, 255, .075) !important;
  box-shadow: 0 1px rgba(255, 255, 255, .025), 0 .7rem 2rem rgba(0, 0, 0, .12);
}

.workspace-chat-area {
  background: transparent !important;
}

.workspace-sidebar .workspace-new-chat {
  min-height: 2.75rem;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 12% 25%, rgba(34, 184, 240, .19), transparent 36%),
    linear-gradient(110deg, rgba(34, 184, 240, .1), rgba(139, 92, 246, .14)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 .55rem 1.4rem rgba(72, 64, 145, .1);
}

.workspace-sidebar .workspace-new-chat i {
  border-radius: 999px;
}

.workspace-sidebar .workspace-userline {
  padding: .55rem .35rem .55rem .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html[data-theme="dark"] .workspace-sidebar .workspace-userline {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.workspace-sidebar .workspace-userline:hover,
.workspace-sidebar .workspace-userline:focus-visible {
  border-color: rgba(75, 87, 109, .08);
  background: linear-gradient(110deg, rgba(34, 184, 240, .045), rgba(139, 92, 246, .07));
  box-shadow: inset 0 1px rgba(255, 255, 255, .26);
}

html[data-theme="dark"] .workspace-sidebar .workspace-userline:hover,
html[data-theme="dark"] .workspace-sidebar .workspace-userline:focus-visible {
  border-color: rgba(255, 255, 255, .055);
  background: linear-gradient(110deg, rgba(34, 184, 240, .035), rgba(139, 92, 246, .085));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.workspace-sidebar .workspace-conversation .conversation-menu-trigger {
  display: grid;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.workspace-conversation,
.workspace-conversation.active {
  border-radius: .9rem;
}

.conversation-actions-menu button.danger {
  margin-top: .2rem;
  border-top: 0;
  border-radius: .65rem;
  background: rgba(196, 65, 87, .065);
}

.conversation-actions-menu button[data-action="rename"] i {
  color: #7c3aed;
  background: rgba(124, 58, 237, .11);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .06);
}

.conversation-actions-menu button[data-action="share"] i {
  color: #0284c7;
  background: rgba(14, 165, 233, .12);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .06);
}

.conversation-actions-menu button[data-action="pin"] i {
  color: #d97706;
  background: rgba(245, 158, 11, .13);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .07);
}

.conversation-actions-menu button[data-action="archive"] i {
  color: #0f8f83;
  background: rgba(20, 184, 166, .13);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .07);
}

.conversation-actions-menu button[data-action="delete"] i {
  color: #d83b59;
  background: rgba(225, 65, 91, .13);
  box-shadow: inset 0 0 0 1px rgba(225, 65, 91, .07);
}

html[data-theme="dark"] .conversation-actions-menu button[data-action="rename"] i {
  color: #b79aff;
  background: rgba(139, 92, 246, .18);
}

html[data-theme="dark"] .conversation-actions-menu button[data-action="share"] i {
  color: #62d0ff;
  background: rgba(14, 165, 233, .17);
}

html[data-theme="dark"] .conversation-actions-menu button[data-action="pin"] i {
  color: #f8c15c;
  background: rgba(245, 158, 11, .17);
}

html[data-theme="dark"] .conversation-actions-menu button[data-action="archive"] i {
  color: #5ee1cf;
  background: rgba(20, 184, 166, .17);
}

html[data-theme="dark"] .conversation-actions-menu button[data-action="delete"] i {
  color: #ff8fa2;
  background: rgba(225, 65, 91, .2);
}

.account-settings-top {
  height: 3.875rem;
}

.account-settings-top > .settings-brand,
.account-settings-top .settings-logo {
  width: 9.5rem;
  height: 2.35rem;
}

.settings-tabs {
  padding: .25rem;
  gap: .25rem;
  border-radius: .95rem;
}

.settings-tabs button {
  min-height: 3.125rem;
  padding: .4rem .5rem;
  grid-template-columns: 1.9rem minmax(0, 1fr) auto;
  gap: .42rem;
  border-radius: .75rem;
}

.settings-tabs button > i {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .6rem;
}

.chatbot-recent > a em.active,
.chatbot-status.active {
  border: 1px solid rgba(16, 145, 91, .16);
  background: rgba(16, 185, 129, .1);
  color: #087a50;
}

html[data-theme="dark"] .chatbot-recent > a em.active,
html[data-theme="dark"] .chatbot-status.active {
  border-color: rgba(74, 222, 128, .22);
  background: rgba(34, 197, 94, .13);
  color: #7ce7a3;
}

.user-assistant-workspace .admin-content:not(.assistant-editor-open) #myAssistantBody {
  width: 100%;
  max-width: none;
  padding: 0 0 3rem;
  box-sizing: border-box;
}

.conversation-share-modal,
.assistant-access-settings,
.assistant-viewers-panel,
.assistant-viewer-add,
.assistant-viewer-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.conversation-share-modal {
  max-height: calc(100dvh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Compact session rows without dropping device, location or security context. */
.session-list {
  gap: .375rem;
  margin-top: .5rem;
}

.session-item {
  min-height: 4.25rem;
  padding: .5625rem .6875rem;
  gap: .625rem;
  border-radius: .7rem;
}

.session-device-icon {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: .625rem;
  font-size: .6875rem;
}

.session-item-title {
  gap: .4rem;
}

.session-item-title b {
  font-size: .6875rem;
}

.session-item-title > span {
  padding: .18rem .36rem;
  font-size: .5rem;
}

.session-item-copy > small {
  margin-top: .15rem;
  font-size: .5625rem;
}

.session-facts {
  margin-top: .3rem;
  gap: .25rem .75rem;
  font-size: .5625rem;
}

.session-facts i {
  font-size: .5625rem;
}

.session-item-copy > em {
  margin-top: .25rem;
  font-size: .5rem;
}

.session-end-button {
  min-height: 2.125rem;
  padding: 0 .625rem;
  font-size: .5625rem;
}

.conversation-share-head > div,
.conversation-share-link,
.conversation-share-notice,
.assistant-viewers-head > div,
.assistant-viewer-add > div,
.assistant-viewer-identity {
  min-width: 0;
}

@media (min-width: 761px) {
  .account-settings-main:has(.subscription-page-content) {
    height: calc(var(--scaled-screen-height, 80dvh) - 3.875rem);
  }
}

@media (max-width: 760px) {
  .site-header .start-btn {
    display: none !important;
  }

  .site-header .login-btn {
    min-height: 2.625rem;
    padding: 0 .85rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(110deg, #24bad3, #705ee5 58%, #a632d4);
    background-clip: padding-box;
    box-shadow: 0 .35rem .8rem rgba(8, 11, 20, .24);
    overflow: hidden;
    isolation: isolate;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .workspace-mobile-menu-trigger,
  .workspace-mobile-new-chat,
  .workspace-theme {
    border-radius: 999px !important;
  }

  .workspace-mobile-menu-trigger,
  .workspace-mobile-new-chat {
    border: 1px solid rgba(112, 84, 199, .16) !important;
    background: linear-gradient(145deg, rgba(34, 184, 240, .1), rgba(139, 92, 246, .12)) !important;
    box-shadow: 0 .45rem 1.15rem rgba(44, 52, 86, .08);
  }

  html[data-theme="dark"] .workspace-mobile-menu-trigger,
  html[data-theme="dark"] .workspace-mobile-new-chat {
    border-color: rgba(255, 255, 255, .1) !important;
    background: linear-gradient(145deg, rgba(34, 184, 240, .12), rgba(139, 92, 246, .16)) !important;
  }

  .workspace-sidebar {
    width: min(17rem, calc(100vw - 4rem)) !important;
    max-width: min(17rem, calc(100vw - 4rem)) !important;
    background:
      radial-gradient(circle at 8% 8%, rgba(34, 184, 240, .09), transparent 13rem),
      radial-gradient(circle at 100% 92%, rgba(139, 92, 246, .1), transparent 15rem),
      #fafaf8 !important;
  }

  html[data-theme="dark"] .workspace-sidebar {
    background:
      radial-gradient(circle at 8% 8%, rgba(34, 184, 240, .075), transparent 13rem),
      radial-gradient(circle at 100% 92%, rgba(139, 92, 246, .1), transparent 15rem),
      #171719 !important;
  }

  .workspace-sidebar .workspace-new-chat {
    min-height: 2.75rem;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 12% 25%, rgba(34, 184, 240, .19), transparent 36%),
      linear-gradient(110deg, rgba(34, 184, 240, .1), rgba(139, 92, 246, .14)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 .55rem 1.4rem rgba(72, 64, 145, .1);
  }

  .workspace-sidebar .workspace-new-chat i {
    border-radius: 999px;
  }

  .workspace-sidebar .workspace-userline {
    padding-right: .35rem;
    border-radius: 999px;
  }

  .workspace-sidebar .workspace-conversation,
  .workspace-sidebar .workspace-conversation.active {
    border-radius: .9rem;
  }

  .is-new-conversation .workspace-chat-area {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .is-new-conversation .workspace-messages {
    width: 100%;
  }

  .is-new-conversation .workspace-welcome,
  .sidebar-collapsed.is-new-conversation .workspace-welcome {
    padding: clamp(1rem, 4dvh, 2rem) .75rem !important;
  }

  .workspace-orb {
    overflow: visible;
    transform: translateZ(0);
  }

  .workspace-orb > i {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    line-height: 1;
  }

  .account-settings-top {
    height: 3.75rem;
    padding: 0 max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
  }

  .account-settings-top > .settings-brand,
  .account-settings-top .settings-logo {
    width: 8.75rem;
    height: 2.2rem;
  }

  .settings-tabs {
    grid-template-columns: repeat(5, minmax(8rem, 1fr));
  }

  .settings-tabs button {
    min-height: 3rem;
    padding: .38rem .48rem;
  }

  .settings-tabs button small {
    display: none;
  }

  .user-assistant-workspace .admin-content:not(.assistant-editor-open) #myAssistantBody,
  .chatbot-workspace-content {
    width: 100%;
    padding-right: .875rem !important;
    padding-left: .875rem !important;
  }

  .assistant-access-settings {
    padding: .65rem;
  }

  .assistant-access-settings #assistantAccessSettingsContent > .assistant-viewers-panel {
    margin-top: .6rem;
  }

  .assistant-viewers-panel {
    padding: .65rem;
  }

  .assistant-viewer-add {
    padding: .55rem;
  }

  .assistant-viewer-add > div {
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: .45rem;
  }

  .assistant-viewer-add input {
    width: 100%;
    min-width: 0;
  }

  .assistant-viewer-add button {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .assistant-viewer-row,
  .assistant-viewer-row.is-owner {
    padding: .55rem;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .assistant-viewer-role,
  .assistant-viewer-row > em {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .assistant-viewer-row > button {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
  }

  .conversation-share-back {
    padding: max(.6rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left));
  }

  .conversation-share-modal {
    width: 100%;
    max-height: calc(100dvh - 1.2rem);
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .conversation-share-head {
    grid-template-columns: 2.65rem minmax(0, 1fr) 2.1rem;
    gap: .6rem;
  }

  .conversation-share-head > span {
    width: 2.65rem;
    height: 2.65rem;
  }

  .conversation-share-head h2 {
    font-size: 1.1rem;
  }

  .conversation-share-head p,
  .conversation-share-notice p {
    overflow-wrap: anywhere;
  }

  .conversation-share-link {
    grid-template-columns: 1rem minmax(0, 1fr);
    padding: .55rem;
  }

  .conversation-share-link button {
    width: 100%;
    grid-column: 1 / -1;
  }
}

/* Masked composer glass keeps the background readable without a visible seam. */
.workspace-composer-wrap,
html[data-theme="dark"] .workspace-composer-wrap {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  isolation: isolate;
}

.is-new-conversation .workspace-composer-wrap::before {
  content: none;
  display: none;
}

.has-conversation .workspace-composer-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -3rem 0 -1px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 100%, rgba(34, 184, 240, .09), transparent 46%),
    radial-gradient(ellipse at 90% 100%, rgba(139, 92, 246, .1), transparent 52%),
    linear-gradient(to bottom, rgba(244, 245, 246, .72), rgba(244, 245, 246, .94) 62%, #f4f5f6 100%);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .08) 18%, rgba(0, 0, 0, .62) 58%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .08) 18%, rgba(0, 0, 0, .62) 58%, #000 100%);
}

html[data-theme="dark"] .has-conversation .workspace-composer-wrap::before {
  background:
    radial-gradient(ellipse at 12% 100%, rgba(34, 184, 240, .055), transparent 46%),
    radial-gradient(ellipse at 90% 100%, rgba(139, 92, 246, .085), transparent 52%),
    linear-gradient(to bottom, rgba(25, 25, 29, .7), rgba(25, 25, 29, .94) 62%, #19191d 100%);
}

.workspace-composer-wrap > .composer-shell {
  position: relative;
  z-index: 1;
}

.workspace-main::after,
html[data-theme="dark"] .workspace-main::after {
  content: none !important;
  display: none !important;
}

/* Keep shared account footers flush with the viewport edge on short pages. */
html:has(.account-settings-main > .settings-page-content),
body:has(.account-settings-main > .settings-page-content),
body:has(.account-settings-main > .settings-page-content) > #app {
  min-height: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

body:has(.account-settings-main > .settings-page-content) > #app,
.account-settings-page:has(> .account-settings-main > .settings-page-content) {
  display: flex;
  flex-direction: column;
}

.account-settings-page:has(> .account-settings-main > .settings-page-content) {
  flex: 1 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

.account-settings-main:has(> .settings-page-content) {
  width: 100%;
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100dvh - 4.5rem);
  margin: 4.5rem 0 0;
  padding: 0;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.account-settings-main:has(> .settings-page-content) > .settings-page-content {
  flex: 1 0 auto;
}

.account-settings-main > .marketing-footer {
  width: 100%;
  margin: auto 0 0;
  flex: 0 0 auto;
}

@media(max-width:760px) {
  .account-settings-page:has(> .account-settings-main > .subscription-page-content) {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .account-settings-main:has(> .subscription-page-content) {
    min-height: calc(100vh - 4.5rem);
    min-height: calc(100dvh - 4.5rem);
    display: flex;
    flex-direction: column;
  }

  .account-settings-main:has(> .subscription-page-content) > .subscription-page-content {
    flex: 1 0 auto;
  }
}

/* Assistant-aware user message colors and managed-assistant effects */
.workspace-messages .msg.me .bubble {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--message-accent, #7054c7) 42%, rgba(255, 255, 255, .28));
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(15, 10, 28, .22);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--message-accent, #7054c7) 17%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.workspace-messages .msg.me.assistant-color-message .bubble,
html[data-theme="dark"] .workspace-messages .msg.me.assistant-color-message .bubble {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .16), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--message-accent, #7054c7) 52%, #182131),
      color-mix(in srgb, var(--message-accent, #7054c7) 38%, #21172d)) !important;
}

.workspace-messages .msg.me.assistant-color-message .bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .12) 48%, transparent 76%);
  opacity: .55;
}

.workspace-messages .msg.me.admin-effect-message .bubble,
html[data-theme="dark"] .workspace-messages .msg.me.admin-effect-message .bubble {
  border-color: color-mix(in srgb, var(--message-accent, #7054c7) 54%, rgba(255, 255, 255, .34)) !important;
  background:
    radial-gradient(circle at 16% -18%, rgba(255, 255, 255, .24), transparent 36%),
    radial-gradient(circle at 88% 120%, rgba(34, 211, 238, .24), transparent 42%),
    linear-gradient(118deg,
      color-mix(in srgb, var(--message-accent, #7054c7) 58%, #21152f) 0%,
      color-mix(in srgb, var(--message-accent, #7054c7) 46%, #8246c8) 34%,
      color-mix(in srgb, var(--message-accent, #7054c7) 38%, #d946ef) 62%,
      color-mix(in srgb, var(--message-accent, #7054c7) 52%, #171c38) 100%) !important;
  background-size: 100% 100%, 100% 100%, 240% 240% !important;
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--message-accent, #7054c7) 24%, transparent),
    0 0 22px rgba(168, 85, 247, .12),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  animation: admin-message-aurora 7s ease-in-out infinite;
}

.workspace-messages .msg.me.admin-effect-message .bubble::before {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -55%;
  width: 42%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  filter: blur(2px);
  transform: skewX(-18deg);
  animation: admin-message-shimmer 4.8s ease-in-out infinite;
}

@keyframes admin-message-aurora {
  0%, 100% { background-position: 0 0, 0 0, 0% 50%; }
  50% { background-position: 0 0, 0 0, 100% 50%; }
}

@keyframes admin-message-shimmer {
  0%, 22% { left: -55%; opacity: 0; }
  38% { opacity: .72; }
  62% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

@media(prefers-reduced-motion: reduce) {
  .workspace-messages .msg.me.admin-effect-message .bubble,
  .workspace-messages .msg.me.admin-effect-message .bubble::before {
    animation: none !important;
  }
}


/* Assistant-aware send button effects */
.workspace-send.assistant-color-send,
.workspace-send.admin-effect-send {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--send-accent, #7054c7) 58%, rgba(255, 255, 255, .34));
  color: #fff;
  text-shadow: 0 1px 1px rgba(15, 10, 28, .22);
}

.workspace-send.assistant-color-send,
.workspace-send.assistant-color-send[aria-busy="true"] {
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, .23), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--send-accent, #7054c7) 72%, #243047),
      color-mix(in srgb, var(--send-accent, #7054c7) 68%, #6f35a9)) !important;
  box-shadow:
    0 9px 22px color-mix(in srgb, var(--send-accent, #7054c7) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

.workspace-send.admin-effect-send,
.workspace-send.admin-effect-send[aria-busy="true"] {
  background:
    radial-gradient(circle at 24% 8%, rgba(255, 255, 255, .32), transparent 34%),
    radial-gradient(circle at 88% 108%, rgba(34, 211, 238, .32), transparent 42%),
    linear-gradient(125deg,
      color-mix(in srgb, var(--send-accent, #7054c7) 60%, #21152f) 0%,
      color-mix(in srgb, var(--send-accent, #7054c7) 48%, #9a46dc) 38%,
      color-mix(in srgb, var(--send-accent, #7054c7) 40%, #e348ef) 68%,
      color-mix(in srgb, var(--send-accent, #7054c7) 55%, #18203a) 100%) !important;
  background-size: 100% 100%, 100% 100%, 260% 260% !important;
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--send-accent, #7054c7) 34%, transparent),
    0 0 18px rgba(168, 85, 247, .2),
    inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  animation: admin-send-aurora 5.4s ease-in-out infinite;
}

.workspace-send.assistant-color-send::before,
.workspace-send.admin-effect-send::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -45%;
  bottom: -45%;
  left: -65%;
  width: 48%;
  max-width: none;
  pointer-events: none;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  filter: blur(1px);
  transform: skewX(-18deg);
}

.workspace-send.assistant-color-send::before {
  opacity: .28;
  left: 12%;
}

.workspace-send.admin-effect-send::before {
  animation: admin-send-shimmer 3.7s ease-in-out infinite;
}

.workspace-send.assistant-color-send > *,
.workspace-send.admin-effect-send > * {
  position: relative;
  z-index: 2;
}

.workspace-send.assistant-color-send:hover,
.workspace-send.admin-effect-send:hover {
  transform: none;
  filter: brightness(1.08) saturate(1.08);
}

@keyframes admin-send-aurora {
  0%, 100% { background-position: 0 0, 0 0, 0% 50%; }
  50% { background-position: 0 0, 0 0, 100% 50%; }
}

@keyframes admin-send-shimmer {
  0%, 20% { left: -65%; opacity: 0; }
  38% { opacity: .85; }
  62% { left: 125%; opacity: 0; }
  100% { left: 125%; opacity: 0; }
}

@media(prefers-reduced-motion: reduce) {
  .workspace-send.admin-effect-send,
  .workspace-send.admin-effect-send::before {
    animation: none !important;
  }
}

/* Asistanlarım · Unity geliştirici modu */
.my-assistant-developer {
  display: grid;
  gap: 1rem;
}

.my-assistant-developer-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 8.5rem;
  padding: 1.25rem 1.4rem;
  overflow: hidden;
  color: #e8f8ff;
  border: 1px solid rgba(90, 211, 255, .28);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 88% 18%, rgba(53, 210, 255, .24), transparent 31%),
    linear-gradient(125deg, #112439 0%, #153951 54%, #17475b 100%);
  box-shadow: 0 18px 40px rgba(18, 58, 82, .16);
}

.my-assistant-developer-hero::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -6rem;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(123, 224, 255, .13);
  border-radius: 50%;
}

.my-assistant-developer-hero>span {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  color: #82e4ff;
  border: 1px solid rgba(127, 229, 255, .3);
  border-radius: 1rem;
  background: rgba(8, 25, 39, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  font-size: 2.25rem;
}

.my-assistant-developer-hero small,
.my-assistant-developer-panel-head small {
  display: block;
  margin-bottom: .3rem;
  color: #42c9ef;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.my-assistant-developer-hero h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.my-assistant-developer-hero p {
  max-width: 42rem;
  margin: .4rem 0 0;
  color: #b7d1de;
  font-size: .74rem;
  line-height: 1.55;
}

.my-assistant-developer-hero ol {
  position: relative;
  z-index: 1;
  display: flex;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-assistant-developer-hero li {
  display: grid;
  justify-items: center;
  gap: .28rem;
  min-width: 5.1rem;
  color: #afc9d6;
  font-size: .54rem;
  text-align: center;
}

.my-assistant-developer-hero li b {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  color: #9feaff;
  border: 1px solid rgba(109, 223, 255, .32);
  border-radius: 50%;
  background: rgba(21, 72, 92, .72);
  font-size: .6rem;
}

.my-assistant-developer-grid {
  display: grid;
  grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
  gap: 1rem;
}

.my-assistant-developer-config,
.my-assistant-developer-output {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid #dce8ee;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 55, 75, .07);
}

.my-assistant-developer-config {
  display: flex;
  flex-direction: column;
}

.my-assistant-developer-panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .7rem;
  margin-bottom: 1rem;
}

.my-assistant-developer-panel-head>span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  color: #1689ad;
  border-radius: .72rem;
  background: #e5f8fd;
  font-size: .9rem;
}

.my-assistant-developer-panel-head h3 {
  margin: 0;
  color: #183345;
  font-size: .86rem;
}

.my-assistant-developer-panel-head p {
  margin: .25rem 0 0;
  color: #738895;
  font-size: .63rem;
  line-height: 1.45;
}

.my-assistant-developer-panel-head>em {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .34rem .52rem;
  color: #778995;
  border: 1px solid #dce5e9;
  border-radius: 999px;
  background: #f7fafb;
  font-size: .57rem;
  font-style: normal;
  font-weight: 750;
}

.my-assistant-developer-panel-head>em i {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: #9aaab3;
}

.my-assistant-developer-output.is-ready .my-assistant-developer-panel-head>em {
  color: #087c59;
  border-color: #a7e4cf;
  background: #effcf7;
}

.my-assistant-developer-output.is-ready .my-assistant-developer-panel-head>em i {
  background: #15b77d;
  box-shadow: 0 0 0 .18rem rgba(21, 183, 125, .13);
}

.my-assistant-developer-config>label,
.my-assistant-developer-output>label {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .38rem;
  color: #344f60;
  font-size: .65rem;
  font-weight: 750;
}

.my-assistant-developer-output>label:not(:first-of-type) {
  margin-top: .78rem;
}

.my-assistant-developer-output>label small {
  color: #8aa0ad;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .55rem;
  font-weight: 600;
}

#myAssistantDeveloperSelect {
  width: 100%;
  height: 2.7rem;
  margin-top: .38rem;
  padding: 0 .75rem;
  color: #1c394a;
  border: 1px solid #cadce5;
  border-radius: .68rem;
  outline: none;
  background: #f9fcfd;
  font: inherit;
}

#myAssistantDeveloperSelect:focus {
  border-color: #28afd4;
  box-shadow: 0 0 0 .18rem rgba(40, 175, 212, .12);
}

.my-assistant-developer-selection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  margin: .8rem 0;
  padding: .65rem;
  border: 1px solid #e0e9ed;
  border-radius: .75rem;
  background: #f8fbfc;
}

.my-assistant-developer-selection .assistant-card-icon {
  width: 2.35rem;
  height: 2.35rem;
}

.my-assistant-developer-selection div {
  min-width: 0;
}

.my-assistant-developer-selection b,
.my-assistant-developer-selection small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-assistant-developer-selection b {
  color: #203d4f;
  font-size: .7rem;
}

.my-assistant-developer-selection small {
  margin-top: .18rem;
  color: #77909d;
  font-size: .56rem;
}

.my-assistant-developer-selection>i {
  color: #13a875;
  font-size: .9rem;
}

#myAssistantDeveloperGenerate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-height: 2.65rem;
  margin-top: auto;
  color: #fff;
  border: 0;
  border-radius: .7rem;
  background: linear-gradient(135deg, #147fa4, #19a8c8);
  box-shadow: 0 9px 20px rgba(17, 140, 174, .2);
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

#myAssistantDeveloperGenerate:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.my-assistant-developer-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .55rem;
  color: #8599a5;
  font-size: .56rem;
}

.my-assistant-developer-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .38rem .4rem .38rem .65rem;
  border: 1px solid #d3e0e6;
  border-radius: .72rem;
  background: #f8fbfc;
}

.my-assistant-developer-field>i {
  color: #4f94ab;
  font-size: .72rem;
}

.my-assistant-developer-field input,
.my-assistant-developer-field textarea {
  min-width: 0;
  width: 100%;
  padding: .3rem 0;
  resize: none;
  color: #284451;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .59rem;
  line-height: 1.42;
}

.my-assistant-developer-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  align-self: stretch;
  min-width: 5.2rem;
  color: #176e8a;
  border: 1px solid #b9dce7;
  border-radius: .52rem;
  background: #eaf8fc;
  font-size: .58rem;
  font-weight: 750;
  cursor: pointer;
}

.my-assistant-developer-field button:disabled {
  color: #96a5ac;
  border-color: #dbe3e7;
  background: #f1f4f5;
  cursor: not-allowed;
}

.my-assistant-unity-code {
  margin-top: .85rem;
  overflow: hidden;
  border: 1px solid #233b4a;
  border-radius: .72rem;
  background: #132531;
}

.my-assistant-unity-code>div {
  display: flex;
  justify-content: space-between;
  padding: .48rem .65rem;
  color: #8fb5c8;
  border-bottom: 1px solid rgba(159, 202, 221, .14);
  font-size: .53rem;
}

.my-assistant-unity-code pre {
  max-height: 5.5rem;
  margin: 0;
  padding: .7rem;
  overflow: auto;
  color: #9ee8ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .55rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.my-assistant-developer-security {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  color: #5f5127;
  border: 1px solid #efdc9b;
  border-radius: .85rem;
  background: #fffaf0;
}

.my-assistant-developer-security>i {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  color: #b68112;
  border-radius: .65rem;
  background: #fff0c5;
}

.my-assistant-developer-security b {
  font-size: .68rem;
}

.my-assistant-developer-security p {
  margin: .2rem 0 0;
  color: #85764b;
  font-size: .57rem;
  line-height: 1.45;
}

.my-assistant-developer-security>span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #8c721d;
  font-size: .56rem;
  font-weight: 750;
  white-space: nowrap;
}

.my-assistant-developer-empty {
  display: grid;
  justify-items: center;
  min-height: 24rem;
  align-content: center;
  padding: 2rem;
  text-align: center;
  border: 1px dashed #bfd5df;
  border-radius: 1rem;
  background: #f9fcfd;
}

.my-assistant-developer-empty>span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: #178bac;
  border-radius: 1rem;
  background: #e3f7fc;
  font-size: 1.5rem;
}

.my-assistant-developer-empty small { margin-top: 1rem; color: #1592b6; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.my-assistant-developer-empty h2 { margin: .4rem 0; color: #1c3b4c; font-size: 1.15rem; }
.my-assistant-developer-empty p { max-width: 32rem; margin: 0; color: #718794; font-size: .68rem; line-height: 1.55; }
.my-assistant-developer-empty a { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .72rem 1rem; color: #fff; border-radius: .65rem; background: #168eaf; font-size: .65rem; font-weight: 800; text-decoration: none; }

html[data-theme="dark"] .my-assistant-developer-config,
html[data-theme="dark"] .my-assistant-developer-output {
  color: #d8e8f0;
  border-color: #344b59;
  background: #1c2c37;
  box-shadow: none;
}

html[data-theme="dark"] .my-assistant-developer-panel-head h3,
html[data-theme="dark"] .my-assistant-developer-config>label,
html[data-theme="dark"] .my-assistant-developer-output>label,
html[data-theme="dark"] .my-assistant-developer-selection b { color: #d9eaf2; }
html[data-theme="dark"] .my-assistant-developer-panel-head p,
html[data-theme="dark"] .my-assistant-developer-selection small { color: #91a8b4; }
html[data-theme="dark"] .my-assistant-developer-panel-head>span { color: #69d9f5; background: #183e4c; }
html[data-theme="dark"] #myAssistantDeveloperSelect,
html[data-theme="dark"] .my-assistant-developer-selection,
html[data-theme="dark"] .my-assistant-developer-field { color: #d7e8f0; border-color: #3c5563; background: #172731; }
html[data-theme="dark"] .my-assistant-developer-field input,
html[data-theme="dark"] .my-assistant-developer-field textarea { color: #c9e6f2; }
html[data-theme="dark"] .my-assistant-developer-field button { color: #8be6fb; border-color: #33677a; background: #173c49; }
html[data-theme="dark"] .my-assistant-developer-field button:disabled { color: #70828b; border-color: #374953; background: #24333b; }
html[data-theme="dark"] .my-assistant-developer-security { color: #ebd98f; border-color: #685b30; background: #342f20; }
html[data-theme="dark"] .my-assistant-developer-security p { color: #b7a86f; }
html[data-theme="dark"] .my-assistant-developer-empty { border-color: #3b5664; background: #1c2c37; }
html[data-theme="dark"] .my-assistant-developer-empty h2 { color: #dcecf3; }
html[data-theme="dark"] .my-assistant-developer-empty p { color: #93a9b4; }

@media (max-width: 1100px) {
  .my-assistant-developer-hero { grid-template-columns: auto minmax(0, 1fr); }
  .my-assistant-developer-hero ol { grid-column: 1 / -1; justify-content: center; }
  .my-assistant-developer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .my-assistant-developer-hero { grid-template-columns: minmax(0, 1fr); padding: 1rem; text-align: center; }
  .my-assistant-developer-hero>span { justify-self: center; }
  .my-assistant-developer-hero ol { width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: .25rem; }
  .my-assistant-developer-config,
  .my-assistant-developer-output { padding: .85rem; }
  .my-assistant-developer-panel-head { grid-template-columns: auto minmax(0, 1fr); }
  .my-assistant-developer-panel-head>em { grid-column: 1 / -1; justify-self: start; }
  .my-assistant-developer-field { grid-template-columns: auto minmax(0, 1fr); }
  .my-assistant-developer-field button { grid-column: 1 / -1; min-height: 2.1rem; }
  .my-assistant-developer-security { grid-template-columns: auto minmax(0, 1fr); }
  .my-assistant-developer-security>span { grid-column: 1 / -1; white-space: normal; }
}

/* Minimal geliştirici modu ve kalıcı bağlantılar */
.developer-mode-shell {
  display: grid;
  gap: .8rem;
  width: 100%;
  min-width: 0;
}

.developer-mode-console,
.developer-mode-records,
.developer-mode-activation,
.developer-mode-security {
  border: 1px solid #d8e2e9;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 55, 72, .05);
}

.developer-mode-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
  overflow: hidden;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 8% 0%, rgba(116, 87, 229, .1), transparent 34%),
    linear-gradient(135deg, #fbfdff 0%, #f3f9fc 100%);
}
.developer-mode-console::before { content: ''; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #7657e5, #a347d0 48%, #11b5d0); }
.developer-mode-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: 0 1rem;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.developer-mode-header>div,
.developer-mode-record-identity,
.developer-mode-record-identity>div,
.developer-mode-security>span { min-width: 0; }
.developer-mode-header small,
.developer-mode-records-head small,
.developer-mode-activation>small:not(.developer-mode-mail-note) { color: #0789a5; font-size: .64rem; font-weight: 850; letter-spacing: .11em; }
.developer-mode-header h2 { margin: .34rem 0 .5rem; color: #162a37; font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.12; letter-spacing: -.035em; }
.developer-mode-header p { max-width: 36rem; margin: 0; color: #667d8a; font-size: .78rem; line-height: 1.65; }
.developer-mode-header-icon {
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  color: #8263df;
  border: 1px solid #d7cef5;
  border-radius: 1rem;
  background: linear-gradient(145deg, #f2edff, #edfaff);
  box-shadow: 0 12px 28px rgba(94, 74, 180, .12);
  font-size: 1.15rem;
}
.developer-mode-header>em {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  justify-self: start;
  margin-top: .9rem;
  padding: .4rem .62rem;
  color: #087a66;
  border: 1px solid #a7ded2;
  border-radius: 999px;
  background: #ecfbf7;
  font-size: .64rem;
  font-style: normal;
  font-weight: 800;
}
.developer-mode-capabilities { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.developer-mode-capabilities span { display: inline-flex; align-items: center; gap: .34rem; padding: .35rem .5rem; color: #5f6f7b; border: 1px solid #d9e4ea; border-radius: 999px; background: rgba(255,255,255,.7); font-size: .61rem; font-weight: 750; }
.developer-mode-capabilities i { color: #139fba; }

.developer-mode-generator {
  display: grid;
  align-content: center;
  gap: .8rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.6vw, 1.8rem);
  border-left: 1px solid #dce6ec;
  background: rgba(255,255,255,.68);
}
.developer-mode-generator-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.developer-mode-generator-head>span { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; color: #0d9db8; border-radius: .75rem; background: #e8f8fb; }
.developer-mode-generator-head small { display: block; color: #8a70d7; font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.developer-mode-generator-head h3 { margin: .12rem 0 0; color: #263d49; font-size: .9rem; }
.developer-mode-generator-head>em { display: inline-flex; align-items: center; gap: .3rem; color: #6b7c87; font-size: .6rem; font-style: normal; font-weight: 800; }
.developer-mode-generator label { display: grid; gap: .38rem; color: #344c5a; font-size: .67rem; font-weight: 800; }
.developer-mode-generator select {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0 .8rem;
  color: #213946;
  border: 1px solid #cad9e1;
  border-radius: .7rem;
  background: #f8fbfc;
  font: inherit;
}
.developer-mode-generator button,
.developer-mode-activation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  color: #fff;
  border: 0;
  border-radius: .7rem;
  background: linear-gradient(90deg, #7657e5, #a047ce 50%, #0daac5);
  box-shadow: 0 9px 21px rgba(104, 73, 198, .2);
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
}
.developer-mode-generator button:disabled { opacity: .5; cursor: not-allowed; }
.developer-mode-generator button>i:last-child { margin-left: auto; }
.developer-mode-generator>small { display: flex; align-items: center; gap: .35rem; color: #82929c; font-size: .61rem; }

.developer-mode-records { display: grid; gap: .9rem; padding: clamp(1rem, 2vw, 1.35rem); border-radius: 1rem; }
.developer-mode-records-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0 .1rem .15rem; }
.developer-mode-records-head h3 { margin: .18rem 0 .24rem; color: #1b303c; font-size: 1.08rem; }
.developer-mode-records-head p { margin: 0; color: #7b8d97; font-size: .66rem; line-height: 1.5; }
.developer-mode-records-head>span { display: inline-flex; align-items: center; gap: .34rem; flex: 0 0 auto; padding: .4rem .58rem; color: #647984; border-radius: 999px; background: #eef4f7; font-size: .64rem; font-weight: 800; }
.developer-mode-records-list { display: grid; gap: .75rem; min-width: 0; }
.developer-mode-record {
  min-width: 0;
  border: 1px solid #dce6eb;
  overflow: hidden;
  border-radius: .95rem;
  background: #fbfdfe;
  box-shadow: 0 7px 20px rgba(39, 61, 74, .04);
}
.developer-mode-record-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border-bottom: 1px solid #e1e9ed; background: linear-gradient(90deg, #f8fbfd, #fff); }
.developer-mode-record-identity { display: flex; align-items: center; gap: .65rem; }
.developer-mode-record-identity .assistant-card-icon { flex: 0 0 auto; width: 2.35rem; height: 2.35rem; }
.developer-mode-record-identity small { display: block; color: #8a70d7; font-size: .53rem; font-weight: 900; letter-spacing: .1em; }
.developer-mode-record-identity b { display: block; overflow: hidden; margin-top: .12rem; color: #203541; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.developer-mode-record-identity span { display: block; margin-top: .08rem; color: #8796a0; font-size: .58rem; }
.developer-mode-record-head>em { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding: .36rem .54rem; color: #13806d; border-radius: 999px; background: #ecfaf6; font-size: .61rem; font-style: normal; font-weight: 800; }
.developer-mode-record-head>em i { width: .42rem; height: .42rem; border-radius: 50%; background: #17ae91; box-shadow: 0 0 0 3px rgba(23,174,145,.12); }
.developer-mode-record.is-expired .developer-mode-record-head>em { color: #8b7777; background: #f6f1f1; }
.developer-mode-record.is-expired .developer-mode-record-head>em i { background: #a89999; box-shadow: none; }
.developer-mode-record-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: .75rem; padding: .9rem; }
.developer-mode-value { display: grid; align-content: start; gap: .48rem; min-width: 0; padding: .75rem; border: 1px solid #dfe7ec; border-radius: .75rem; background: #fff; }
.developer-mode-value-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.developer-mode-value-head>span { display: inline-flex; align-items: center; gap: .38rem; color: #304955; font-size: .67rem; }
.developer-mode-value-head>span i { color: #159db8; }
.developer-mode-value-head>code { color: #8d73d7; font: 700 .56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.developer-mode-value-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; overflow: hidden; border: 1px solid #d4e0e6; border-radius: .62rem; background: #f6f9fb; }
.developer-mode-record input,
.developer-mode-record textarea { width: 100%; min-width: 0; padding: .67rem .72rem; resize: none; color: #24404e; border: 0; outline: 0; background: transparent; font: 600 .62rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.developer-mode-record textarea { min-height: 3.65rem; overflow-wrap: anywhere; }
.developer-mode-record button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 5rem; padding: 0 .65rem; color: #087f98; border: 0; border-left: 1px solid #d4e0e6; background: #e9f7fa; font-size: .63rem; font-weight: 850; cursor: pointer; }
.developer-mode-record button:disabled { color: #94a0a6; cursor: not-allowed; }
.developer-mode-value>small { color: #8999a2; font-size: .57rem; line-height: 1.45; }
.developer-mode-value>small code { color: #7e64c6; font: 700 .56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.developer-mode-records-empty { display: grid; justify-items: center; gap: .32rem; padding: clamp(2rem, 5vw, 3.5rem) 1rem; color: #7c8e98; border: 1px dashed #cedce3; border-radius: .85rem; background: radial-gradient(circle at 50% 0%, rgba(112,83,211,.08), transparent 44%); text-align: center; }
.developer-mode-records-empty>span { position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: .45rem; color: #8769df; border: 1px solid #d8cff4; border-radius: 1.05rem; background: #f3efff; font-size: 1.15rem; }
.developer-mode-records-empty>span>i:last-child { position: absolute; right: -.15rem; bottom: -.15rem; width: .75rem; height: .75rem; border: 3px solid #fff; border-radius: 50%; background: #16abc4; }
.developer-mode-records-empty>small { color: #8a70d7; font-size: .54rem; font-weight: 900; letter-spacing: .12em; }
.developer-mode-records-empty>b { color: #314955; font-size: .9rem; }
.developer-mode-records-empty>p { max-width: 31rem; margin: .05rem 0 .8rem; font-size: .66rem; line-height: 1.55; }
.developer-mode-records-empty>div { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.developer-mode-records-empty>div span { display: inline-flex; align-items: center; gap: .34rem; color: #657883; font-size: .6rem; font-weight: 750; }
.developer-mode-records-empty>div span b { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; color: #fff; border-radius: 50%; background: #8a6bdc; font-size: .55rem; }
.developer-mode-records-empty>div>i { width: 1.5rem; height: 1px; background: #d1dbe1; }

.developer-mode-security { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .78rem .9rem; border-radius: .8rem; box-shadow: none; }
.developer-mode-security>span:first-child { display: grid; place-items: center; width: 2rem; height: 2rem; color: #a27b18; border-radius: .6rem; background: #fff7db; }
.developer-mode-security b,
.developer-mode-security small { display: block; }
.developer-mode-security b { color: #53451f; font-size: .72rem; }
.developer-mode-security small { margin-top: .12rem; color: #887a53; font-size: .65rem; line-height: 1.45; }
.developer-mode-security code { color: #8162c8; font: 700 .6rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.developer-mode-security>em { display: inline-flex; align-items: center; gap: .32rem; color: #7c6a35; font-size: .59rem; font-style: normal; font-weight: 800; white-space: nowrap; }

.developer-mode-activation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
  width: min(100%, 68rem);
  margin: clamp(1rem, 5vh, 3rem) auto 0;
  padding: 0;
  overflow: hidden;
  border-color: #ccdce5;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 7% 5%, rgba(111, 80, 226, .12), transparent 33%),
    linear-gradient(135deg, #f9fcfe 0%, #f4f9fc 100%);
  text-align: left;
}
.developer-mode-activation::before { content: ''; position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #7657e5, #a347d0 48%, #10b8d1); }
.developer-mode-activation-copy { display: grid; align-content: center; justify-items: start; min-width: 0; padding: clamp(1.65rem, 4vw, 3rem); }
.developer-mode-activation-copy>small { color: #7055c8; font-size: .64rem; font-weight: 900; letter-spacing: .13em; }
.developer-mode-activation-icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; margin-bottom: 1rem; color: #805fe2; border: 1px solid #d8cff5; border-radius: 1rem; background: linear-gradient(145deg, #f3eeff, #f7fbff); box-shadow: 0 10px 24px rgba(111, 80, 200, .12); font-size: 1.18rem; }
.developer-mode-activation h2 { max-width: 30rem; margin: .42rem 0 .55rem; color: #172e3a; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -.035em; }
.developer-mode-activation p { max-width: 31rem; margin: 0; color: #657b88; font-size: .8rem; line-height: 1.65; }
.developer-mode-activation-points { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1.25rem; }
.developer-mode-activation-points span { display: inline-flex; align-items: center; gap: .4rem; color: #536a77; font-size: .67rem; font-weight: 750; }
.developer-mode-activation-points i { color: #139eb8; }
.developer-mode-activation-action { display: grid; align-content: center; min-width: 0; padding: clamp(1.35rem, 3.5vw, 2.35rem); border-left: 1px solid #dce6ec; background: rgba(255, 255, 255, .7); }
.developer-mode-email { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; min-width: 0; padding: .8rem; border: 1px solid #d8e3e9; border-radius: .75rem; background: #f8fbfd; }
.developer-mode-email>i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #139db7; border-radius: .65rem; background: #e9f8fb; }
.developer-mode-email>span { min-width: 0; }
.developer-mode-email small,
.developer-mode-email b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-mode-email small { color: #8a9aa4; font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.developer-mode-email b { margin-top: .18rem; color: #304955; font-size: .75rem; }
.developer-mode-activation-action>p { margin-top: .75rem; font-size: .69rem; line-height: 1.55; }
.developer-mode-activation button { width: 100%; margin-top: 1rem; background: linear-gradient(90deg, #7657e5, #a347d0 52%, #0dacc6); box-shadow: 0 10px 24px rgba(116, 77, 210, .2); transition: transform .18s ease, filter .18s ease, opacity .18s ease; }
.developer-mode-activation button:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
.developer-mode-activation button:disabled { opacity: .56; box-shadow: none; cursor: not-allowed; }
.developer-mode-countdown { display: grid; gap: .5rem; margin-top: .7rem; color: #6f7f89; font-size: .64rem; }
.developer-mode-countdown[hidden] { display: none; }
.developer-mode-countdown>span { display: flex; align-items: center; justify-content: center; gap: .32rem; }
.developer-mode-countdown>span i { color: #8a62d1; }
.developer-mode-countdown>span b { min-width: 1.2rem; color: #6950b5; text-align: right; }
.developer-mode-countdown>i { display: block; height: 3px; overflow: hidden; border-radius: 999px; background: #e6e8ef; }
.developer-mode-countdown>i>b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7657e5, #14aec7); transition: width .25s linear; }
.developer-mode-mail-note { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .75rem; color: #8999a2; font-size: .61rem; line-height: 1.45; text-align: center; }

html[data-theme="dark"] .developer-mode-console,
html[data-theme="dark"] .developer-mode-records,
html[data-theme="dark"] .developer-mode-activation,
html[data-theme="dark"] .developer-mode-security { border-color: #303b49; background: #151e28; box-shadow: none; }
html[data-theme="dark"] .developer-mode-console { background: radial-gradient(circle at 8% 0%, rgba(116, 81, 225, .18), transparent 35%), linear-gradient(135deg, #171a24 0%, #111922 100%); }
html[data-theme="dark"] .developer-mode-header h2,
html[data-theme="dark"] .developer-mode-records-head h3,
html[data-theme="dark"] .developer-mode-record-identity b,
html[data-theme="dark"] .developer-mode-records-empty>b,
html[data-theme="dark"] .developer-mode-activation h2 { color: #dce9ef; }
html[data-theme="dark"] .developer-mode-header p,
html[data-theme="dark"] .developer-mode-generator>small,
html[data-theme="dark"] .developer-mode-record-identity span,
html[data-theme="dark"] .developer-mode-records-head p,
html[data-theme="dark"] .developer-mode-records-empty,
html[data-theme="dark"] .developer-mode-activation p,
html[data-theme="dark"] .developer-mode-mail-note { color: #91a4ae; }
html[data-theme="dark"] .developer-mode-header-icon { color: #a78df4; border-color: #443c61; background: linear-gradient(145deg, #28223a, #17303a); box-shadow: 0 14px 32px rgba(5,9,17,.28); }
html[data-theme="dark"] .developer-mode-header>em { color: #63d2b9; border-color: #28574f; background: #142e2b; }
html[data-theme="dark"] .developer-mode-capabilities span { color: #a5b3bc; border-color: #303d49; background: rgba(18,26,35,.72); }
html[data-theme="dark"] .developer-mode-generator { border-left-color: #303746; background: rgba(7,12,19,.3); }
html[data-theme="dark"] .developer-mode-generator-head>span { color: #5ad2e5; background: #16333e; }
html[data-theme="dark"] .developer-mode-generator-head h3 { color: #d2dfe5; }
html[data-theme="dark"] .developer-mode-generator-head>em,
html[data-theme="dark"] .developer-mode-generator label { color: #9babb5; }
html[data-theme="dark"] .developer-mode-generator select,
html[data-theme="dark"] .developer-mode-record { color: #d2e0e6; border-color: #303d49; background: #111a23; }
html[data-theme="dark"] .developer-mode-generator select { color: #d1dee4; border-color: #344450; background: #121c26; }
html[data-theme="dark"] .developer-mode-record-head { border-bottom-color: #2e3a46; background: linear-gradient(90deg, #151f29, #121a23); }
html[data-theme="dark"] .developer-mode-record-head>em { color: #64ceb7; background: #142d2a; }
html[data-theme="dark"] .developer-mode-record.is-expired .developer-mode-record-head>em { color: #aa9696; background: #2b2227; }
html[data-theme="dark"] .developer-mode-value { border-color: #2e3b47; background: #121b24; }
html[data-theme="dark"] .developer-mode-value-head>span { color: #c2d1d8; }
html[data-theme="dark"] .developer-mode-value-control { border-color: #30424e; background: #0c141c; }
html[data-theme="dark"] .developer-mode-record input,
html[data-theme="dark"] .developer-mode-record textarea { color: #c7dce5; }
html[data-theme="dark"] .developer-mode-record button { color: #78d9eb; border-color: #30424e; background: #16313b; }
html[data-theme="dark"] .developer-mode-value>small { color: #7f929d; }
html[data-theme="dark"] .developer-mode-records-head>span { color: #9cafb8; background: #263942; }
html[data-theme="dark"] .developer-mode-records-empty { border-color: #35434f; background: radial-gradient(circle at 50% 0%, rgba(119,82,221,.14), transparent 45%); }
html[data-theme="dark"] .developer-mode-records-empty>span { color: #a58bef; border-color: #433a5f; background: #252039; }
html[data-theme="dark"] .developer-mode-records-empty>span>i:last-child { border-color: #151e28; }
html[data-theme="dark"] .developer-mode-records-empty>div span { color: #96a7b0; }
html[data-theme="dark"] .developer-mode-records-empty>div>i { background: #34424d; }
html[data-theme="dark"] .developer-mode-security>span:first-child { color: #e3b84d; background: #332b18; }
html[data-theme="dark"] .developer-mode-security b { color: #e4d59b; }
html[data-theme="dark"] .developer-mode-security small { color: #aa9f78; }
html[data-theme="dark"] .developer-mode-security>em { color: #a99c74; }
html[data-theme="dark"] .developer-mode-activation { border-color: #343849; background: radial-gradient(circle at 6% 8%, rgba(116, 81, 225, .18), transparent 34%), linear-gradient(135deg, #161923 0%, #111821 100%); }
html[data-theme="dark"] .developer-mode-activation-copy>small { color: #9f88f3; }
html[data-theme="dark"] .developer-mode-activation-icon { color: #a98ff6; border-color: #443b62; background: linear-gradient(145deg, #29233b, #172734); box-shadow: 0 14px 32px rgba(7, 10, 19, .28); }
html[data-theme="dark"] .developer-mode-activation-points span { color: #9babb5; }
html[data-theme="dark"] .developer-mode-activation-action { border-left-color: #303746; background: rgba(10, 15, 23, .34); }
html[data-theme="dark"] .developer-mode-email { border-color: #303b49; background: #151e29; }
html[data-theme="dark"] .developer-mode-email>i { color: #61d4e5; background: #17333e; }
html[data-theme="dark"] .developer-mode-email small { color: #738592; }
html[data-theme="dark"] .developer-mode-email b { color: #d7e3e9; }
html[data-theme="dark"] .developer-mode-countdown { color: #8e9ba5; }
html[data-theme="dark"] .developer-mode-countdown>span b { color: #a993ef; }
html[data-theme="dark"] .developer-mode-countdown>i { background: #2b303d; }

@media (max-width: 820px) {
  .developer-mode-console { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-generator { border-top: 1px solid #dce6ec; border-left: 0; }
  .developer-mode-record-grid { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-activation { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-activation-action { border-top: 1px solid #dce6ec; border-left: 0; }
  html[data-theme="dark"] .developer-mode-generator { border-top-color: #303746; border-left: 0; }
  html[data-theme="dark"] .developer-mode-activation-action { border-top-color: #303746; border-left: 0; }
}

@media (max-width: 560px) {
  .developer-mode-header { gap: 0 .7rem; padding: 1.15rem; }
  .developer-mode-header-icon { width: 2.8rem; height: 2.8rem; border-radius: .8rem; }
  .developer-mode-header>em { grid-column: 1 / -1; margin-top: .8rem; }
  .developer-mode-generator { padding: 1.05rem; }
  .developer-mode-generator-head { grid-template-columns: auto minmax(0, 1fr); }
  .developer-mode-generator-head>em { grid-column: 2; }
  .developer-mode-generator button { width: 100%; }
  .developer-mode-records { padding: .85rem; }
  .developer-mode-records-head { align-items: center; }
  .developer-mode-records-head p { display: none; }
  .developer-mode-record-head { align-items: flex-start; padding: .75rem; }
  .developer-mode-record-head>em { padding: .34rem; font-size: 0; }
  .developer-mode-record-head>em i { margin: 0; }
  .developer-mode-record-grid { padding: .7rem; }
  .developer-mode-value-control { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-record button { min-height: 2.2rem; border-top: 1px solid #d2dfe5; border-left: 0; }
  html[data-theme="dark"] .developer-mode-record button { border-top-color: #3a515d; }
  .developer-mode-records-empty>div { display: grid; justify-items: start; }
  .developer-mode-records-empty>div>i { display: none; }
  .developer-mode-security { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .developer-mode-security>em { grid-column: 2; }
  .developer-mode-activation { margin-top: 1rem; border-radius: .9rem; }
  .developer-mode-activation-copy,
  .developer-mode-activation-action { padding: 1.2rem; }
  .developer-mode-activation h2 { font-size: 1.4rem; }
  .developer-mode-activation-points { display: grid; }
}

/* Geliştirici Modu: panel ile uyumlu kompakt son düzen */
.developer-mode-shell { gap: .7rem; }

.developer-mode-console {
  grid-template-columns: minmax(16rem, .72fr) minmax(25rem, 1.28fr);
  border-radius: .85rem;
  background: #fff;
  animation: developer-mode-enter .32s ease both;
}

.developer-mode-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .78rem .9rem;
}

.developer-mode-header-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .68rem;
  box-shadow: none;
  font-size: .82rem;
}

.developer-mode-header small { font-size: .51rem; }
.developer-mode-header h2 { margin: .16rem 0 .1rem; font-size: .93rem; letter-spacing: -.02em; }
.developer-mode-header p { font-size: .61rem; line-height: 1.4; }
.developer-mode-header>em {
  grid-column: auto;
  justify-self: end;
  margin: 0;
  padding: .34rem .5rem;
  font-size: .57rem;
}

.developer-mode-generator {
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: end;
  gap: .55rem;
  padding: .7rem .8rem;
}

.developer-mode-generator label { gap: .25rem; font-size: .58rem; }
.developer-mode-generator select {
  height: 2.3rem;
  padding: 0 .68rem;
  border-radius: .58rem;
  font-size: .66rem;
}

.developer-mode-generator button {
  width: auto;
  min-height: 2.3rem;
  padding: 0 .78rem;
  border-radius: .58rem;
  box-shadow: 0 6px 14px rgba(99, 72, 190, .16);
  font-size: .65rem;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.developer-mode-generator button:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 9px 19px rgba(99, 72, 190, .22); }
.developer-mode-token-life { align-self: center; padding: .36rem .48rem; border: 1px solid #dce5ea; border-radius: 999px; background: #f7fafb; white-space: nowrap; }

.developer-mode-records {
  gap: .65rem;
  padding: .85rem;
  border-radius: .85rem;
  animation: developer-mode-enter .36s .04s ease both;
}

.developer-mode-records-head { align-items: center; padding: 0; }
.developer-mode-records-head h3 { margin: .12rem 0 0; font-size: .88rem; }
.developer-mode-record-filters { display: flex; align-items: center; gap: .3rem; padding: .2rem; border: 1px solid #dce5ea; border-radius: .65rem; background: #f5f8fa; }
.developer-mode-record-filters button {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 1.9rem;
  padding: 0 .55rem;
  color: #71838e;
  border: 0;
  border-radius: .48rem;
  background: transparent;
  font-size: .59rem;
  font-weight: 800;
  cursor: pointer;
}
.developer-mode-record-filters button>i { width: .38rem; height: .38rem; border-radius: 50%; background: #9daab1; }
.developer-mode-record-filters button>b { min-width: 1.15rem; padding: .16rem .28rem; border-radius: 999px; background: rgba(118,132,143,.1); font-size: .53rem; }
.developer-mode-record-filters button.active { color: #087f98; background: #fff; box-shadow: 0 2px 8px rgba(31,55,70,.08); }
.developer-mode-record-filters button[data-developer-filter="active"].active>i { background: #18af91; box-shadow: 0 0 0 3px rgba(24,175,145,.1); }
.developer-mode-record-filters button[data-developer-filter="expired"].active { color: #8f6d76; }
.developer-mode-record-filters button[data-developer-filter="expired"].active>i { background: #a6878f; }

.developer-mode-records-list { gap: .42rem; }
.developer-mode-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(18rem, .72fr);
  align-items: center;
  gap: .65rem;
  padding: .58rem .65rem;
  overflow: visible;
  border-radius: .68rem;
  box-shadow: none;
  animation: developer-record-enter .28s ease both;
}
.developer-mode-record[hidden] { display: none; }
.developer-mode-record:hover { border-color: #cbdde5; background: #f8fbfc; }
.developer-mode-record.is-expired { opacity: .78; }
.developer-mode-record-identity { gap: .55rem; }
.developer-mode-record-identity .assistant-card-icon { width: 2rem; height: 2rem; }
.developer-mode-record-identity small { font-size: .47rem; }
.developer-mode-record-identity b { margin-top: .08rem; font-size: .7rem; }
.developer-mode-record-identity span { font-size: .52rem; }
.developer-mode-record>em {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .3rem .46rem;
  color: #13806d;
  border-radius: 999px;
  background: #ecfaf6;
  font-size: .54rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.developer-mode-record>em i { width: .36rem; height: .36rem; border-radius: 50%; background: #17ae91; }
.developer-mode-record.is-expired>em { color: #8b7777; background: #f6f1f1; }
.developer-mode-record.is-expired>em i { background: #a89999; }
.developer-mode-record-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .38rem; }
.developer-mode-record .developer-mode-record-actions button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  min-height: 2.5rem;
  padding: .38rem .5rem;
  color: #48616e;
  border: 1px solid #dce5ea;
  border-radius: .58rem;
  background: #f7fafb;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.developer-mode-record-actions button>i:first-child { color: #149db8; }
.developer-mode-record-actions button>i:last-child { color: #8da0aa; }
.developer-mode-record-actions button span { min-width: 0; }
.developer-mode-record-actions button small,
.developer-mode-record-actions button b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-mode-record-actions button small { color: #9276d9; font: 700 .48rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.developer-mode-record-actions button b { margin-top: .1rem; color: inherit; font-size: .59rem; }
.developer-mode-record-actions button:hover { border-color: #9ed5df; background: #edf9fb; transform: translateY(-1px); }
.developer-mode-record-actions button.copied { color: #087a66; border-color: #9edccc; background: #ecfaf6; }
.developer-mode-record-actions button:disabled { opacity: .45; cursor: not-allowed; }

.developer-mode-records-empty {
  gap: .25rem;
  padding: 1.8rem 1rem;
  border-radius: .7rem;
  background: #fafcfd;
}
.developer-mode-records-empty[hidden] { display: none; }
.developer-mode-records-empty>span { width: 2.5rem; height: 2.5rem; margin: 0 0 .25rem; border-radius: .72rem; font-size: .8rem; }
.developer-mode-records-empty>span>i:last-child { position: static; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; }
.developer-mode-records-empty>b { font-size: .76rem; }
.developer-mode-records-empty>p { margin: 0; font-size: .58rem; }
.developer-mode-pagination { display: flex; align-items: center; justify-content: center; gap: .42rem; min-height: 1.9rem; }
.developer-mode-pagination[hidden] { display: none; }
.developer-mode-pagination button { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #6f8290; border: 1px solid #d9e3e8; border-radius: .5rem; background: #f7fafb; cursor: pointer; }
.developer-mode-pagination button:disabled { opacity: .35; cursor: default; }
.developer-mode-pagination span { color: #8797a0; font-size: .58rem; }
.developer-mode-pagination span b { color: #7658ca; }

.developer-mode-activation {
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  width: 100%;
  margin: .5rem 0 0;
  border-radius: .85rem;
  animation: developer-mode-enter .32s ease both;
}
.developer-mode-activation-copy {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: .8rem;
  padding: 1rem 1.15rem;
}
.developer-mode-activation-copy>div { min-width: 0; }
.developer-mode-activation-copy>div>small { color: #7055c8; font-size: .52rem; font-weight: 900; letter-spacing: .12em; }
.developer-mode-activation-icon { width: 2.65rem; height: 2.65rem; margin: 0; border-radius: .75rem; box-shadow: none; font-size: .9rem; }
.developer-mode-activation h2 { margin: .2rem 0 .22rem; font-size: 1.05rem; }
.developer-mode-activation p { max-width: 38rem; font-size: .65rem; line-height: 1.5; }
.developer-mode-activation-action {
  grid-template-columns: minmax(11rem, 1fr) auto;
  align-items: center;
  align-content: center;
  gap: .55rem;
  padding: .85rem 1rem;
}
.developer-mode-email { padding: .55rem .62rem; border-radius: .62rem; }
.developer-mode-email>i { width: 1.85rem; height: 1.85rem; border-radius: .52rem; }
.developer-mode-activation button { width: auto; min-height: 2.35rem; margin: 0; padding: 0 .8rem; white-space: nowrap; }
.developer-mode-countdown,
.developer-mode-mail-note { grid-column: 1 / -1; margin-top: 0; }
.developer-mode-countdown { gap: .32rem; }

html[data-theme="dark"] .developer-mode-console { background: #151e28; }
html[data-theme="dark"] .developer-mode-token-life { border-color: #33414c; background: #111a23; }
html[data-theme="dark"] .developer-mode-record-filters { border-color: #303d49; background: #111922; }
html[data-theme="dark"] .developer-mode-record-filters button { color: #8799a4; }
html[data-theme="dark"] .developer-mode-record-filters button.active { color: #70d8e9; background: #1b2a34; box-shadow: none; }
html[data-theme="dark"] .developer-mode-record-filters button[data-developer-filter="expired"].active { color: #c2a8af; }
html[data-theme="dark"] .developer-mode-record { border-color: #2d3b47; background: #121b24; }
html[data-theme="dark"] .developer-mode-record:hover { border-color: #3a5260; background: #15212b; }
html[data-theme="dark"] .developer-mode-record>em { color: #64ceb7; background: #142d2a; }
html[data-theme="dark"] .developer-mode-record.is-expired>em { color: #aa9696; background: #2b2227; }
html[data-theme="dark"] .developer-mode-record .developer-mode-record-actions button { color: #a8bbc4; border-color: #30404c; background: #101922; }
html[data-theme="dark"] .developer-mode-record-actions button:hover { border-color: #376b76; background: #142832; }
html[data-theme="dark"] .developer-mode-record-actions button.copied { color: #66d2ba; border-color: #285f54; background: #142c29; }
html[data-theme="dark"] .developer-mode-records-empty { border-color: #34434e; background: #111922; }
html[data-theme="dark"] .developer-mode-pagination button { color: #9caeb7; border-color: #33424e; background: #111a23; }
html[data-theme="dark"] .developer-mode-activation-copy>div>small { color: #a68df2; }

@keyframes developer-mode-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes developer-record-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 920px) {
  .developer-mode-console { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-generator { border-top: 1px solid #dce6ec; border-left: 0; }
  .developer-mode-record { grid-template-columns: minmax(0, 1fr) auto; }
  .developer-mode-record-actions { grid-column: 1 / -1; }
  html[data-theme="dark"] .developer-mode-generator { border-top-color: #303746; }
}

@media (max-width: 680px) {
  .developer-mode-header { grid-template-columns: auto minmax(0, 1fr); }
  .developer-mode-header>em { grid-column: 2; justify-self: start; margin-top: .35rem; }
  .developer-mode-header p { display: none; }
  .developer-mode-generator { grid-template-columns: minmax(0, 1fr) auto; }
  .developer-mode-generator button { grid-column: 1 / -1; width: 100%; }
  .developer-mode-records-head { align-items: flex-start; }
  .developer-mode-record-filters { flex-wrap: wrap; justify-content: flex-end; }
  .developer-mode-record { grid-template-columns: minmax(0, 1fr) auto; }
  .developer-mode-record>em { padding: .3rem; font-size: 0; }
  .developer-mode-record-actions { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-activation { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-activation-action { border-top: 1px solid #dce6ec; border-left: 0; }
  html[data-theme="dark"] .developer-mode-activation-action { border-top-color: #303746; }
}

@media (max-width: 430px) {
  .developer-mode-header,
  .developer-mode-generator,
  .developer-mode-activation-copy,
  .developer-mode-activation-action { padding: .72rem; }
  .developer-mode-records { padding: .7rem; }
  .developer-mode-records-head { display: grid; }
  .developer-mode-record-filters { justify-self: stretch; }
  .developer-mode-record-filters button { flex: 1; justify-content: center; }
  .developer-mode-activation-action { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-activation button { width: 100%; }
  .developer-mode-countdown,
  .developer-mode-mail-note { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .developer-mode-console,
  .developer-mode-records,
  .developer-mode-activation,
  .developer-mode-record { animation: none; }
  .developer-mode-generator button,
  .developer-mode-record-actions button { transition: none; }
}

/* Final developer mode cascade: keep the refreshed layout above legacy rules. */
.developer-mode-console {
  grid-template-columns: minmax(18rem, .78fr) minmax(31rem, 1.22fr);
  border-radius: 1.45rem;
}

.developer-mode-generator {
  grid-template-columns: minmax(10rem, .62fr) minmax(20rem, 1.38fr) auto;
  align-items: center;
}

.developer-mode-generator-head { grid-column: 1; }
.developer-mode-generator-fields { grid-column: 2; }
.developer-mode-generator-note { grid-column: 1 / -1; grid-row: 2; }
.developer-mode-generator>button { grid-column: 3; grid-row: 1; white-space: nowrap; }

.developer-mode-record {
  display: grid;
  grid-template-columns: minmax(11rem, .7fr) minmax(18rem, 1fr) minmax(24rem, 1.25fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .72rem;
  border-radius: 1rem;
  overflow: visible;
}

.developer-mode-record-dates,
.developer-mode-record-values,
.developer-mode-record-controls {
  grid-column: auto;
  grid-row: auto;
}

.developer-mode-record.is-revoked { opacity: .86; }
.developer-mode-record.is-expired { opacity: .82; }

@media (max-width: 1240px) {
  .developer-mode-record {
    grid-template-columns: minmax(12rem, .75fr) minmax(20rem, 1.25fr) auto;
  }

  .developer-mode-record-dates {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 920px) {
  .developer-mode-console { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-generator { grid-template-columns: minmax(10rem, .62fr) minmax(20rem, 1.38fr) auto; }
  .developer-mode-record { grid-template-columns: minmax(0, 1fr) auto; }
  .developer-mode-record-dates,
  .developer-mode-record-values { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .developer-mode-generator { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-generator-head,
  .developer-mode-generator-fields,
  .developer-mode-generator-note,
  .developer-mode-generator>button { grid-column: 1; grid-row: auto; }
  .developer-mode-record-dates,
  .developer-mode-record-values { grid-template-columns: minmax(0, 1fr); }
  .developer-mode-record-controls { grid-column: 1 / -1; }
}