html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(59, 130, 246, .28);
  color: #fff;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: .5rem;
  padding: .52rem .65rem;
  color: #aeb7cb;
  font-size: .86rem;
  font-weight: 600;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.nav-link span {
  min-width: 0;
  flex: 1;
}

.nav-badge {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  padding: 0 .35rem;
  font-size: .68rem;
  font-weight: 900;
}

.nav-link:hover {
  background: rgba(255, 255, 255, .045);
  color: #fff;
}

.nav-link-active {
  background: linear-gradient(90deg, rgba(59, 130, 246, .16), rgba(59, 130, 246, .04));
  color: #60a5fa;
}

.nav-section {
  padding: 0 .65rem;
  color: #6f7a91;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.surface {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 20px 50px rgba(0, 0, 0, .18);
}

.premium-card {
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022)),
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .10), transparent 34%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 24px 70px rgba(0, 0, 0, .22);
  min-width: 0;
}

.premium-card-featured {
  border-color: rgba(245, 158, 11, .26);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, .075), rgba(255, 255, 255, .024)),
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .10), transparent 34%);
}

.benefit-showcase-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022)),
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .10), transparent 34%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 24px 70px rgba(0, 0, 0, .22);
}

.benefit-showcase-featured {
  border-color: rgba(245, 158, 11, .28);
}

.benefit-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .035);
}

.benefit-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefit-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .14);
  color: #fde68a;
  padding: .34rem .68rem;
  font-size: .72rem;
  font-weight: 900;
}

.benefit-badge-float {
  position: absolute;
  left: 1rem;
  top: 1rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.benefit-price-box {
  margin-top: 1.15rem;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .14);
  padding: 1rem;
}

.benefit-normal-price {
  color: #8892a8;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: line-through;
}

.benefit-offer-price {
  margin-top: .25rem;
  color: #fff;
  font-size: clamp(1.7rem, 6vw, 2.35rem);
  font-weight: 850;
  line-height: 1;
}

.benefit-savings {
  margin-top: .55rem;
  color: #6ee7b7;
  font-size: .82rem;
  font-weight: 900;
}

.benefit-meta-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  color: #aeb7cb;
  font-size: .84rem;
  font-weight: 750;
}

.benefit-meta-row svg {
  flex: 0 0 auto;
  color: #60a5fa;
}

.cta-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: .6rem;
  background: #3b82f6;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .01em;
}

.account-switcher {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .025);
  padding: .65rem;
}

.sidebar-note {
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .022);
  padding: .75rem;
}

.sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: .65rem;
  padding: .65rem .7rem;
  color: #cbd5e1;
  font-size: .84rem;
  font-weight: 650;
  transition: background .16s ease, color .16s ease;
}

.sidebar-footer-link:hover {
  background: rgba(255, 255, 255, .045);
  color: #fff;
}

.surface:hover {
  border-color: rgba(255, 255, 255, .12);
}

.shadow-premium {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 26px 90px rgba(0, 0, 0, .34);
}

.section-kicker {
  color: #7d879b;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, .075);
  background:
    linear-gradient(135deg, rgba(16, 22, 35, .92), rgba(7, 10, 18, .94)),
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, .12), transparent 28%);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 28px 90px rgba(0, 0, 0, .28);
}

.hero-line {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(59, 130, 246, .78), transparent);
}

.hero-brief {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .028);
  padding: 1rem;
}

.hero-mini-card {
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
  padding: .85rem;
}

.hero-mini-card span {
  display: block;
  color: #7d879b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-mini-card strong {
  display: block;
  margin-top: .35rem;
  color: #fff;
  font-size: .92rem;
  line-height: 1.35;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .025);
  padding: .85rem;
}

.metric-row-clickable {
  color: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.metric-row-clickable:hover {
  border-color: rgba(59, 130, 246, .32);
  background: rgba(59, 130, 246, .07);
  transform: translateY(-1px);
}

.editorial-section {
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .028);
  padding: 1.25rem;
}

.human-panel {
  border-radius: 1.1rem;
  border: 1px solid rgba(59, 130, 246, .18);
  background: linear-gradient(180deg, rgba(59, 130, 246, .07), rgba(255, 255, 255, .026));
  padding: 1.25rem;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.section-heading h3 {
  margin-top: .25rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.text-link {
  color: #60a5fa;
  font-size: .84rem;
  font-weight: 700;
  transition: color .16s ease, opacity .16s ease;
}

.text-link:hover {
  opacity: .78;
}

.service-row,
.action-row,
.document-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  border-radius: .85rem;
  transition: background .16s ease, transform .16s ease;
}

.service-row {
  justify-content: space-between;
  padding: .9rem .35rem;
}

.action-row {
  justify-content: space-between;
  padding: .85rem;
}

.document-row {
  padding: .75rem;
}

.service-row:hover,
.action-row:hover,
.document-row:hover {
  background: rgba(255, 255, 255, .038);
}

.status-dot {
  width: .55rem;
  height: .55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(148, 163, 184, .7);
}

.status-dot-active {
  background: #3b82f6;
  box-shadow: 0 0 18px rgba(59, 130, 246, .42);
}

.soft-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  padding: .28rem .62rem;
  color: #d8deea;
  font-size: .72rem;
  font-weight: 600;
}

.ops-badge {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  padding: .35rem .72rem;
  color: #aeb7cb;
  font-size: .76rem;
  font-weight: 600;
}

.ops-badge-active {
  border-color: rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .14);
  color: #dbeafe;
}

.ops-card,
.quick-link,
.next-step-row,
.report-feature {
  border-radius: .95rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .026);
}

.ops-card {
  display: flex;
  min-height: 5.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ops-card:hover,
.quick-link:hover {
  border-color: rgba(59, 130, 246, .30);
  background: rgba(59, 130, 246, .055);
  transform: translateY(-1px);
}

.quick-link {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  gap: .65rem;
  padding: .85rem;
  color: #e5e7eb;
  font-size: .86rem;
  font-weight: 600;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.quick-link svg {
  color: #60a5fa;
}

.quick-link strong {
  margin-left: auto;
  color: #93c5fd;
  font-size: .78rem;
  font-weight: 600;
}

.next-step-row {
  padding: 1rem;
}

.report-feature {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: .9rem;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: .95rem;
  top: 2.3rem;
  bottom: -1.45rem;
  width: 1px;
  background: rgba(255, 255, 255, .07);
}

.timeline-marker {
  z-index: 1;
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .65rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: #0d1220;
  color: #aeb7cb;
}

.avatar-soft {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: .95rem;
  background: rgba(72, 229, 216, .11);
  color: #48e5d8;
  font-size: .9rem;
  font-weight: 800;
}

.admin-section {
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .024);
  padding: 1.25rem;
}

.admin-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.admin-section-header h3,
.admin-form h4 {
  color: #fff;
  font-weight: 700;
  letter-spacing: -.01em;
}

.admin-form {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .028);
  min-width: 0;
  padding: 1rem;
}

.form-grid {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

@media (min-width: 1280px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-list {
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.admin-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.admin-pagination a {
  display: inline-flex;
  min-height: 2.15rem;
  align-items: center;
  justify-content: center;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  color: #b8c1d6;
  padding: .45rem .65rem;
  font-size: .76rem;
  font-weight: 800;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.admin-pagination a:hover,
.admin-pagination a.is-active {
  border-color: rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .12);
  color: #fff;
}

.pagination-ellipsis {
  display: inline-flex;
  min-width: 2rem;
  min-height: 2.15rem;
  align-items: center;
  justify-content: center;
  color: #7d879b;
  font-weight: 800;
}

.admin-item,
.admin-row {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .025);
  min-width: 0;
}

.admin-item summary,
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.admin-item summary {
  cursor: pointer;
  list-style: none;
  min-width: 0;
}

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

.admin-client-card {
  color: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.admin-client-card:hover {
  border-color: rgba(59, 130, 246, .30);
  background: rgba(59, 130, 246, .055);
  transform: translateY(-1px);
}

.admin-stat-card {
  display: block;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.admin-stat-card:hover {
  border-color: rgba(59, 130, 246, .30);
  background: rgba(59, 130, 246, .055);
  transform: translateY(-1px);
}

.admin-item[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.primary-action,
.secondary-action,
.danger-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: .65rem;
  padding: .55rem .8rem;
  font-size: .84rem;
  font-weight: 800;
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

.primary-action {
  background: #3b82f6;
  color: #fff;
}

.primary-action:hover {
  opacity: .9;
}

.secondary-action {
  border: 1px solid rgba(255, 255, 255, .10);
  color: #e5e7eb;
}

.secondary-action:hover {
  background: rgba(255, 255, 255, .05);
}

.danger-action {
  border: 1px solid rgba(248, 113, 113, .22);
  color: #fca5a5;
}

.danger-action:hover {
  background: rgba(248, 113, 113, .08);
}

.document-category-pill,
.document-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .28rem .6rem;
  font-size: .72rem;
  font-weight: 600;
}

.document-category-pill {
  border: 1px solid rgba(96, 165, 250, .20);
  background: rgba(59, 130, 246, .10);
  color: #bfdbfe;
}

.document-status-pill {
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: #cbd5e1;
}

.document-status-pill.is-approved {
  border-color: rgba(16, 185, 129, .24);
  background: rgba(16, 185, 129, .12);
  color: #86efac;
}

.document-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .75rem;
}

.document-action-form {
  margin: 0;
}

.document-more-menu {
  position: relative;
  flex: 0 0 auto;
}

.document-more-menu summary {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  list-style: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .035);
  color: #aeb7cb;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.document-more-menu summary::-webkit-details-marker {
  display: none;
}

.document-more-menu summary:hover,
.document-more-menu[open] summary {
  border-color: rgba(96, 165, 250, .28);
  background: rgba(59, 130, 246, .1);
  color: #fff;
}

.document-more-menu-popover {
  position: absolute;
  z-index: 15;
  right: 0;
  top: calc(100% + .45rem);
  min-width: 10rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .75rem;
  background: #111827;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  padding: .35rem;
}

.document-more-menu-popover a {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: .5rem;
  color: #dbe4f2;
  padding: .65rem .7rem;
  font-size: .82rem;
  font-weight: 700;
}

.document-more-menu-popover a:hover {
  background: rgba(59, 130, 246, .1);
  color: #fff;
}

.document-view-action,
.document-download-action,
.document-approve-action,
.document-change-action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: .65rem;
  padding: .55rem .9rem;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .16s ease, transform .16s ease;
}

.document-view-action {
  border: 1px solid rgba(96, 165, 250, .42);
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 8px 24px rgba(29, 78, 216, .16);
}

.document-download-action {
  background: #3b82f6;
  color: #fff;
}

.document-approve-action {
  background: #22c55e;
  color: #052e16;
}

.document-change-action {
  background: #facc15;
  color: #422006;
}

.document-view-action:hover,
.document-download-action:hover,
.document-approve-action:hover,
.document-change-action:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.document-viewer-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.document-viewer-heading h2 {
  margin-top: .75rem;
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 750;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-viewer-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #93c5fd;
  font-size: .82rem;
  font-weight: 700;
}

.document-viewer-shell {
  overflow: hidden;
  min-height: 65vh;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
  background: #0a0f1b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.document-preview-frame {
  display: block;
  width: 100%;
  min-height: 72vh;
  border: 0;
  background: #fff;
}

.document-preview-image {
  display: block;
  width: 100%;
  height: 72vh;
  object-fit: contain;
  background: #050914;
}

.document-preview-unavailable {
  display: flex;
  min-height: 65vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}

.document-preview-icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: 1rem;
  background: rgba(59, 130, 246, .12);
  color: #60a5fa;
}

.document-preview-unavailable h3 {
  margin-top: 1rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 750;
}

.document-preview-unavailable p {
  max-width: 28rem;
  margin: .45rem 0 1.25rem;
  color: #8d98ad;
  font-size: .88rem;
}

.document-review-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .03);
  padding: 1.25rem;
}

.document-review-panel h3 {
  margin-top: .3rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
}

.document-review-panel p:not(.section-kicker) {
  margin-top: .25rem;
  color: #8d98ad;
  font-size: .84rem;
}

.document-review-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: .65rem;
}

.document-review-actions form {
  margin: 0;
}

[data-document-row][hidden],
.empty-state[hidden] {
  display: none;
}

.login-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.login-shell > .beta-banner {
  margin: 1rem 1rem 0;
}

.beta-banner {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(96, 165, 250, .42);
  border-radius: 1rem;
  background:
    linear-gradient(100deg, rgba(29, 78, 216, .28), rgba(37, 99, 235, .12) 55%, rgba(14, 165, 233, .09)),
    #0d1527;
  box-shadow: 0 14px 45px rgba(2, 8, 23, .34), inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #bfdbfe;
  padding: 1rem 1.25rem;
}

.beta-banner::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  content: "";
}

.beta-banner-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, .2);
  border-radius: .85rem;
  background: rgba(59, 130, 246, .18);
  color: #93c5fd;
}

.beta-banner-content {
  min-width: 0;
  flex: 1;
}

.beta-banner-badge {
  display: inline-flex;
  border: 1px solid rgba(147, 197, 253, .28);
  border-radius: 999px;
  background: rgba(59, 130, 246, .2);
  color: #dbeafe;
  padding: .2rem .55rem;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.beta-banner p {
  margin-top: .38rem;
  color: #fff;
  font-size: .96rem;
  font-weight: 800;
}

.beta-banner-copy {
  display: block;
  margin-top: .2rem;
  color: #b9c7dc;
  font-size: .82rem;
  line-height: 1.5;
}

.beta-banner-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(52, 211, 153, .2);
  border-radius: 999px;
  background: rgba(16, 185, 129, .09);
  color: #a7f3d0;
  padding: .4rem .7rem;
  font-size: .72rem;
  font-weight: 800;
}

.beta-banner-status > span {
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 12px rgba(52, 211, 153, .65);
}

.service-category-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .service-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .service-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-category-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 10rem;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .028);
  color: inherit;
  padding: 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 50px rgba(0, 0, 0, .14);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.service-category-card:hover {
  border-color: rgba(59, 130, 246, .32);
  background: rgba(59, 130, 246, .07);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 60px rgba(0, 0, 0, .2);
}

.service-category-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .8rem;
  background: rgba(59, 130, 246, .12);
  color: #60a5fa;
}

.service-category-card h3,
.category-catalog-heading h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.service-category-description {
  margin-top: .3rem;
  color: #7d879b;
  font-size: .82rem;
  line-height: 1.45;
}

.service-category-count {
  display: inline-flex;
  margin-top: .75rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, .1);
  color: #93c5fd;
  padding: .28rem .55rem;
  font-size: .7rem;
  font-weight: 800;
}

.category-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .025);
  padding: 1rem 1.25rem;
}

@media (max-width: 640px) {
  .beta-banner {
    align-items: flex-start;
    padding: 1rem;
  }

  .beta-banner-status {
    display: none;
  }

  .beta-banner-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .login-shell > .beta-banner {
    margin: .75rem .75rem 0;
  }
}

@media (min-width: 1024px) {
  .document-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  .document-viewer-heading,
  .document-review-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .document-review-actions,
  .document-review-actions form,
  .document-review-actions button {
    width: 100%;
  }
}

.empty-state {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border-radius: 1rem;
  border: 1px dashed rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .022);
  padding: 1rem;
  color: #97a0b8;
}

.empty-state svg {
  flex: 0 0 auto;
  color: #60a5fa;
  opacity: .8;
}

.quiet-link {
  display: flex;
  min-height: 10rem;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .028);
  padding: 1.25rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.quiet-link:hover {
  border-color: rgba(59, 130, 246, .30);
  background: rgba(59, 130, 246, .05);
  transform: translateY(-1px);
}

.field {
  appearance: none;
  width: 100%;
  min-width: 0;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background-color: rgba(255, 255, 255, .055);
  padding: .85rem 1rem;
  color: #fff;
  outline: none;
  color-scheme: dark;
  font-size: .92rem;
  line-height: 1.35;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.field:hover {
  border-color: rgba(255, 255, 255, .16);
  background-color: rgba(255, 255, 255, .07);
}

.field:focus {
  border-color: rgba(59, 130, 246, .65);
  background-color: rgba(255, 255, 255, .075);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

.field::placeholder {
  color: rgba(151, 160, 184, .72);
}

select.field {
  cursor: pointer;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(96, 165, 250, .92) 50%),
    linear-gradient(135deg, rgba(96, 165, 250, .92) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) 50%,
    calc(100% - .9rem) 50%;
  background-size: .38rem .38rem, .38rem .38rem;
  background-repeat: no-repeat;
}

select.field option,
select.field optgroup {
  background-color: #0b101d;
  color: #f8fafc;
}

select.field option:checked {
  background-color: #102247;
  color: #93c5fd;
}

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

input[type="file"].field {
  cursor: pointer;
  padding: .68rem .85rem;
}

input[type="file"].field::file-selector-button {
  margin-right: .85rem;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .07);
  color: #e5e7eb;
  padding: .45rem .7rem;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

input[type="file"].field::file-selector-button:hover {
  border-color: rgba(59, 130, 246, .32);
  background: rgba(59, 130, 246, .10);
}

input[type="date"].field,
input[type="datetime-local"].field,
input[type="month"].field,
input[type="time"].field {
  color-scheme: dark;
}

input[type="checkbox"] {
  accent-color: #3b82f6;
}

@media (max-width: 640px) {
  .admin-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-row > form,
  .admin-row > div:last-child {
    width: 100%;
  }
}

.topbar-notifications {
  position: relative;
}

.topbar-notifications summary {
  position: relative;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  place-items: center;
  border-radius: .65rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  color: #cbd5e1;
  list-style: none;
}

.topbar-notifications summary::-webkit-details-marker {
  display: none;
}

.topbar-notifications summary strong {
  position: absolute;
  right: -.35rem;
  top: -.35rem;
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
}

.notification-menu {
  position: absolute;
  right: 0;
  top: 3rem;
  z-index: 50;
  width: min(23rem, calc(100vw - 2rem));
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background: #0b101d;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

.notification-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  padding: .9rem 1rem;
}

.notification-menu-header p {
  color: #fff;
  font-weight: 800;
}

.notification-menu-header button {
  color: #60a5fa;
  font-size: .76rem;
  font-weight: 800;
}

.notification-menu-list {
  display: grid;
  max-height: 22rem;
  overflow-y: auto;
}

.notification-menu-list button {
  display: grid;
  width: 100%;
  gap: .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  padding: .85rem 1rem;
  text-align: left;
}

.notification-menu-list button:hover {
  background: rgba(59, 130, 246, .07);
}

.notification-menu-list span {
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
}

.notification-menu-list small,
.notification-menu-list em,
.notification-empty {
  color: #97a0b8;
  font-size: .78rem;
  font-style: normal;
}

.notification-empty {
  padding: 1rem;
}

.login-remember {
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: .65rem;
  color: #d8deea;
  font-size: .88rem;
  font-weight: 750;
}

.login-remember input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: #3b82f6;
}

.communication-button {
  white-space: nowrap;
}

.communication-modal[hidden] {
  display: none;
}

.communication-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.communication-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(10px);
}

.communication-modal-panel {
  position: relative;
  z-index: 1;
  width: min(44rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .09);
  background: #0b101d;
  padding: 1.2rem;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

.communication-preview-grid {
  display: grid;
  gap: .75rem;
}

@media (min-width: 640px) {
  .communication-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .communication-client-picker {
    grid-column: 1 / -1;
  }
}

.communication-preview-grid > div,
.communication-client-picker {
  display: grid;
  gap: .35rem;
  border-radius: .85rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  padding: .8rem;
}

.communication-preview-grid span,
.communication-client-picker span {
  color: #97a0b8;
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.communication-preview-grid strong {
  min-width: 0;
  color: #fff;
  font-size: .9rem;
}

.communication-alert {
  display: grid;
  gap: .7rem;
  border-radius: .85rem;
  border: 1px solid rgba(245, 158, 11, .24);
  background: rgba(245, 158, 11, .09);
  color: #fcd34d;
  padding: .85rem;
  font-size: .86rem;
  font-weight: 800;
}

.communication-alert label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fde68a;
}

.communication-alert.is-error {
  border-color: rgba(248, 113, 113, .24);
  background: rgba(248, 113, 113, .10);
  color: #fecaca;
}

.communication-log-table {
  display: grid;
  gap: .65rem;
}

.communication-log-head,
.communication-log-row {
  display: grid;
  gap: .75rem;
  align-items: center;
}

.communication-log-head {
  color: #97a0b8;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.communication-log-row {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .026);
  padding: .95rem;
  color: #cbd5e1;
  font-size: .86rem;
}

.communication-log-row strong {
  color: #fff;
}

@media (min-width: 1024px) {
  .communication-log-head,
  .communication-log-row {
    grid-template-columns: 1fr 1.1fr .6fr minmax(0, 2fr) .8fr 1fr;
  }
}

.communication-status {
  display: inline-flex;
  width: max-content;
  align-items: center;
  border-radius: 999px;
  padding: .28rem .58rem;
  font-size: .69rem;
  font-weight: 900;
}

.communication-status-sent {
  background: rgba(16, 185, 129, .13);
  color: #6ee7b7;
}

.communication-status-error {
  background: rgba(239, 68, 68, .13);
  color: #fca5a5;
}

.communication-status-pending {
  background: rgba(245, 158, 11, .13);
  color: #fcd34d;
}

.communication-shell {
  display: grid;
  min-height: calc(100vh - 7.5rem);
  overflow: hidden;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025);
}

@media (min-width: 1024px) {
  .communication-shell {
    grid-template-columns: minmax(20rem, .42fr) minmax(0, .58fr);
  }
}

.ticket-inbox {
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: rgba(7, 10, 17, .42);
  padding: 1rem;
}

@media (min-width: 1024px) {
  .ticket-inbox {
    border-right: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 0;
  }
}

.ticket-inbox-header,
.ticket-thread-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ticket-inbox-header h2,
.ticket-thread-header h2,
.ticket-empty-panel h2 {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.ticket-search {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  border-radius: .85rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  padding: .75rem .85rem;
  color: #7d879b;
}

.ticket-search input {
  min-width: 0;
  flex: 1;
  background: transparent;
  color: #fff;
  outline: none;
}

.ticket-search input::placeholder {
  color: rgba(151, 160, 184, .72);
}

.ticket-filters {
  display: flex;
  gap: .45rem;
  margin-top: .9rem;
  overflow-x: auto;
  padding-bottom: .15rem;
}

.ticket-filter-grid {
  display: grid;
  gap: .55rem;
  margin-top: .75rem;
}

@media (min-width: 640px) {
  .ticket-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ticket-filters a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: #aeb7cb;
  padding: .45rem .7rem;
  font-size: .76rem;
  font-weight: 800;
}

.ticket-filters a strong {
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  padding: 0 .35rem;
  font-size: .68rem;
}

.ticket-filters a:hover,
.ticket-filters a.is-active {
  border-color: rgba(59, 130, 246, .34);
  background: rgba(59, 130, 246, .12);
  color: #fff;
}

.ticket-list {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
}

.ticket-list-item {
  display: flex;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .026);
  padding: .95rem;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ticket-card-stat {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: #aeb7cb;
  padding: .25rem .48rem;
  font-size: .72rem;
  font-weight: 850;
}

.ticket-list-item:hover,
.ticket-list-item.is-active {
  border-color: rgba(59, 130, 246, .32);
  background: rgba(59, 130, 246, .07);
  transform: translateY(-1px);
}

.ticket-unread {
  display: inline-flex;
  min-width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  padding: 0 .4rem;
  font-size: .72rem;
  font-weight: 900;
}

.ticket-status,
.ticket-priority {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .28rem .58rem;
  font-size: .69rem;
  font-weight: 900;
}

.ticket-priority {
  background: rgba(255, 255, 255, .05);
  color: #d8deea;
}

.ticket-status-blue { background: rgba(59, 130, 246, .14); color: #93c5fd; }
.ticket-status-cyan { background: rgba(72, 229, 216, .12); color: #67e8f9; }
.ticket-status-amber { background: rgba(245, 158, 11, .13); color: #fcd34d; }
.ticket-status-violet { background: rgba(139, 92, 246, .14); color: #c4b5fd; }
.ticket-status-emerald { background: rgba(16, 185, 129, .13); color: #6ee7b7; }
.ticket-status-slate { background: rgba(148, 163, 184, .12); color: #cbd5e1; }

.ticket-conversation {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, .014)),
    radial-gradient(circle at 80% 0%, rgba(59, 130, 246, .08), transparent 28%);
}

.ticket-thread-header {
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  padding: 1.1rem;
}

.ticket-thread-header p {
  margin-top: .35rem;
  color: #97a0b8;
  font-size: .86rem;
}

.ticket-admin-controls {
  display: grid;
  gap: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  padding: 1rem;
}

.ticket-workspace-grid {
  display: grid;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  padding: 1rem;
}

@media (min-width: 1280px) {
  .ticket-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ticket-side-panel,
.ticket-action-box,
.ticket-mini-card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .026);
}

.ticket-side-panel {
  padding: 1rem;
}

.ticket-action-box {
  margin-top: .85rem;
  padding: .85rem;
}

.ticket-action-box summary {
  cursor: pointer;
  color: #dbeafe;
  font-size: .86rem;
  font-weight: 900;
}

.ticket-action-box form {
  display: grid;
  gap: .65rem;
  margin-top: .85rem;
}

.ticket-mini-list {
  display: grid;
  gap: .7rem;
  margin-top: .85rem;
}

.ticket-mini-card {
  padding: .9rem;
}

@media (min-width: 768px) {
  .ticket-admin-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}

.ticket-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .85rem;
  overflow-y: auto;
  padding: 1rem;
}

.ticket-message {
  max-width: min(42rem, 100%);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .035);
  padding: 1rem;
}

.ticket-message.from-admin {
  align-self: flex-end;
  border-color: rgba(59, 130, 246, .20);
  background: rgba(59, 130, 246, .075);
}

.ticket-message.from-system {
  max-width: 100%;
  align-self: center;
  border-style: dashed;
  background: rgba(255, 255, 255, .022);
}

.ticket-message.from-internal {
  max-width: 100%;
  align-self: center;
  border-color: rgba(245, 158, 11, .22);
  background: rgba(245, 158, 11, .075);
}

.ticket-message.from-client {
  align-self: flex-start;
  border-color: rgba(72, 229, 216, .18);
  background: rgba(72, 229, 216, .055);
}

.ticket-message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: #97a0b8;
  font-size: .76rem;
}

.ticket-message-meta strong {
  color: #fff;
}

.ticket-message-meta em {
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  padding: .15rem .45rem;
  color: #cbd5e1;
  font-style: normal;
  font-weight: 800;
}

.ticket-message-type {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .065);
  padding: .18rem .5rem;
  color: #dbeafe;
  font-size: .7rem;
  font-weight: 900;
}

.ticket-message p {
  margin-top: .65rem;
  white-space: pre-wrap;
  color: #d8deea;
  line-height: 1.65;
}

.ticket-attachments {
  display: grid;
  gap: .45rem;
  margin-top: .85rem;
}

.ticket-attachments a {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  padding: .6rem .7rem;
  color: #dbeafe;
  font-size: .83rem;
  font-weight: 800;
}

.ticket-attachments small {
  margin-left: auto;
  color: #97a0b8;
  font-weight: 700;
}

.ticket-reply-form {
  display: grid;
  gap: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .075);
  background: rgba(7, 10, 17, .48);
  padding: 1rem;
}

.ticket-quick-replies {
  display: grid;
  gap: .75rem;
}

@media (min-width: 768px) {
  .ticket-quick-replies {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.ticket-internal-toggle {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: .5rem;
  border-radius: .65rem;
  border: 1px solid rgba(245, 158, 11, .22);
  background: rgba(245, 158, 11, .07);
  color: #fcd34d;
  padding: .55rem .8rem;
  font-size: .84rem;
  font-weight: 900;
}

.ticket-file-input {
  display: inline-flex;
  min-height: 2.5rem;
  cursor: pointer;
  align-items: center;
  gap: .45rem;
  border-radius: .65rem;
  border: 1px solid rgba(255, 255, 255, .10);
  color: #e5e7eb;
  padding: .55rem .8rem;
  font-size: .84rem;
  font-weight: 800;
}

.ticket-file-input.is-dragover,
.ticket-dropzone.is-dragover {
  border-color: rgba(96, 165, 250, .65);
  background: rgba(59, 130, 246, .12);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

.ticket-file-input input {
  display: none;
}

.ticket-dropzone {
  display: grid;
  min-height: 6.5rem;
  cursor: pointer;
  place-items: center;
  gap: .35rem;
  border-radius: .85rem;
  border: 1px dashed rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .035);
  padding: 1rem;
  text-align: center;
  color: #e5e7eb;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.ticket-dropzone input {
  display: none;
}

.ticket-dropzone small {
  color: #97a0b8;
  font-size: .75rem;
}

.ticket-timeline-panel {
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  padding: 1rem;
}

.ticket-timeline {
  display: grid;
  gap: .8rem;
  margin-top: 1rem;
}

.ticket-timeline-item {
  position: relative;
  display: flex;
  gap: .8rem;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .065);
  background: rgba(255, 255, 255, .026);
  padding: .85rem;
}

.ticket-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  bottom: -.85rem;
  left: 1.75rem;
  width: 1px;
  height: .85rem;
  background: rgba(255, 255, 255, .09);
}

.ticket-timeline-marker {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0d1220;
  color: #93c5fd;
}

.event-client .ticket-timeline-marker { color: #67e8f9; }
.event-admin .ticket-timeline-marker { color: #93c5fd; }
.event-internal .ticket-timeline-marker { color: #fcd34d; }
.event-system .ticket-timeline-marker { color: #cbd5e1; }

.ticket-back-link {
  display: none;
  width: max-content;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
  color: #93c5fd;
  font-size: .82rem;
  font-weight: 850;
}

.ticket-empty-panel {
  display: grid;
  min-height: 24rem;
  place-items: center;
  align-content: center;
  gap: .7rem;
  padding: 2rem;
  color: #97a0b8;
  text-align: center;
}

.ticket-empty-panel svg {
  color: #60a5fa;
}

.ticket-modal[hidden] {
  display: none;
}

.ticket-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.ticket-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(10px);
}

.ticket-modal-panel {
  position: relative;
  z-index: 1;
  width: min(42rem, 100%);
  border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .09);
  background: #0b101d;
  padding: 1.2rem;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: grid;
  gap: .65rem;
  width: min(22rem, calc(100vw - 2rem));
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  border-radius: .85rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(11, 16, 29, .96);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .36);
  padding: .85rem;
  color: #e5e7eb;
  animation: toast-in .22s ease both;
}

.app-toast strong {
  display: block;
  color: #fff;
  font-size: .88rem;
}

.app-toast small {
  display: block;
  margin-top: .15rem;
  color: #97a0b8;
  font-size: .75rem;
}

.app-toast-error {
  border-color: rgba(248, 113, 113, .25);
}

.form-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  height: 3px;
  width: 0;
  background: #60a5fa;
  box-shadow: 0 0 18px rgba(96, 165, 250, .7);
  transition: width .35s ease;
}

.is-loading .ticket-list {
  position: relative;
}

.is-loading .ticket-list::before {
  content: "";
  display: block;
  height: 5.5rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.08), rgba(255,255,255,.035));
  background-size: 220% 100%;
  animation: skeleton 1.1s ease infinite;
}

*:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .95);
  outline-offset: 3px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 1023px) {
  .communication-shell {
    min-height: calc(100vh - 6.5rem);
  }

  .communication-shell.has-selection .ticket-inbox {
    display: none;
  }

  .communication-shell:not(.has-selection) .ticket-conversation {
    display: none;
  }

  .ticket-back-link {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.topbar-identity {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .6rem;
}

.topbar-identity strong,
.topbar-identity small {
  display: block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-identity strong { color: #fff; font-size: .82rem; }
.topbar-identity small { color: #97a0b8; font-size: .72rem; }

.topbar-avatar {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .7rem;
  border: 1px solid rgba(96, 165, 250, .2);
  background: rgba(59, 130, 246, .1);
  color: #bfdbfe;
  font-size: .72rem;
  font-weight: 900;
}

.nav-link-disabled {
  cursor: default;
  opacity: .66;
}

.coming-soon-badge {
  margin-left: auto;
  border-radius: 999px;
  background: rgba(96, 165, 250, .12);
  padding: .18rem .4rem;
  color: #bfdbfe;
  font-size: .58rem;
  letter-spacing: .02em;
}

.email-center-grid {
  display: grid;
  gap: 1rem;
}

.email-client-picker,
.email-preview {
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
  padding: 1rem;
}

.email-client-list {
  display: grid;
  max-height: 25rem;
  gap: .55rem;
  margin-top: 1rem;
  overflow-y: auto;
}

.email-client-option {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: .75rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .07);
  padding: .75rem;
}

.email-client-option:hover,
.email-client-option:focus-within {
  border-color: rgba(96, 165, 250, .35);
  background: rgba(59, 130, 246, .06);
}

.email-client-option strong,
.email-client-option small {
  display: block;
}

.email-client-option strong { color: #fff; font-size: .86rem; }
.email-client-option small { margin-top: .15rem; color: #97a0b8; font-size: .72rem; }
.field-label { display: block; margin-bottom: .45rem; color: #d8deea; font-size: .82rem; font-weight: 800; }
.email-preview h4 { margin-top: .55rem; color: #fff; font-size: 1.05rem; font-weight: 800; }
.email-preview > p:last-child { margin-top: .65rem; color: #d8deea; white-space: pre-wrap; line-height: 1.65; }
.email-attachments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.email-attachments-heading .field-label { margin-bottom: 0; }
.email-attachments-heading span,
.email-attachment-total { color: #97a0b8; font-size: .75rem; }
.email-attachment-dropzone {
  display: grid;
  cursor: pointer;
  place-items: center;
  gap: .35rem;
  margin-top: .55rem;
  border: 1px dashed rgba(96, 165, 250, .45);
  border-radius: .85rem;
  background: rgba(59, 130, 246, .055);
  padding: 1.25rem;
  color: #dbeafe;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.email-attachment-dropzone:hover,
.email-attachment-dropzone:focus-within,
.email-attachment-dropzone.is-dragging {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, .11);
}
.email-attachment-dropzone small { color: #97a0b8; font-size: .7rem; }
.email-attachment-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.email-attachment-list { display: grid; gap: .45rem; margin-top: .65rem; }
.email-attachment-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .6rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: .7rem;
  padding: .6rem .7rem;
  color: #e5e7eb;
  font-size: .78rem;
}
.email-attachment-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-attachment-row small { color: #97a0b8; }
.email-attachment-remove {
  border-radius: .35rem;
  padding: .1rem .35rem;
  color: #fca5a5;
  font-size: 1rem;
}
.email-attachment-remove:hover { background: rgba(248, 113, 113, .12); color: #fecaca; }
.email-attachment-error { margin-top: .55rem; color: #fca5a5; font-size: .75rem; }
.email-attachment-total { margin-top: .65rem; }
.email-attachment-total strong { color: #d8deea; }
.email-preview-attachments {
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: .85rem;
}
.email-preview-attachments > strong { color: #fff; font-size: .8rem; }
.email-preview-attachments ul { display: grid; gap: .3rem; margin-top: .45rem; color: #b9c2d2; font-size: .75rem; }
.email-result-list { display: grid; gap: .65rem; }

.email-result-row {
  display: grid;
  align-items: center;
  gap: .65rem;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .07);
  padding: .8rem;
}

.email-result-row strong,
.email-result-row small { display: block; }
.email-result-row strong { color: #fff; font-size: .86rem; }
.email-result-row small { color: #97a0b8; font-size: .72rem; overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .email-center-grid { grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr); }
  .email-result-row { grid-template-columns: minmax(12rem, 1fr) auto minmax(8rem, .6fr); }
}