:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050817;
  color: #f8fafc;
}

/* Portal account menu — alinhado ao padrão visual do Funcionário Digital */
.portal-actions {
  gap: 14px;
}

.portal-session-card {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 6px 12px 6px 7px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.portal-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #04111f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 12px 30px rgba(34, 211, 238, .18);
}

.portal-session {
  min-width: 0;
  max-width: 240px;
  margin-right: 0;
  text-align: left;
}

.portal-session-card .portal-session {
  display: grid;
  min-width: 0;
  max-width: 240px;
  margin-right: 0;
  text-align: left;
}

.portal-session strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.15;
}

.portal-session span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}

.portal-session-card .portal-session span {
  color: #94a3b8;
}

.portal-action-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  background: rgba(3, 8, 24, .36);
}

.portal-action-group form {
  display: inline-flex;
}

.portal-action-group .ghost-link,
.portal-action-group .ghost-button {
  min-height: 36px;
  border-radius: 11px;
  border-color: transparent;
  background: transparent;
  color: #cbd5e1;
}

.portal-action-group .ghost-link:hover,
.portal-action-group .ghost-button:hover {
  border-color: rgba(34, 211, 238, .18);
  background: rgba(34, 211, 238, .10);
  color: #f8fafc;
}

@media (max-width: 920px) {
  .portal-header {
    align-items: flex-start;
  }

  .portal-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .portal-session-card,
  .portal-action-group {
    width: 100%;
  }

  .portal-session {
    max-width: none;
  }

  .portal-session-card .portal-session {
    max-width: none;
  }

  .portal-action-group {
    flex-wrap: wrap;
  }
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    radial-gradient(circle at 10% 26%, rgba(34, 211, 238, .13), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(99, 102, 241, .14), transparent 38%),
    radial-gradient(circle at 72% 84%, rgba(8, 145, 178, .12), transparent 34%),
    #050817;
  background-size: 64px 64px, 64px 64px, auto, auto, auto, auto;
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.auth-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 30px;
  background: rgba(8, 13, 31, .84);
  box-shadow: 0 36px 110px rgba(0, 0, 0, .55);
  backdrop-filter: blur(18px);
}

.auth-brand-panel,
.auth-card { padding: clamp(36px, 6vw, 72px); }

.auth-brand-panel {
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 16%, rgba(31, 217, 255, .18), transparent 34%),
    linear-gradient(145deg, rgba(8, 145, 178, .18), rgba(15, 23, 42, .1) 48%, rgba(76, 29, 149, .16));
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.auth-brand-panel::after {
  content: "";
  position: absolute;
  inset: auto -20% -30% 18%;
  height: 320px;
  background: radial-gradient(circle, rgba(34, 211, 238, .16), transparent 64%);
  pointer-events: none;
}

.brand-logo-link {
  position: absolute;
  top: clamp(28px, 4vw, 44px);
  left: clamp(28px, 4vw, 56px);
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
}

.brand-logo {
  width: 142px;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(34, 211, 238, .14));
}

.auth-card-logo {
  display: none;
  margin-bottom: 30px;
}

.auth-card-logo img {
  width: 128px;
  height: auto;
  display: block;
}

.eyebrow {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  margin: 0 0 12px;
}

h1, h2 { margin: 0; line-height: 1.06; }
h1 { font-size: clamp(38px, 5vw, 64px); }
h2 { font-size: 32px; }

.supporting-copy,
.card-subtitle,
.security-note,
.center-card > p {
  color: #94a3b8;
  line-height: 1.65;
}

.supporting-copy { max-width: 520px; font-size: 18px; }
.card-subtitle { margin: 10px 0 30px; }
.security-note { margin: 24px 0 0; font-size: 12px; text-align: center; }

.product-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.product-pills span {
  padding: 9px 13px;
  border: 1px solid rgba(103, 232, 249, .24);
  border-radius: 999px;
  background: rgba(15, 23, 42, .56);
  color: #cbd5e1;
  font-size: 13px;
}

.auth-card {
  background: rgba(255, 255, 255, .025);
}

form { display: grid; gap: 10px; }
label { color: #cbd5e1; font-size: 13px; font-weight: 700; margin-top: 8px; }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="number"],
select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, .035);
  color: #f8fafc;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

input:hover,
select:hover { border-color: rgba(255, 255, 255, .2); }
input:focus,
select:focus { border-color: rgba(34, 211, 238, .65); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); }

.remember-row { display: flex; align-items: center; gap: 10px; font-weight: 500; margin: 8px 0 12px; }
.remember-row input { width: 18px; height: 18px; accent-color: #22d3ee; }

button,
.primary-link {
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  background: linear-gradient(90deg, #29a9e1, #0891b2);
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(34, 211, 238, .18);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

button:hover,
.primary-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 22px 54px rgba(34, 211, 238, .24);
}

.secondary-button { background: #111a32; color: #e2e8f0; border: 1px solid #2b3858; }
.field-validation, .validation-summary { color: #fda4af; font-size: 12px; }
.validation-summary ul { margin: 0 0 8px; padding-left: 18px; }

.center-card {
  width: min(680px, 100%);
  padding: clamp(36px, 6vw, 70px);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 28px;
  background: rgba(10, 16, 38, .94);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .4);
}

.center-card h1 { font-size: clamp(34px, 5vw, 52px); }
.session-user { margin: 24px 0; }

.portal-main {
  display: block;
  padding: 0;
}

.portal-main:has(> .auth-entry-card) {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
}

.auth-entry-card {
  position: relative;
  width: min(760px, calc(100% - 32px));
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(42px, 6vw, 76px);
  border-color: rgba(34, 211, 238, .28);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .18), transparent 38%),
    radial-gradient(circle at 100% 18%, rgba(99, 102, 241, .16), transparent 34%),
    linear-gradient(145deg, rgba(11, 21, 42, .98), rgba(14, 17, 46, .96));
  box-shadow:
    0 34px 110px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.auth-entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(34, 211, 238, .26), transparent) top / 72% 1px no-repeat,
    radial-gradient(circle at 50% 100%, rgba(34, 211, 238, .1), transparent 36%);
}

.auth-entry-logo {
  position: relative;
  z-index: 1;
  width: min(220px, 58vw);
  height: auto;
  margin: 0 0 34px;
  filter: drop-shadow(0 18px 40px rgba(34, 211, 238, .12));
}

.auth-entry-card .eyebrow,
.auth-entry-card h1,
.auth-entry-card > p,
.auth-entry-card .auth-entry-action {
  position: relative;
  z-index: 1;
}

.auth-entry-card .eyebrow {
  margin-bottom: 14px;
}

.auth-entry-card h1 {
  max-width: 620px;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -.055em;
}

.auth-entry-card > p:not(.eyebrow) {
  max-width: 560px;
  margin: 18px auto 0;
  color: #b6c4d8;
  font-size: 16px;
  line-height: 1.7;
}

.auth-entry-action {
  min-width: 190px;
  margin-top: 28px;
}

.portal-shell {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 64px;
}

.portal-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.portal-brand { display: inline-flex; }
.portal-brand img { width: 128px; display: block; }
.portal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.portal-actions form { display: block; }
.portal-session { display: grid; gap: 2px; text-align: right; margin-right: 8px; }
.portal-session strong { font-size: 13px; }
.portal-session span { color: #64748b; font-size: 11px; }

.ghost-link,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.ghost-link:hover,
.ghost-button:hover { background: rgba(255, 255, 255, .075); box-shadow: none; }

.portal-hero { padding: clamp(56px, 8vw, 96px) 0 48px; max-width: 880px; }
.portal-hero h1 { font-size: clamp(42px, 6vw, 72px); max-width: 840px; }
.portal-hero > p:last-child,
.admin-heading > div > p:last-child { max-width: 720px; color: #94a3b8; font-size: 17px; line-height: 1.65; }

.portal-section,
.admin-panel {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 24px;
  background: rgba(8, 13, 31, .78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}

.portal-section + .portal-section { margin-top: 22px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading h2 { font-size: 28px; }
.section-heading > span,
.tenant-badge { padding: 8px 11px; border: 1px solid rgba(103, 232, 249, .18); border-radius: 999px; color: #94a3b8; font-size: 11px; font-weight: 800; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.product-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: radial-gradient(circle at 88% 0, rgba(34, 211, 238, .12), transparent 38%), rgba(255, 255, 255, .025);
  transition: transform .2s ease, border-color .2s ease;
}
.product-card:hover { transform: translateY(-2px); border-color: rgba(103, 232, 249, .35); }
.product-erp-nextaz { background: radial-gradient(circle at 88% 0, rgba(99, 102, 241, .18), transparent 38%), rgba(255, 255, 255, .025); }
.product-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .24); color: #67e8f9; font-weight: 900; font-size: 13px; }
.product-card h3 { margin: 13px 0 7px; font-size: 25px; }
.product-card p,
.solution-card p { margin: 0; color: #94a3b8; line-height: 1.6; font-size: 13px; }
.product-card > a { margin-top: auto; display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); color: #67e8f9; text-decoration: none; font-size: 13px; font-weight: 900; }
.status-pill { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: rgba(52, 211, 153, .1); color: #6ee7b7; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.solution-card { min-height: 138px; padding: 18px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 15px; background: rgba(255, 255, 255, .025); }
.solution-card > span { color: #67e8f9; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.solution-card h3 { margin: 10px 0 7px; font-size: 15px; }
.empty-panel { padding: 28px; border: 1px dashed rgba(148, 163, 184, .25); border-radius: 16px; color: #94a3b8; text-align: center; }

/* Portal de produtos — experiência de entrada mais premium */
.portal-shell {
  width: min(1240px, calc(100% - 40px));
  padding-bottom: 80px;
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  border-bottom-color: rgba(148, 163, 184, .12);
  background: linear-gradient(180deg, rgba(5, 8, 23, .94), rgba(5, 8, 23, .72));
  backdrop-filter: blur(18px);
}

.portal-header .portal-actions { gap: 14px; }

.portal-hero-panel {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(22px, 4vw, 42px);
  align-items: stretch;
  margin: 28px 0 24px;
  padding: clamp(34px, 6vw, 74px);
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, .14);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 10%, rgba(34, 211, 238, .18), transparent 34%),
    radial-gradient(circle at 95% 0%, rgba(99, 102, 241, .2), transparent 38%),
    linear-gradient(135deg, rgba(8, 13, 31, .94), rgba(10, 18, 44, .8));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .28);
}

.portal-hero-panel::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34, 211, 238, .14), transparent 64%);
  pointer-events: none;
}

.portal-hero-copy,
.portal-context-card {
  position: relative;
  z-index: 1;
}

.portal-hero-copy h1 {
  max-width: 790px;
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -.05em;
}

.portal-hero-copy > p:last-child {
  max-width: 680px;
  color: #b6c4d8;
  font-size: 17px;
  line-height: 1.7;
}

.portal-context-card {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: rgba(3, 8, 24, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.portal-context-kicker {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.portal-context-card strong {
  color: #f8fafc;
  font-size: 22px;
}

.portal-context-card > span:not(.portal-context-kicker) {
  color: #94a3b8;
  font-size: 13px;
}

.portal-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.portal-context-grid div {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
}

.portal-context-grid b {
  display: block;
  color: #67e8f9;
  font-size: 24px;
}

.portal-context-grid small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
}

.portal-section {
  border-color: rgba(103, 232, 249, .1);
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .08), transparent 38%),
    rgba(8, 13, 31, .82);
}

.section-heading { align-items: flex-start; }

.section-heading p:not(.eyebrow) {
  margin: 8px 0 0;
  max-width: 560px;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.55;
}

.product-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.product-card {
  position: relative;
  min-height: 300px;
  gap: 20px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .11);
  background:
    radial-gradient(circle at 92% 0, rgba(34, 211, 238, .14), transparent 40%),
    linear-gradient(140deg, rgba(9, 18, 40, .92), rgba(10, 16, 38, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(103, 232, 249, .16), transparent 46%, rgba(139, 92, 246, .12));
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(103, 232, 249, .34);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.product-card:hover::before { opacity: 1; }

.product-card-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.product-card > div,
.product-card > a {
  position: relative;
  z-index: 1;
}

.product-card h3 {
  margin: 0 0 8px;
  font-size: 26px;
  letter-spacing: -.03em;
}

.product-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(34, 211, 238, .11);
}

.product-crm-nextaz {
  background:
    radial-gradient(circle at 92% 0, rgba(20, 184, 166, .16), transparent 40%),
    linear-gradient(140deg, rgba(9, 18, 40, .92), rgba(10, 16, 38, .82));
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-meta span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 800;
}

.product-launch-link {
  margin-top: auto;
  min-height: 46px;
  align-items: center;
  padding: 0 2px;
}

.product-launch-link span {
  transition: transform .18s ease;
}

.product-card:hover .product-launch-link span {
  transform: translateX(4px);
}

.admin-shell { padding-bottom: 48px; }
.admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 52px 0 30px; }
.admin-heading h1 { font-size: clamp(38px, 5vw, 58px); }
.admin-heading > div > p:last-child { margin-bottom: 0; }
.admin-heading-rich {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.admin-heading-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}
.admin-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(103, 232, 249, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .12), transparent 44%),
    rgba(8, 13, 31, .58);
}
.admin-kpi-strip div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .028);
}
.admin-kpi-strip strong {
  display: block;
  color: #67e8f9;
  font-size: 22px;
  line-height: 1;
}
.admin-kpi-strip span {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tenant-filter { min-width: 260px; }
.tenant-filter label { display: block; margin: 0 0 7px; }
.tenant-filter select { width: 100%; }
.tenant-badge { margin-bottom: 5px; }
.admin-grid { display: grid; grid-template-columns: minmax(380px, .88fr) minmax(560px, 1.12fr); align-items: start; gap: 20px; }
.admin-panel { min-width: 0; }
.admin-panel {
  position: relative;
  overflow: hidden;
}
.admin-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .26), transparent);
  pointer-events: none;
}
.compact-heading { align-items: center; margin-bottom: 20px; }
.compact-heading h2 { font-size: 22px; }

.section-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.section-actions > span {
  padding: 8px 11px;
  border: 1px solid rgba(103, 232, 249, .18);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.create-client-shortcut {
  min-height: 34px;
  border-color: rgba(34, 211, 238, .24);
  background: rgba(34, 211, 238, .08);
  color: #a5f3fc;
}

.companies-admin-grid {
  grid-template-columns: minmax(500px, 1.05fr) minmax(520px, .95fr);
}

.companies-list-panel {
  min-height: 490px;
}

.companies-list-panel .admin-scroll-list {
  max-height: min(70vh, 820px);
}

.companies-list-panel .company-row {
  min-height: 182px;
  align-content: start;
  padding: 18px;
}

.company-create-panel {
  scroll-margin-top: 96px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.company-create-panel.is-targeted {
  border-color: rgba(34, 211, 238, .42);
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .11), transparent 36%),
    rgba(8, 13, 31, .86);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .08), 0 28px 80px rgba(0, 0, 0, .24);
}

.admin-list-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: -4px 0 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background: rgba(3, 8, 24, .52);
  backdrop-filter: blur(12px);
}
.search-field {
  display: grid;
  gap: 7px;
  margin: 0;
}
.search-field span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.toolbar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.toolbar-pill {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
}
.toolbar-pill:hover,
.toolbar-pill.is-active {
  transform: none;
  border-color: rgba(34, 211, 238, .35);
  background: rgba(34, 211, 238, .11);
  color: #a5f3fc;
  box-shadow: none;
}
.admin-scroll-list {
  max-height: min(62vh, 720px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 232, 249, .35) rgba(255, 255, 255, .04);
}
.user-list { display: grid; gap: 10px; }
.user-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .035), transparent 42%),
    rgba(255, 255, 255, .02);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.user-row:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, .24);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .07), transparent 44%),
    rgba(255, 255, 255, .035);
}
.company-row {
  grid-template-columns: 42px minmax(0, 1fr);
}
.user-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, rgba(34, 211, 238, .2), rgba(99, 102, 241, .25)); color: #e0f2fe; font-weight: 900; }
.user-identity { min-width: 0; }
.user-identity > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.user-identity p { margin: 4px 0 0; color: #64748b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.role-pill { padding: 4px 7px; border-radius: 999px; background: rgba(139, 92, 246, .12); color: #c4b5fd; font-size: 9px; font-weight: 900; }
.user-permissions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.row-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
.action-chip {
  min-height: 34px;
  padding: 8px 11px;
  white-space: nowrap;
}
.contract-details {
  position: relative;
}
.contract-details summary {
  list-style: none;
}
.contract-details summary::-webkit-details-marker {
  display: none;
}
.user-access-editor { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 10px; }
.user-access-editor summary { width: fit-content; color: #67e8f9; font-size: 10px; font-weight: 900; cursor: pointer; }
.access-editor-form { margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: rgba(3, 7, 18, .38); }
.access-editor-form > button { justify-self: end; min-width: 150px; }
.compact-permissions { margin: 4px 0; padding: 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; }
.compact-permissions legend { padding: 0 6px; color: #cbd5e1; font-size: 11px; font-weight: 900; }
.permission-chip { padding: 5px 7px; border-radius: 7px; background: rgba(34, 211, 238, .07); color: #a5f3fc; font-size: 9px; font-weight: 800; }
.product-chip { background: rgba(99, 102, 241, .12); color: #c4b5fd; }
.all-chip { background: rgba(52, 211, 153, .09); color: #6ee7b7; }
.muted-chip { background: rgba(148, 163, 184, .08); color: #94a3b8; }

.create-user-form { gap: 20px; }
.form-grid { display: grid; gap: 14px; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-group { min-width: 0; }
.field-group label { display: block; margin: 0 0 7px; }
.field-group input,
.field-group select { width: 100%; }
.solution-permissions { margin: 0; padding: 18px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; }
.enhanced-permissions,
.whatsapp-permissions {
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .06), transparent 36%),
    rgba(255, 255, 255, .018);
}
.solution-permissions legend { padding: 0 7px; color: #f8fafc; font-size: 14px; font-weight: 900; }
.solution-permissions > p { margin: 0 0 15px; color: #64748b; font-size: 11px; line-height: 1.55; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.product-option { min-height: 76px; }
.product-option small { text-transform: none; letter-spacing: 0; line-height: 1.45; }
.solution-permissions[hidden] { display: none; }
.permission-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0; padding: 10px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 11px; background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.permission-option:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, .26);
  background: rgba(34, 211, 238, .045);
}
.permission-option:has(input:checked) { border-color: rgba(34, 211, 238, .38); background: rgba(34, 211, 238, .07); }
.permission-option input { width: 17px; height: 17px; accent-color: #22d3ee; flex: 0 0 auto; }
.permission-option span { min-width: 0; display: grid; gap: 3px; }
.permission-option strong { color: #e2e8f0; font-size: 11px; }
.permission-option small { color: #64748b; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.form-footer > span { color: #64748b; font-size: 10px; }
.form-footer button { min-width: 180px; }
.alert { margin-bottom: 18px; padding: 13px 16px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.success-alert { border: 1px solid rgba(52, 211, 153, .25); background: rgba(52, 211, 153, .08); color: #6ee7b7; }
.error-alert { border: 1px solid rgba(251, 113, 133, .25); background: rgba(251, 113, 133, .08); color: #fda4af; }

.admin-action-menu {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.admin-action-menu form {
  display: flex;
}
.admin-menu-tile {
  position: relative;
  min-width: 158px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .10), transparent 42%),
    rgba(255, 255, 255, .035);
  color: #f8fafc;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.admin-menu-tile::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #67e8f9, #3b82f6);
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity .18s ease, transform .18s ease;
}
.admin-menu-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, .36);
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .18), transparent 44%),
    rgba(34, 211, 238, .06);
  box-shadow: 0 18px 46px rgba(34, 211, 238, .10);
}
.admin-menu-tile:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
.admin-menu-tile span {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(34, 211, 238, .10);
  border: 1px solid rgba(34, 211, 238, .18);
}
.admin-menu-tile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.admin-menu-tile small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: 10px;
}
.admin-menu-tile.as-button {
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .09);
  text-align: left;
  box-shadow: none;
}

/* Usuários e permissões — topo e fluxo administrativo */
.admin-topbar {
  min-height: 78px;
}

.admin-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.admin-quick-actions form {
  display: inline-flex;
}

.admin-quick-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #f8fafc;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.admin-quick-action > span:first-child {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: 999px;
  background: rgba(34, 211, 238, .10);
  color: #a5f3fc;
  font-size: 14px;
  font-weight: 900;
}

.admin-quick-action strong,
.admin-quick-action small {
  display: block;
  line-height: 1.1;
}

.admin-quick-action strong {
  font-size: 12px;
}

.admin-quick-action small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
}

.admin-quick-action:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, .32);
  background: rgba(34, 211, 238, .075);
  box-shadow: 0 18px 42px rgba(34, 211, 238, .08);
}

.admin-quick-action.is-danger:hover {
  border-color: rgba(251, 113, 133, .28);
  background: rgba(251, 113, 133, .075);
  box-shadow: 0 18px 42px rgba(251, 113, 133, .06);
}

.admin-quick-action.as-button {
  cursor: pointer;
}

.admin-users-hero {
  position: relative;
  align-items: stretch;
  margin: 26px 0 24px;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, .12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0 10%, rgba(34, 211, 238, .16), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(99, 102, 241, .18), transparent 40%),
    rgba(8, 13, 31, .72);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .22);
}

.admin-users-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34, 211, 238, .12), transparent 66%);
  pointer-events: none;
}

.admin-users-hero > div {
  position: relative;
  z-index: 1;
}

.admin-users-hero h1 {
  max-width: 760px;
  font-size: clamp(42px, 5vw, 64px);
  letter-spacing: -.055em;
}

.admin-users-hero .admin-heading-side {
  align-self: stretch;
  min-width: min(100%, 320px);
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  background: rgba(3, 8, 24, .34);
}

.admin-users-hero .tenant-badge {
  justify-self: end;
  margin-bottom: 4px;
  border-color: rgba(103, 232, 249, .24);
  color: #a5f3fc;
}

.admin-users-hero .tenant-filter {
  min-width: 0;
  width: 100%;
}

.admin-users-hero .admin-kpi-strip {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 4px;
}

.users-list-panel,
.users-create-panel {
  border-color: rgba(103, 232, 249, .105);
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .06), transparent 34%),
    rgba(8, 13, 31, .82);
}

.users-list-panel .compact-heading,
.users-create-panel .compact-heading {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.users-create-panel .create-user-form {
  padding-top: 2px;
}

.users-create-panel .form-grid {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 18px;
  background: rgba(3, 8, 24, .28);
}

.users-list-panel .admin-list-toolbar {
  top: 88px;
  margin-top: 0;
}

.users-list-panel .user-row {
  padding: 17px;
  border-radius: 18px;
}

.users-list-panel .user-avatar {
  border-radius: 999px;
}

.users-list-panel .user-identity strong {
  font-size: 14px;
}

.users-list-panel .user-permissions {
  margin-left: 54px;
}

.users-create-panel .solution-permissions {
  border-radius: 18px;
}

.users-create-panel .form-footer {
  position: sticky;
  bottom: 0;
  margin: 0 -34px -34px;
  padding: 16px 34px 22px;
  background: linear-gradient(180deg, rgba(8, 13, 31, .7), rgba(8, 13, 31, .96));
  backdrop-filter: blur(12px);
}

.provider-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.provider-limit-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(3, 8, 24, .32);
}
.provider-limit-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(34, 211, 238, .09);
}
.provider-limit-card .field-group {
  min-width: 0;
}
.provider-limit-card small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 10px;
  line-height: 1.45;
}
.provider-limit-card input[type="number"] {
  padding: 10px 12px;
}
.admin-empty-state {
  margin-top: 12px;
}

.billing-trigger {
  background: rgba(34, 211, 238, .08);
  border-color: rgba(34, 211, 238, .22);
  color: #a5f3fc;
}

.billing-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(1, 5, 18, .66);
  backdrop-filter: blur(8px);
}

.billing-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 90;
  width: min(560px, 100vw);
  min-height: 100vh;
  padding: 24px;
  overflow: auto;
  transform: translateX(102%);
  border-left: 1px solid rgba(103, 232, 249, .18);
  background:
    radial-gradient(circle at 92% 0, rgba(34, 211, 238, .16), transparent 36%),
    linear-gradient(180deg, rgba(13, 24, 48, .98), rgba(6, 10, 27, .99));
  box-shadow: -30px 0 80px rgba(0, 0, 0, .42);
  transition: transform .24s ease;
}

.billing-drawer.is-open {
  transform: translateX(0);
}

.billing-drawer-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.billing-drawer-header h2 {
  font-size: 28px;
}

.billing-drawer-header p:last-child {
  max-width: 390px;
  margin: 8px 0 0;
  color: #94a3b8;
  line-height: 1.55;
  font-size: 13px;
}

.drawer-close {
  width: 40px;
  height: 40px;
  padding: 0;
  flex: 0 0 auto;
  font-size: 22px;
}

.billing-flow {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.billing-flow span {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.billing-flow span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .42);
}

.billing-flow span.is-done,
.billing-flow span.is-active {
  border-color: rgba(34, 211, 238, .32);
  background: rgba(34, 211, 238, .08);
  color: #a5f3fc;
}

.billing-flow span.is-done::before,
.billing-flow span.is-active::before {
  background: #22d3ee;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .10);
}

.billing-company-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(103, 232, 249, .18);
  border-radius: 18px;
  background: rgba(34, 211, 238, .06);
}

.billing-company-card strong,
.billing-company-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-company-card p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 11px;
}

.payment-status {
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .24);
  background: rgba(251, 191, 36, .10);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.payment-status.paid {
  border-color: rgba(34, 211, 238, .28);
  background: rgba(34, 211, 238, .10);
  color: #67e8f9;
}

.payment-status.active {
  border-color: rgba(52, 211, 153, .28);
  background: rgba(52, 211, 153, .10);
  color: #6ee7b7;
}

.billing-form,
.billing-result {
  display: grid;
  gap: 14px;
}

.billing-section {
  margin: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .024);
}

.billing-section legend {
  padding: 0 7px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
}

.billing-section > p {
  margin: 0 0 12px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.5;
}

.billing-plan-grid,
.billing-check-grid,
.billing-fields-grid,
.billing-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.billing-plan-option,
.billing-check-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(3, 8, 24, .28);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.billing-plan-option:hover,
.billing-check-option:hover,
.billing-solution-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, .26);
  background: rgba(34, 211, 238, .045);
}

.billing-plan-option:has(input:checked),
.billing-check-option:has(input:checked),
.billing-solution-chip:has(input:checked) {
  border-color: rgba(34, 211, 238, .42);
  background: rgba(34, 211, 238, .09);
}

.billing-plan-option input,
.billing-check-option input,
.billing-solution-chip input,
.billing-payment-methods input {
  width: 17px;
  height: 17px;
  accent-color: #22d3ee;
  flex: 0 0 auto;
}

.billing-plan-option span,
.billing-check-option span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.billing-plan-option strong,
.billing-check-option strong {
  color: #f8fafc;
  font-size: 12px;
}

.billing-plan-option small,
.billing-check-option small {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.35;
}

.billing-solutions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 160px;
  overflow: auto;
  padding-right: 4px;
}

.billing-solution-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  background: rgba(3, 8, 24, .28);
  color: #cbd5e1;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.billing-payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.billing-payment-methods label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  background: rgba(3, 8, 24, .28);
}

.billing-total-card {
  padding: 16px;
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .16), transparent 48%),
    rgba(34, 211, 238, .06);
}

.billing-total-card span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.billing-total-card strong {
  display: block;
  margin-top: 7px;
  color: #67e8f9;
  font-size: 30px;
}

.billing-total-card small {
  display: block;
  margin-top: 7px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.45;
}

.billing-primary-action {
  width: 100%;
}

.billing-result {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 18px;
  background: rgba(52, 211, 153, .055);
}

.billing-link-box {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: rgba(3, 8, 24, .34);
}

.billing-link-box span {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.billing-link-box strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: #a5f3fc;
  font-size: 12px;
}

.billing-status-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.billing-status-board button {
  min-height: 42px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(3, 8, 24, .32);
  box-shadow: none;
  color: #94a3b8;
  font-size: 10px;
}

.billing-status-board button.is-active {
  border-color: rgba(34, 211, 238, .34);
  background: rgba(34, 211, 238, .10);
  color: #a5f3fc;
}

.manual-release {
  margin-top: 16px;
  border: 1px solid rgba(251, 191, 36, .18);
  border-radius: 16px;
  background: rgba(251, 191, 36, .045);
}

.manual-release summary {
  padding: 14px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.manual-release-panel {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.manual-release-panel p,
.manual-release-panel small {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.55;
}

.manual-release textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, .035);
  color: #f8fafc;
  outline: none;
}

@media (max-width: 820px) {
  main { padding: 16px; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-card-logo { display: block; }
  .auth-card { padding: 32px 24px; }
  .portal-shell { width: min(100% - 24px, 720px); }
  .portal-header { align-items: flex-start; padding: 18px 0; }
  .portal-actions { align-items: flex-end; flex-direction: column; }
  .portal-session { display: none; }
  .portal-session-card .portal-session { display: grid; }
  .product-grid,
  .solution-grid,
  .admin-grid,
  .two-columns,
  .permission-grid { grid-template-columns: 1fr; }
  .product-permission-grid { grid-template-columns: 1fr; }
  .admin-heading { align-items: stretch; flex-direction: column; }
  .admin-heading-rich { grid-template-columns: 1fr; }
  .admin-heading-side { justify-items: stretch; }
  .admin-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-action-menu { width: 100%; display: grid; grid-template-columns: 1fr; }
  .admin-menu-tile { width: 100%; }
  .admin-topbar { align-items: stretch; }
  .admin-quick-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .admin-quick-actions form { width: 100%; }
  .admin-quick-action { width: 100%; }
  .admin-users-hero { margin-top: 18px; border-radius: 24px; }
  .admin-users-hero .admin-heading-side { justify-items: stretch; }
  .admin-users-hero .tenant-badge { justify-self: stretch; text-align: center; }
  .users-list-panel .user-permissions { margin-left: 0; }
  .users-create-panel .form-footer { margin: 0 -22px -22px; padding: 16px 22px 20px; }
  .tenant-filter { min-width: 0; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .provider-limit-grid { grid-template-columns: 1fr; }
}
.contract-editor {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 10;
    width: min(34rem, calc(100vw - 4rem));
    max-height: 70vh;
    overflow: auto;
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid rgba(103, 232, 249, .22);
    border-radius: 1rem;
    background: rgba(8, 13, 31, .98);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .35);
}

.contract-editor div { display: grid; gap: .4rem; }
.contract-editor label { display: flex; gap: .5rem; align-items: center; }

/* Billing access administration */
.access-admin-shell {
  padding-bottom: 64px;
}

.access-admin-header {
  border-bottom-color: rgba(148, 163, 184, .12);
}

.access-admin-nav {
  flex-wrap: wrap;
}

.access-admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 0 32px;
}

.access-admin-heading {
  max-width: 720px;
}

.access-admin-heading h1 {
  margin: 10px 0 12px;
  color: #f8fafc;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.access-admin-heading > p:last-child {
  max-width: 660px;
  margin: 0;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.7;
}

.access-admin-source {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: 16px;
  background: rgba(34, 211, 238, .055);
}

.access-source-pulse {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 0 6px rgba(34, 211, 238, .1);
}

.access-admin-source small,
.access-admin-source strong {
  display: block;
}

.access-admin-source small {
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.access-admin-source strong {
  margin-top: 3px;
  color: #cffafe;
  font-size: 13px;
}

.access-company-context {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, .9fr) minmax(220px, .8fr);
  align-items: end;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 20px;
  background: rgba(8, 15, 35, .72);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .14);
}

.access-company-selector-card {
  grid-template-columns: minmax(210px, .72fr) minmax(360px, 1.1fr) minmax(220px, .72fr);
  align-items: center;
  padding: 26px;
  border-color: rgba(103, 232, 249, .18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 0, rgba(34, 211, 238, .10), transparent 34%),
    rgba(8, 15, 35, .76);
}

.access-company-context h2 {
  margin: 5px 0 3px;
  color: #f8fafc;
  font-size: 22px;
}

.access-company-context p {
  margin-bottom: 0;
  color: #64748b;
  font-size: 12px;
}

.access-company-selector label,
.access-sync-info span {
  display: block;
  margin-bottom: 7px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.access-company-selector select {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(103, 232, 249, .22);
  border-radius: 16px;
  padding: 0 46px 0 16px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(8, 15, 35, .96)),
    #0a1229;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  text-overflow: ellipsis;
}

.access-company-selector select:focus {
  border-color: rgba(34, 211, 238, .62);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .1);
}

.access-sync-info {
  text-align: right;
}

.access-sync-info strong {
  color: #cbd5e1;
  font-size: 12px;
}

.access-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.access-kpi {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 18px;
  background: rgba(8, 15, 35, .66);
}

.access-kpi::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--access-accent, #64748b);
  content: "";
}

.access-kpi.is-active { --access-accent: #34d399; }
.access-kpi.is-grace { --access-accent: #fbbf24; }
.access-kpi.is-suspended { --access-accent: #fb7185; }
.access-kpi.is-pending { --access-accent: #64748b; }

.access-kpi span,
.access-kpi small {
  display: block;
  color: #94a3b8;
}

.access-kpi span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.access-kpi strong {
  display: block;
  margin: 10px 0 5px;
  color: #f8fafc;
  font-size: 30px;
}

.access-kpi small { font-size: 11px; }

.access-notice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(100, 116, 139, .22);
  border-radius: 18px;
  background: rgba(100, 116, 139, .07);
}

.access-notice.is-warning {
  border-color: rgba(251, 191, 36, .24);
  background: rgba(251, 191, 36, .055);
}

.access-notice-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, .13);
  color: #cbd5e1;
  font-weight: 900;
}

.access-notice.is-warning .access-notice-icon {
  background: rgba(251, 191, 36, .13);
  color: #fbbf24;
}

.access-notice strong { color: #e2e8f0; font-size: 13px; }
.access-notice p { margin: 4px 0 0; color: #94a3b8; font-size: 12px; line-height: 1.5; }

.access-panel {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 22px;
  background: rgba(8, 15, 35, .7);
}

.access-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.access-panel-heading h2 { margin: 5px 0 0; color: #f8fafc; font-size: 21px; }
.access-panel-heading > span { color: #64748b; font-size: 11px; font-weight: 800; }

.access-list { display: grid; }

.access-row {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1.1fr) minmax(150px, .7fr) minmax(310px, 1.3fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.access-row:last-child { border-bottom: 0; }
.access-row:hover { background: rgba(34, 211, 238, .025); }

.access-product-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: 13px;
  background: rgba(34, 211, 238, .08);
  color: #67e8f9;
  font-weight: 900;
}

.access-scope span { color: #64748b; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.access-scope h3 { margin: 4px 0 2px; color: #e2e8f0; font-size: 14px; }
.access-scope small { color: #475569; font-size: 10px; }

.access-effective > span { display: block; margin-bottom: 7px; color: #64748b; font-size: 10px; }
.access-effective.is-allowed > span { color: #6ee7b7; }
.access-effective.is-blocked > span { color: #fda4af; }

.access-status {
  display: inline-flex;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  color: #cbd5e1;
  font-size: 10px;
}

.access-status.is-active { border-color: rgba(52, 211, 153, .25); background: rgba(52, 211, 153, .09); color: #6ee7b7; }
.access-status.is-grace { border-color: rgba(251, 191, 36, .25); background: rgba(251, 191, 36, .09); color: #fcd34d; }
.access-status.is-suspended,
.access-status.is-canceled { border-color: rgba(251, 113, 133, .25); background: rgba(251, 113, 133, .09); color: #fda4af; }

.access-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.access-details dt { color: #475569; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.access-details dd { margin: 4px 0 0; color: #94a3b8; font-size: 11px; }
.access-version { color: #475569; font-size: 10px; font-weight: 800; }

.access-empty-state {
  display: grid;
  justify-items: center;
  padding: 46px 24px;
  text-align: center;
}

.access-empty-state > span { color: #22d3ee; font-size: 28px; }
.access-empty-state strong { margin-top: 10px; color: #e2e8f0; font-size: 14px; }
.access-empty-state p { max-width: 520px; margin: 7px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }

@media (max-width: 980px) {
  .access-company-context { grid-template-columns: 1fr 1fr; }
  .access-sync-info { grid-column: 1 / -1; text-align: left; }
  .access-row { grid-template-columns: 44px 1fr auto; }
  .access-effective { text-align: right; }
  .access-details { grid-column: 2 / -1; }
  .access-version { position: absolute; visibility: hidden; }
}

@media (max-width: 680px) {
  .access-admin-header { align-items: stretch; flex-direction: column; }
  .access-admin-header .portal-brand { align-self: flex-start; }
  .access-admin-nav { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .access-admin-nav .ghost-link { padding: 10px 8px; text-align: center; white-space: nowrap; }
  .access-admin-hero { align-items: stretch; flex-direction: column; padding-top: 30px; }
  .access-admin-source { min-width: 0; }
  .access-company-context { grid-template-columns: 1fr; }
  .access-sync-info { grid-column: auto; }
  .access-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-notice { grid-template-columns: auto 1fr; }
  .access-notice a { grid-column: 1 / -1; text-align: center; }
  .access-row { grid-template-columns: 38px 1fr; padding: 16px; }
  .access-product-icon { width: 38px; height: 38px; }
  .access-effective { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
  .access-effective > span { margin: 0; }
  .access-details { grid-column: 1 / -1; grid-template-columns: 1fr; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, .08); }
}

.access-feedback {
  margin-bottom: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(52, 211, 153, .25);
  border-radius: 14px;
  background: rgba(52, 211, 153, .08);
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 800;
}

.access-feedback.is-error {
  border-color: rgba(251, 113, 133, .25);
  background: rgba(251, 113, 133, .08);
  color: #fecdd3;
}

.manual-access-panel {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid rgba(34, 211, 238, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(34, 211, 238, .06), transparent 32%),
    rgba(8, 15, 35, .72);
}

.manual-access-panel .access-panel-heading p:last-child {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 11px;
}

.manual-access-unavailable {
  display: flex;
  gap: 8px;
  margin: 16px 20px 0;
  padding: 12px 14px;
  border: 1px solid rgba(251, 113, 133, .2);
  border-radius: 13px;
  background: rgba(251, 113, 133, .06);
  color: #fda4af;
  font-size: 11px;
}

.manual-access-layout {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(420px, 1.2fr);
}

.manual-access-layout-improved {
  grid-template-columns: minmax(500px, .95fr) minmax(480px, 1.05fr);
  min-height: 560px;
}

.manual-access-layout.is-readonly { grid-template-columns: 1fr; }

.manual-access-form {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 26px 28px;
  border-right: 1px solid rgba(148, 163, 184, .1);
  background:
    radial-gradient(circle at 0 0, rgba(34, 211, 238, .075), transparent 34%),
    rgba(3, 8, 24, .16);
}

.manual-access-form-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.manual-access-form-heading strong { display: block; color: #e2e8f0; font-size: 14px; }
.manual-access-form-heading p { margin: 3px 0 0; color: #64748b; font-size: 10px; }

.manual-access-company-pill {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 211, 238, .14);
  border-radius: 16px;
  background: rgba(34, 211, 238, .055);
}

.manual-access-company-pill span {
  color: #67e8f9;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.manual-access-company-pill strong {
  color: #f8fafc;
  font-size: 15px;
}

.manual-access-company-pill small {
  color: #94a3b8;
  font-size: 11px;
}

.manual-access-form label {
  display: grid;
  gap: 7px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.manual-access-form label small {
  color: #475569;
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
}

.manual-access-form select,
.manual-access-form input,
.manual-access-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  padding: 12px 14px;
  background: #080f23;
  color: #e2e8f0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
  text-overflow: ellipsis;
}

.manual-access-form select {
  padding-right: 44px;
}

.manual-access-form select:focus,
.manual-access-form input:focus,
.manual-access-form textarea:focus {
  border-color: rgba(34, 211, 238, .55);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .08);
}

.manual-access-form textarea {
  min-height: 92px;
  resize: vertical;
}

.manual-access-date-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.manual-access-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  border-radius: 16px;
  font-size: 14px;
}
.manual-access-submit:disabled { opacity: .45; cursor: not-allowed; }

.validation-summary,
.field-validation-error {
  color: #fda4af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.validation-summary:empty,
.field-validation-error:empty { display: none; }
.validation-summary ul { margin: 0; padding-left: 18px; }

.manual-access-history {
  min-width: 0;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(99, 102, 241, .08), transparent 34%),
    rgba(8, 15, 35, .22);
}
.manual-access-history-heading strong { color: #e2e8f0; font-size: 15px; }
.manual-access-history-heading p { margin: 4px 0 0; color: #94a3b8; font-size: 11px; }

.manual-access-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  margin-top: 16px;
  overflow: auto;
  padding-right: 4px;
}

.manual-access-item {
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, .1);
  border-radius: 15px;
  background: rgba(3, 8, 24, .34);
}

.manual-access-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.manual-access-item-top div > span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.manual-access-item-top div > strong { display: block; margin-top: 4px; color: #e2e8f0; font-size: 13px; }
.manual-access-item > p { margin: 10px 0; color: #94a3b8; font-size: 11px; line-height: 1.5; }

.manual-access-item dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.manual-access-item dt { color: #475569; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.manual-access-item dd { margin: 3px 0 0; color: #94a3b8; font-size: 10px; }
.manual-access-revoke { margin-top: 12px; }
.manual-access-revoke button { width: 100%; padding: 8px 10px; color: #fda4af; }

.manual-access-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 8px;
  margin-top: 18px;
  border: 1px dashed rgba(103, 232, 249, .16);
  border-radius: 18px;
  background: rgba(3, 8, 24, .22);
  color: #475569;
  text-align: center;
}

.manual-access-empty > span { color: #22d3ee; font-size: 24px; }
.manual-access-empty strong { color: #e2e8f0; font-size: 13px; }
.manual-access-empty p { margin: 0; font-size: 11px; }

@media (max-width: 1160px) {
  .manual-access-layout-improved { grid-template-columns: 1fr; }
  .manual-access-date-grid { grid-template-columns: 1fr; }
  .manual-access-form { border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .1); }
}

@media (max-width: 860px) {
  .manual-access-layout { grid-template-columns: 1fr; }
  .manual-access-form { border-right: 0; border-bottom: 1px solid rgba(148, 163, 184, .1); }
}

@media (max-width: 520px) {
  .manual-access-date-grid,
  .manual-access-item dl { grid-template-columns: 1fr; }
.manual-access-form,
.manual-access-history { padding: 17px; }
}

/* Ajustes UX — portal, selects pesquisáveis e drawer de usuários */
.product-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.product-card::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 86px;
  width: 118px;
  height: 74px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(34, 211, 238, .75) 0 46%, transparent 46%) 16px 18px / 74px 6px no-repeat,
    linear-gradient(90deg, rgba(148, 163, 184, .42) 0 68%, transparent 68%) 16px 32px / 78px 5px no-repeat,
    linear-gradient(90deg, rgba(148, 163, 184, .28) 0 52%, transparent 52%) 16px 45px / 80px 5px no-repeat,
    rgba(3, 8, 24, .26);
  opacity: .42;
  transform: translateY(6px) scale(.96);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}

.product-card:hover::after {
  opacity: .9;
  transform: translateY(0) scale(1);
  border-color: rgba(103, 232, 249, .34);
}

.product-card:hover .product-icon {
  transform: translateY(-2px) rotate(-2deg);
  border-color: rgba(103, 232, 249, .45);
  box-shadow: 0 18px 46px rgba(34, 211, 238, .14);
}

.product-icon {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.product-card > div,
.product-card > span {
  position: relative;
  z-index: 1;
}

.product-launch-link {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #67e8f9;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.product-launch-link > span {
  transition: transform .18s ease;
}

.product-card:hover .product-launch-link > span {
  transform: translateX(5px);
}

.native-searchable-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.searchable-select {
  position: relative;
  width: 100%;
}

.searchable-select-trigger {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 14px;
  padding: 12px 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .08), transparent 42%),
    #080f23;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  color: #f8fafc;
  text-align: left;
}

.searchable-select-trigger:hover,
.searchable-select.is-open .searchable-select-trigger {
  transform: none;
  filter: none;
  border-color: rgba(34, 211, 238, .56);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .08);
}

.searchable-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select-chevron {
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  transition: transform .18s ease;
}

.searchable-select.is-open .searchable-select-chevron {
  transform: rotate(180deg);
}

.searchable-select.is-disabled {
  opacity: .55;
}

.searchable-select-panel {
  position: absolute;
  inset: calc(100% + 8px) 0 auto;
  z-index: 120;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(34, 211, 238, .08), transparent 36%),
    rgba(5, 10, 26, .98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.searchable-select-search {
  width: calc(100% - 20px) !important;
  margin: 10px;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .045) !important;
}

.searchable-select-list {
  max-height: 240px;
  overflow: auto;
  padding: 6px;
}

.searchable-select-option {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  padding: 9px 11px;
  background: transparent;
  box-shadow: none;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.searchable-select-option:hover,
.searchable-select-option.is-selected {
  transform: none;
  filter: none;
  background: rgba(34, 211, 238, .11);
  color: #e0faff;
  box-shadow: none;
}

.searchable-select-option.is-selected::after {
  content: "✓";
  color: #67e8f9;
}

.searchable-select-empty {
  padding: 18px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.users-admin-grid {
  grid-template-columns: minmax(0, 1fr);
}

.users-admin-grid .users-list-panel {
  min-height: 540px;
}

.users-admin-grid .admin-scroll-list {
  max-height: min(74vh, 920px);
}

.admin-hero-cta {
  display: inline-flex;
  width: fit-content;
  margin-top: 24px;
  border: 0;
}

.user-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(1, 5, 18, .66);
  backdrop-filter: blur(8px);
}

.user-create-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 90;
  width: min(680px, calc(100vw - 28px));
  height: 100vh;
  display: block;
  overflow-y: auto;
  padding: 26px 34px 34px;
  border-width: 0 0 0 1px;
  border-radius: 0;
  transform: translateX(104%);
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: -34px 0 90px rgba(0, 0, 0, .32);
}

.user-create-drawer.is-open {
  transform: translateX(0);
}

.drawer-close-button {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-left: auto;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
  color: #cbd5e1;
  font-size: 26px;
  line-height: 1;
}

.drawer-close-button:hover {
  transform: none;
  border-color: rgba(251, 113, 133, .32);
  background: rgba(251, 113, 133, .08);
  color: #fecdd3;
  box-shadow: none;
}

.user-create-drawer .compact-heading p:not(.eyebrow) {
  margin: 8px 0 0;
  max-width: 460px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .product-card::after {
    display: none;
  }

  .user-create-drawer {
    width: 100vw;
    padding: 20px;
  }

  .admin-hero-cta {
    width: 100%;
    justify-content: center;
  }
}