:root {
  --bg: #f5f6fb;
  --surface: #fff;
  --surface-2: #faf9ff;
  --ink: #15111f;
  --muted: #756f82;
  --line: #e9e4f1;
  --brand: #7c2cff;
  --brand-2: #a855f7;
  --brand-3: #5b18d6;
  --neon: #b862ff;
  --dark: #07050f;
  --dark-2: #10091e;
  --success: #16a36a;
  --warning: #d98b16;
  --danger: #dc3e64;
  --info: #3182ce;
  --shadow: 0 18px 55px rgba(50, 25, 85, .09);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}

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

button {
  cursor: pointer
}

button:disabled {
  cursor: not-allowed;
  opacity: .5
}

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

.hidden {
  display: none !important
}

.w-full {
  width: 100%
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: radial-gradient(circle at 50% 25%, #231047 0, #0a0613 48%, #05030b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cfc7da;
  gap: 20px
}

.boot-logo {
  width: 190px;
  max-height: 120px;
  object-fit: contain;
  object-position: center
}

.boot-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid rgba(168, 85, 247, .15);
  border-top-color: #a855f7;
  animation: spin .8s linear infinite
}

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

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr);
  background: #fff
}

.auth-brand-panel {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 10%, rgba(126, 44, 255, .48), transparent 25rem), radial-gradient(circle at 80% 80%, rgba(112, 28, 225, .3), transparent 30rem), linear-gradient(145deg, #05030c, #0d0718 65%, #140724);
  color: #fff;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center
}

.auth-brand-panel:before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border: 2px solid rgba(151, 65, 255, .22);
  border-radius: 50%;
  left: -240px;
  top: -180px;
  box-shadow: 0 0 60px rgba(140, 63, 255, .28)
}

.auth-brand-panel:after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 52%;
  height: 34%;
  background: linear-gradient(135deg, transparent, rgba(120, 32, 245, .18));
  clip-path: polygon(100% 0, 100% 100%, 0 100%)
}

.auth-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .25
}

.glow-one {
  width: 180px;
  height: 180px;
  background: #9c37ff;
  top: 10%;
  right: 10%
}

.glow-two {
  width: 220px;
  height: 220px;
  background: #4b00ff;
  bottom: 8%;
  left: 30%
}

.auth-brand-content {
  position: relative;
  z-index: 2;
  max-width: 620px
}

.auth-logo {
  width: 220px;
  height: 145px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 35px
}

.eyebrow {
  display: inline-flex;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  letter-spacing: .16em;
  font-size: .7rem;
  color: #cfb7ff
}

.text-purple {
  color: var(--brand)
}

.auth-brand-content h1 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
  margin: 18px 0 22px;
  max-width: 700px
}

.auth-brand-content>p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #c5bbd5;
  max-width: 560px
}

.auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
  max-width: 560px
}

.auth-feature-grid div {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  color: #ddd4ea;
  font-size: .9rem
}

.auth-feature-grid i {
  color: #b65cff
}

.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
  background: linear-gradient(180deg, #fff, #fbf9ff)
}

.auth-form-card {
  width: min(440px, 100%)
}

.auth-form-card h2 {
  font-family: Montserrat, sans-serif;
  font-size: 2rem;
  margin: 12px 0 7px;
  letter-spacing: -.04em
}

.auth-subtitle {
  color: var(--muted);
  font-size: .92rem;
  margin: 0 0 28px
}

.form-stack {
  display: grid;
  gap: 17px
}

.field-wrap>span,
.field-label {
  display: block;
  font-size: .76rem;
  font-weight: 800;
  color: #534c60;
  margin-bottom: 7px
}

.input-icon-wrap {
  position: relative
}

.input-icon-wrap>i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #9b91a8
}

.input-icon-wrap input {
  padding-left: 43px !important
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #918899
}

.input,
.input-icon-wrap input,
.textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #e2dce9;
  background: #fff;
  border-radius: 13px;
  padding: 11px 13px;
  color: var(--ink);
  outline: none;
  transition: .18s
}

.textarea {
  min-height: 115px;
  resize: vertical
}

.input:focus,
.input-icon-wrap input:focus,
.textarea:focus {
  border-color: rgba(124, 44, 255, .58);
  box-shadow: 0 0 0 4px rgba(124, 44, 255, .1)
}

.auth-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
  color: var(--muted)
}

.remember-row {
  display: flex;
  gap: 7px;
  align-items: center
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 800;
  padding: 0
}

.form-error {
  margin: 0;
  color: #b42342;
  background: #fff0f4;
  border: 1px solid #ffd2de;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: .8rem
}

.auth-security {
  margin-top: 25px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #8a8294;
  font-size: .76rem
}

.auth-security i {
  color: var(--brand)
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 42px;
  padding: 9px 14px;
  font-weight: 800;
  font-size: .83rem;
  transition: .18s
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px)
}

.btn-lg {
  min-height: 50px
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand), #a33dff);
  color: #fff;
  box-shadow: 0 10px 25px rgba(124, 44, 255, .24)
}

.btn-secondary {
  background: #fff;
  color: #30263c;
  border-color: #e5ddec
}

.btn-soft {
  background: #f7f3fb;
  color: #5a4d68;
  border-color: #eee5f4
}

.btn-success {
  background: #edfdf5;
  color: #08794d;
  border-color: #c6f2dc
}

.btn-danger {
  background: #fff1f4;
  color: #c82b53;
  border-color: #ffd0dc
}

.btn-dark {
  background: #120a20;
  color: #fff;
  border-color: #241137
}

.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e5dfec;
  background: #fff;
  color: #5e536a;
  display: grid;
  place-items: center
}

.icon-btn:hover {
  background: #f7f3fb
}

.icon-btn-dark {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: #c7bdd4
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #7c2cff, #b45eff);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: .76rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(124, 44, 255, .22)
}

.avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: .68rem
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 270px 1fr
}

.sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: 270px;
  padding: 18px 14px 15px;
  background: radial-gradient(circle at 10% 0, rgba(124, 44, 255, .24), transparent 18rem), linear-gradient(180deg, #080510, #0b0613);
  color: #fff;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, .06)
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 14px
}

.sidebar-brand img {
  width: 76px;
  height: 52px;
  object-fit: contain;
  border-radius: 8px
}

.sidebar-brand strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: .98rem
}

.sidebar-brand span {
  display: block;
  font-size: .64rem;
  color: #8e819d;
  margin-top: 2px;
  letter-spacing: .08em;
  text-transform: uppercase
}

.sidebar-nav {
  display: grid;
  gap: 4px;
  overflow-y: auto;
  padding: 2px 0 90px
}

.nav-link {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: transparent;
  color: #a99db6;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: .82rem;
  font-weight: 700;
  transition: .18s
}

.nav-link i {
  width: 18px;
  text-align: center
}

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

.nav-link.active {
  background: linear-gradient(90deg, rgba(124, 44, 255, .28), rgba(124, 44, 255, .07));
  color: #fff;
  box-shadow: inset 3px 0 0 #ad56ff
}

.nav-count {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: .65rem;
  color: #d7cde2
}

.nav-separator {
  height: 1px;
  background: rgba(255, 255, 255, .06);
  margin: 8px 5px
}

.sidebar-user {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  backdrop-filter: blur(12px)
}

.sidebar-user-copy {
  min-width: 0
}

.sidebar-user-copy strong {
  display: block;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sidebar-user-copy span {
  display: block;
  font-size: .62rem;
  color: #9388a0;
  margin-top: 2px
}

.main-content {
  grid-column: 2;
  min-width: 0
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: 72px;
  border-bottom: 1px solid rgba(226, 220, 235, .9);
  background: rgba(245, 246, 251, .87);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 26px
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px
}

.topbar-kicker {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  letter-spacing: .1em;
  color: #9e8cab;
  font-size: .55rem
}

.topbar h1 {
  font-family: Montserrat, sans-serif;
  margin: 2px 0 0;
  font-size: 1.25rem;
  letter-spacing: -.035em
}

.topbar p {
  margin: 1px 0 0;
  font-size: .67rem;
  color: #91899c
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #e5ddec;
  background: #fff;
  padding: 5px 8px 5px 5px;
  border-radius: 14px;
  color: #4e4559
}

.profile-chip strong {
  display: block;
  text-align: left;
  font-size: .7rem;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.profile-chip small {
  display: block;
  text-align: left;
  color: #94899f;
  font-size: .58rem;
  margin-top: 1px
}

.profile-chip>i {
  font-size: .62rem;
  margin-right: 3px
}

.mobile-menu-btn {
  display: none
}

.page-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 26px 38px
}

.panel {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 7px 24px rgba(55, 35, 78, .045)
}

.panel-pad {
  padding: 19px
}

.panel-title {
  font-family: Montserrat, sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0
}

.panel-subtitle {
  font-size: .72rem;
  color: var(--muted);
  margin: 4px 0 0
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px
}

.section-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 27px;
  background: radial-gradient(circle at 80% 30%, rgba(174, 84, 255, .34), transparent 24rem), linear-gradient(135deg, #090511, #140825 65%, #1c0b35);
  color: #fff;
  box-shadow: 0 24px 55px rgba(38, 17, 65, .16)
}

.dashboard-hero:before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid rgba(179, 91, 255, .2);
  right: -80px;
  top: -110px;
  box-shadow: 0 0 50px rgba(139, 48, 255, .15)
}

.dashboard-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px
}

.dashboard-hero h2 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  letter-spacing: -.05em;
  margin: 8px 0 9px
}

.dashboard-hero p {
  margin: 0;
  color: #bcaecb;
  max-width: 650px;
  font-size: .85rem;
  line-height: 1.65
}

.hero-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .65rem;
  font-weight: 800;
  color: #d7c5e9
}

.hero-commission {
  text-align: right;
  min-width: 180px
}

.hero-commission span {
  display: block;
  color: #bbaec9;
  font-size: .66rem
}

.hero-commission strong {
  font-family: Montserrat, sans-serif;
  font-size: 2.25rem;
  color: #c66cff;
  display: block;
  margin-top: 4px
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px
}

.stat-card {
  padding: 17px
}

.stat-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px
}

.stat-card-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9a90a3;
  font-weight: 800
}

.stat-number {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 1.7rem;
  letter-spacing: -.05em;
  margin-top: 5px
}

.stat-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f5effb;
  color: var(--brand)
}

.stat-foot {
  font-size: .65rem;
  color: #9a91a4;
  margin-top: 10px
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
  margin-top: 14px
}

.progress-row {
  margin: 13px 0
}

.progress-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .68rem;
  margin-bottom: 7px
}

.progress-top strong {
  font-size: .7rem
}

.progress-track {
  height: 8px;
  background: #f0ecf4;
  border-radius: 999px;
  overflow: hidden
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7224ef, #b95eff);
  border-radius: 999px
}

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

.pipeline-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: #fdfcff
}

.pipeline-card span {
  font-size: .63rem;
  color: #8e8398
}

.pipeline-card strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 1.2rem;
  margin-top: 4px
}

.activity-list {
  display: grid;
  gap: 8px
}

.activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid #eee8f2;
  border-radius: 13px;
  background: #fff
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f5effb;
  color: #7c2cff;
  font-size: .72rem
}

.activity-row strong {
  display: block;
  font-size: .72rem
}

.activity-row p {
  margin: 3px 0 0;
  color: #756d7d;
  font-size: .67rem;
  line-height: 1.4
}

.activity-row time {
  font-size: .58rem;
  color: #a39aaa;
  white-space: nowrap
}

.rank-list {
  display: grid;
  gap: 9px
}

.rank-row {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  gap: 9px;
  align-items: center
}

.rank-pos {
  font-family: Montserrat, sans-serif;
  color: #7d7188;
  font-size: .75rem;
  font-weight: 800
}

.rank-copy strong {
  display: block;
  font-size: .7rem
}

.rank-copy span {
  display: block;
  color: #9a91a2;
  font-size: .59rem
}

.rank-value {
  text-align: right
}

.rank-value strong {
  font-size: .74rem
}

.rank-value span {
  display: block;
  font-size: .58rem;
  color: #9a91a2
}

.filter-panel {
  padding: 18px;
  margin-bottom: 14px
}

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

.col-2 {
  grid-column: span 2
}

.col-3 {
  grid-column: span 3
}

.col-4 {
  grid-column: span 4
}

.col-5 {
  grid-column: span 5
}

.col-6 {
  grid-column: span 6
}

.col-7 {
  grid-column: span 7
}

.col-8 {
  grid-column: span 8
}

.col-12 {
  grid-column: span 12
}

.check-card {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: #fbfafe;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 46px
}

.check-card strong {
  display: block;
  font-size: .69rem
}

.check-card span {
  display: block;
  font-size: .58rem;
  color: #9b91a5
}

.check-card input {
  accent-color: var(--brand)
}

.results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 13px 0
}

.results-toolbar strong {
  font-family: Montserrat, sans-serif
}

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

.company-card {
  overflow: hidden;
  transition: .18s
}

.company-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow)
}

.company-accent {
  height: 3px;
  background: linear-gradient(90deg, #6a20ec, #bf63ff)
}

.company-card-body {
  padding: 16px
}

.company-kicker {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9b91a4;
  font-weight: 800
}

.company-card h3 {
  font-family: Montserrat, sans-serif;
  font-size: .93rem;
  line-height: 1.35;
  margin: 5px 0 10px;
  min-height: 40px
}

.company-info {
  display: grid;
  gap: 7px;
  font-size: .68rem;
  color: #6f6678
}

.company-info div {
  display: flex;
  gap: 8px
}

.company-info i {
  width: 14px;
  color: #9b8fa5;
  margin-top: 2px
}

.card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 11px
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid #e7e0ec;
  background: #faf8fc;
  color: #706577;
  padding: 4px 8px;
  font-size: .56rem;
  font-weight: 800
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor
}

.badge.neutral {
  background: #f6f5f7;
  color: #716a78
}

.badge.warning {
  background: #fff8ea;
  color: #a96909;
  border-color: #ffe0aa
}

.badge.info {
  background: #eef7ff;
  color: #2670aa;
  border-color: #cfeaff
}

.badge.purple {
  background: #f7efff;
  color: #7223d1;
  border-color: #e8d0ff
}

.badge.success {
  background: #edfff5;
  color: #087749;
  border-color: #c8f0da
}

.badge.danger {
  background: #fff0f4;
  color: #b92950;
  border-color: #ffd4df
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 7px;
  margin-top: 14px
}

.tiny-btn {
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e7e1ec;
  background: #fff;
  color: #605667;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .65rem;
  font-weight: 800;
  padding: 0 10px
}

.tiny-btn:hover {
  background: #f9f6fc
}

.tiny-btn.primary {
  background: #7c2cff;
  color: #fff;
  border-color: #7c2cff
}

.tiny-btn.success {
  color: #087b4c;
  background: #f0fff7;
  border-color: #c9f1dc
}

.tiny-btn.locked {
  background: #f5f3f6;
  color: #948c9b
}

.owner-strip {
  margin-top: 10px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #f8f4fc;
  border: 1px solid #eee4f7;
  font-size: .6rem;
  color: #776880;
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.owner-strip strong {
  color: #53475e
}

.empty-state {
  text-align: center;
  padding: 46px 20px;
  color: #847b8d
}

.empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  background: #f3edf8;
  color: #7c2cff;
  font-size: 1.1rem
}

.empty-state h3 {
  font-family: Montserrat, sans-serif;
  margin: 0;
  color: #3f3547;
  font-size: .92rem
}

.empty-state p {
  font-size: .69rem;
  margin: 6px auto 0;
  max-width: 460px;
  line-height: 1.5
}

.table-panel {
  overflow: hidden
}

.table-wrap {
  overflow: auto
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px
}

.data-table th {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  font-size: .57rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #968b9f;
  background: #fbfafd
}

.data-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #f0ebf3;
  font-size: .67rem;
  vertical-align: middle
}

.data-table tr:hover td {
  background: #fdfcff
}

.table-company strong {
  display: block;
  font-size: .7rem;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.table-company span {
  display: block;
  color: #9b91a3;
  font-size: .58rem;
  margin-top: 2px
}

.status-select {
  min-height: 34px;
  padding: 6px 8px;
  font-size: .62rem;
  font-weight: 700
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px
}

.money {
  font-family: Montserrat, sans-serif;
  font-weight: 800
}

.positive {
  color: #0b8a56
}

.danger-text {
  color: #c92f57
}

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

.commission-banner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-bottom: 14px
}

.commission-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0613, #190b2e);
  color: #fff;
  border-radius: 20px;
  padding: 22px
}

.commission-card:after {
  content: "%";
  position: absolute;
  right: -10px;
  bottom: -42px;
  font-family: Montserrat, sans-serif;
  font-size: 10rem;
  font-weight: 900;
  color: rgba(172, 79, 255, .08)
}

.commission-card .big-percent {
  font-family: Montserrat, sans-serif;
  font-size: 3.4rem;
  color: #bd62ff;
  line-height: 1
}

.commission-card h2 {
  font-family: Montserrat, sans-serif;
  margin: 8px 0 7px
}

.commission-card p {
  font-size: .7rem;
  color: #bcaec6;
  max-width: 520px;
  line-height: 1.5
}

.simulator {
  padding: 19px
}

.sim-result {
  border-radius: 13px;
  background: #f7f1fc;
  border: 1px solid #eadcf5;
  padding: 12px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.sim-result span {
  font-size: .65rem;
  color: #766a80
}

.sim-result strong {
  font-family: Montserrat, sans-serif;
  font-size: 1.25rem;
  color: #6e21dd
}

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

.product-card {
  padding: 16px
}

.product-category {
  font-size: .57rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8e8399;
  font-weight: 800
}

.product-card h3 {
  font-family: Montserrat, sans-serif;
  font-size: .9rem;
  margin: 5px 0 6px
}

.product-card p {
  font-size: .64rem;
  color: #7e7487;
  line-height: 1.5;
  min-height: 48px
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0
}

.price-box {
  background: #faf8fc;
  border: 1px solid #eee7f3;
  border-radius: 11px;
  padding: 9px
}

.price-box span {
  font-size: .55rem;
  color: #93899c
}

.price-box strong {
  display: block;
  font-family: Montserrat, sans-serif;
  margin-top: 3px;
  font-size: .85rem
}

.commission-preview {
  padding: 9px 10px;
  border-radius: 10px;
  background: #f4ecfb;
  color: #6620c8;
  font-size: .62rem;
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.commission-preview strong {
  font-family: Montserrat, sans-serif
}

.playbook-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.tab-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: #776c80;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .63rem;
  font-weight: 800
}

.tab-btn.active {
  background: #13091f;
  color: #fff;
  border-color: #13091f
}

.playbook-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px
}

.playbook-card {
  padding: 15px
}

.playbook-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start
}

.playbook-card h3 {
  font-family: Montserrat, sans-serif;
  font-size: .78rem;
  margin: 0
}

.playbook-card p {
  white-space: pre-wrap;
  font-size: .67rem;
  line-height: 1.6;
  color: #6e6477;
  margin: 10px 0 0
}

.copy-btn {
  border: 1px solid #e5ddea;
  background: #f9f6fc;
  color: #6a5c75;
  border-radius: 9px;
  padding: 6px 8px;
  font-size: .58rem;
  font-weight: 800
}

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

.team-card {
  padding: 16px
}

.team-head {
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.team-profile {
  display: flex;
  gap: 10px;
  min-width: 0
}

.team-profile strong {
  display: block;
  font-size: .75rem
}

.team-profile span {
  display: block;
  font-size: .58rem;
  color: #968c9e;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px
}

.team-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 13px
}

.team-metric {
  background: #faf8fc;
  border: 1px solid #efe8f3;
  border-radius: 10px;
  padding: 8px
}

.team-metric span {
  display: block;
  font-size: .53rem;
  color: #968c9e
}

.team-metric strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: .78rem;
  margin-top: 3px
}

.followup-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff6e7;
  color: #a66b0f;
  border: 1px solid #ffe0a9;
  font-size: .57rem;
  font-weight: 800
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 7, 19, .62);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px
}

.modal-backdrop.open {
  display: flex
}

.modal {
  width: min(840px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 90px rgba(19, 8, 33, .33)
}

.modal-sm {
  width: min(560px, 100%)
}

.modal-lg {
  width: min(1050px, 100%)
}

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  z-index: 2
}

.modal-head h2 {
  font-family: Montserrat, sans-serif;
  font-size: 1.05rem;
  margin: 3px 0 0
}

.modal-head span {
  font-size: .58rem;
  color: #988ea1;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800
}

.modal-body {
  padding: 20px
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.info-card {
  border: 1px solid var(--line);
  background: #fbfafd;
  border-radius: 13px;
  padding: 11px
}

.info-card span {
  font-size: .55rem;
  color: #95899e
}

.info-card strong {
  display: block;
  font-size: .7rem;
  margin-top: 3px
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px
}

.lead-workspace {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 14px
}

.lead-timeline {
  display: grid;
  gap: 7px;
  max-height: 330px;
  overflow: auto
}

.lead-timeline-row {
  border-left: 2px solid #dfcdf0;
  padding: 7px 0 7px 11px
}

.lead-timeline-row strong {
  display: block;
  font-size: .65rem
}

.lead-timeline-row span {
  font-size: .58rem;
  color: #9a90a2
}

.lead-timeline-row p {
  font-size: .62rem;
  color: #6f6678;
  margin: 3px 0 0;
  line-height: 1.4
}

.quick-message {
  border: 1px solid #e9e0ef;
  background: #fbf7fe;
  border-radius: 12px;
  padding: 11px
}

.quick-message strong {
  display: block;
  font-size: .65rem
}

.quick-message p {
  white-space: pre-wrap;
  font-size: .62rem;
  line-height: 1.5;
  color: #6c6175;
  margin: 6px 0 0
}

.toast-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  display: grid;
  gap: 8px
}

.toast {
  width: min(370px, calc(100vw - 36px));
  background: #10091b;
  color: #fff;
  border-radius: 13px;
  padding: 12px 13px;
  display: flex;
  gap: 9px;
  box-shadow: 0 20px 55px rgba(22, 9, 37, .28);
  font-size: .7rem;
  line-height: 1.45;
  animation: toastIn .18s ease
}

.toast.success i {
  color: #51dda1
}

.toast.error i {
  color: #ff6f96
}

.toast.info i {
  color: #c66cff
}

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

.skeleton {
  position: relative;
  overflow: hidden;
  background: #eeeaf2;
  border-radius: 9px
}

.skeleton:after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: shimmer 1.15s infinite
}

@keyframes shimmer {
  to {
    transform: translateX(100%)
  }
}

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

  .company-grid,
  .product-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .col-3 {
    grid-column: span 4
  }

  .col-4 {
    grid-column: span 6
  }

  .commission-banner {
    grid-template-columns: 1fr
  }
}

@media(max-width:980px) {
  .app-shell {
    grid-template-columns: 1fr
  }

  .main-content {
    grid-column: 1
  }

  .sidebar {
    transform: translateX(-105%);
    transition: .2s;
    box-shadow: 25px 0 80px rgba(15, 5, 25, .3)
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(10, 6, 16, .5);
    backdrop-filter: blur(2px)
  }

  .sidebar-backdrop.open {
    display: block
  }

  .mobile-menu-btn {
    display: grid
  }

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

  .auth-brand-panel {
    display: none
  }

  .auth-credential-logo {
    margin-bottom: 15px
  }

  .auth-credential-logo img {
    width: 88px;
    height: 88px
  }

  .auth-form-panel {
    min-height: 100vh
  }

  .lead-workspace {
    grid-template-columns: 1fr
  }

  .col-2,
  .col-3 {
    grid-column: span 6
  }
}

@media(max-width:700px) {
  .page-container {
    padding: 16px 12px 30px
  }

  .topbar {
    padding: 9px 12px
  }

  .topbar p,
  .hide-sm {
    display: none !important
  }

  .topbar h1 {
    font-size: 1.05rem
  }

  .stats-grid,
  .company-grid,
  .product-grid,
  .team-grid,
  .playbook-grid {
    grid-template-columns: 1fr
  }

  .dashboard-hero {
    padding: 20px
  }

  .dashboard-hero-content {
    display: block
  }

  .hero-commission {
    text-align: left;
    margin-top: 18px
  }

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

  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-12 {
    grid-column: 1
  }

  .filter-panel {
    padding: 14px
  }

  .modal-backdrop {
    padding: 8px
  }

  .modal {
    border-radius: 16px
  }

  .modal-body {
    padding: 15px
  }

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

  .auth-form-panel {
    padding: 24px 18px
  }

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

  .results-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  .company-card h3 {
    min-height: auto
  }

  .sidebar {
    width: 276px
  }
}


/* ===== InnovaLeads v2.2 • UX / Perfil / Contratos ===== */
.sidebar-brand {
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.sidebar-brand-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.sidebar-brand-copy {
  min-width: 0
}

.sidebar-toggle-btn {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: #aa9ab9;
  display: grid;
  place-items: center;
  font-size: .65rem;
  transition: .18s
}

.sidebar-toggle-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09)
}

.app-shell,
.sidebar,
.main-content {
  transition: grid-template-columns .22s ease, width .22s ease
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 82px 1fr
}

.sidebar.collapsed {
  width: 82px;
  padding-left: 10px;
  padding-right: 10px
}

.sidebar.collapsed .sidebar-brand {
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  flex-direction: column;
  gap: 6px
}

.sidebar.collapsed .sidebar-brand-main {
  justify-content: center
}

.sidebar.collapsed .sidebar-brand img {
  width: 54px;
  height: 40px
}

.sidebar.collapsed .sidebar-brand-copy,
.sidebar.collapsed .nav-link>span:not(.nav-count),
.sidebar.collapsed .nav-count,
.sidebar.collapsed .sidebar-user-copy {
  display: none
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 10px;
  gap: 0
}

.sidebar.collapsed .nav-link i {
  width: auto;
  font-size: .92rem
}

.sidebar.collapsed .nav-separator {
  margin-left: 8px;
  margin-right: 8px
}

.sidebar.collapsed .sidebar-user {
  left: 10px;
  right: 10px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 8px 5px;
  gap: 7px
}

.sidebar.collapsed .sidebar-user .icon-btn {
  width: 34px;
  height: 34px
}

.sidebar.collapsed .avatar {
  width: 34px;
  height: 34px
}

.sidebar.collapsed .sidebar-toggle-btn {
  transform: none
}

.search-help-card {
  display: flex;
  align-items: flex-end
}

.search-help-card>div {
  width: 100%;
  min-height: 52px;
  border: 1px dashed #ddd2e5;
  border-radius: 12px;
  background: #fbf9fd;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #766a80;
  font-size: .61rem;
  line-height: 1.45
}

.search-help-card i {
  color: #8b3ff0;
  margin-top: 2px
}

.prospect-rule-card {
  min-height: 46px;
  border: 1px solid #e5ddec;
  background: linear-gradient(180deg, #fdfbff, #f8f4fc);
  border-radius: 13px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5b5065
}

.prospect-rule-card>i {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #f0e5fd;
  color: #7c2cff;
  font-size: .72rem
}

.prospect-rule-card strong {
  display: block;
  font-size: .68rem;
  color: #514659
}

.prospect-rule-card small {
  display: block;
  margin-top: 2px;
  font-size: .55rem;
  color: #978c9f
}

.sidebar.collapsed .nav-link[title] {
  position: relative
}

.sidebar.collapsed .nav-link[title]:hover {
  overflow: visible
}

.field-wrap span small {
  font-weight: 500;
  color: #aaa0b1;
  font-size: .55rem;
  margin-left: 3px
}

.product-card-header,
.product-actions,
.playbook-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.product-actions,
.playbook-actions {
  justify-content: flex-start;
  flex-wrap: wrap
}

.product-actions .btn,
.playbook-actions .btn {
  flex: 1
}

.btn-icon-only {
  flex: 0 0 42px !important;
  padding-left: 10px;
  padding-right: 10px
}

.price-box-purple {
  background: #f7f0fe;
  border-color: #ead9fa
}

.price-box-purple strong {
  color: #7626dc
}

.product-view-hero {
  padding: 16px;
  border-radius: 15px;
  background: linear-gradient(135deg, #faf7fd, #f4ecfb);
  border: 1px solid #eadff2
}

.product-view-hero p {
  margin: 8px 0 0;
  font-size: .7rem;
  line-height: 1.6;
  color: #6e6377
}

.info-card.emphasis {
  background: #f5edfc;
  border-color: #dfc8f5
}

.info-card.emphasis strong {
  color: #7022d4;
  font-size: .9rem
}

.commercial-rule-box {
  display: flex;
  gap: 11px;
  padding: 14px;
  border-radius: 14px;
  background: #13091f;
  color: #fff
}

.commercial-rule-box>i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #7b2de2;
  display: grid;
  place-items: center
}

.commercial-rule-box strong {
  display: block;
  font-size: .7rem
}

.commercial-rule-box p {
  margin: 4px 0 0;
  color: #c7b8d3;
  font-size: .62rem;
  line-height: 1.55
}

.commission-preview-large {
  padding: 13px 14px;
  font-size: .7rem
}

.content-text {
  font-size: .68rem;
  line-height: 1.65;
  color: #6c6275;
  white-space: pre-wrap
}

.playbook-preview {
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 88px
}

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

.playbook-full-content {
  white-space: pre-wrap;
  border: 1px solid #e9e0ef;
  background: #fcf9fe;
  border-radius: 15px;
  padding: 17px;
  font-size: .72rem;
  line-height: 1.75;
  color: #554b5e
}

.modal-xl {
  width: min(1160px, 100%)
}

.profile-hero {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, #fff, #fbf7fe)
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0
}

.profile-identity h2 {
  font-family: Montserrat, sans-serif;
  margin: 7px 0 3px;
  font-size: 1.25rem
}

.profile-identity p {
  font-size: .67rem;
  color: #8c8195;
  margin: 0
}

.profile-avatar {
  width: 76px !important;
  height: 76px !important;
  font-size: 1.2rem !important;
  flex: 0 0 76px
}

.avatar-purple {
  background: linear-gradient(135deg, #6f1ed0, #b65cff) !important;
  color: #fff !important
}

.avatar-blue {
  background: linear-gradient(135deg, #1e5ed0, #55a7ff) !important;
  color: #fff !important
}

.avatar-emerald {
  background: linear-gradient(135deg, #087a56, #31cf91) !important;
  color: #fff !important
}

.avatar-orange {
  background: linear-gradient(135deg, #c44d11, #ff9b4c) !important;
  color: #fff !important
}

.profile-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.profile-layout {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px
}

.profile-main-stack,
.profile-side-stack,
.contract-main-stack {
  display: grid;
  gap: 14px;
  align-content: start
}

.locked-data-grid,
.contract-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px
}

.locked-data-grid>div,
.contract-info-grid>div {
  border: 1px solid #ece5f1;
  background: #fbfafd;
  border-radius: 12px;
  padding: 11px
}

.locked-data-grid span,
.contract-info-grid span {
  display: block;
  font-size: .55rem;
  color: #988da1
}

.locked-data-grid strong,
.contract-info-grid strong {
  display: block;
  margin-top: 4px;
  font-size: .69rem
}

.goal-spotlight {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 13px 0
}

.goal-spotlight strong {
  font-family: Montserrat, sans-serif;
  font-size: 2rem;
  color: #7626db
}

.goal-spotlight span {
  font-size: .67rem;
  color: #84798c
}

.contract-hero {
  padding: 23px;
  background: radial-gradient(circle at 80% 0, rgba(164, 75, 255, .15), transparent 20rem), linear-gradient(135deg, #11091b, #211031);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.contract-hero h2 {
  font-family: Montserrat, sans-serif;
  margin: 8px 0 7px;
  font-size: 1.25rem
}

.contract-hero p {
  margin: 0;
  color: #baadc4;
  font-size: .69rem;
  line-height: 1.5
}

.contract-status-block {
  text-align: right;
  min-width: 130px
}

.contract-status-block span {
  display: block;
  color: #9f8dab;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .08em
}

.contract-status-block strong {
  display: block;
  color: #c875ff;
  font-family: Montserrat, sans-serif;
  font-size: 1.25rem;
  margin-top: 3px
}

.contract-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: start
}

.contract-file-card,
.contract-existing-file {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #eadff0;
  background: #fcf9fe;
  border-radius: 14px;
  padding: 13px
}

.contract-file-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff0f3;
  color: #d52f57;
  display: grid;
  place-items: center;
  font-size: 1.15rem
}

.contract-file-copy,
.contract-existing-file>div {
  min-width: 0;
  flex: 1
}

.contract-file-copy strong,
.contract-existing-file strong {
  display: block;
  font-size: .7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.contract-file-copy span,
.contract-existing-file span {
  display: block;
  font-size: .57rem;
  color: #9b90a4;
  margin-top: 3px
}

.contract-file-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.contract-payment-card {
  position: sticky;
  top: 92px
}

.contract-preview-wrap {
  height: min(72vh, 760px);
  background: #eee;
  border-bottom: 1px solid var(--line)
}

.contract-preview-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0
}

.modal-actions-padded {
  padding: 0 18px 18px
}

.employee-form-section {
  border: 1px solid #ece4f1;
  border-radius: 16px;
  padding: 15px;
  background: #fdfcff
}

.employee-form-section+.employee-form-section {
  margin-top: 13px
}

.employee-section-title {
  display: flex;
  align-items: center;
  gap: 10px
}

.employee-section-title>i {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #f2e8fb;
  color: #7426d9;
  display: grid;
  place-items: center
}

.employee-section-title strong {
  display: block;
  font-size: .72rem
}

.employee-section-title span {
  display: block;
  font-size: .57rem;
  color: #988da0;
  margin-top: 2px
}

.upload-drop {
  position: relative;
  border: 1.5px dashed #d6c6e3;
  border-radius: 14px;
  min-height: 82px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fbf8fd;
  cursor: pointer
}

.upload-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer
}

.upload-drop>i {
  font-size: 1.35rem;
  color: #7a2ddd
}

.upload-drop strong {
  display: block;
  font-size: .7rem
}

.upload-drop span {
  display: block;
  font-size: .58rem;
  color: #988da1;
  margin-top: 2px
}

.team-progress .progress-top {
  font-size: .56rem
}

.team-footer-info {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #f0eaf3;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  color: #93889b;
  font-size: .55rem
}

.team-footer-info i {
  color: #7f37df;
  margin-right: 3px
}

@media(max-width:980px) {
  .sidebar-toggle-btn {
    display: none
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr
  }

  .sidebar.collapsed {
    width: 276px
  }

  .sidebar.collapsed .sidebar-brand {
    flex-direction: row;
    justify-content: space-between
  }

  .sidebar.collapsed .sidebar-brand img {
    width: 76px;
    height: 52px
  }

  .sidebar.collapsed .sidebar-brand-copy,
  .sidebar.collapsed .nav-link>span:not(.nav-count),
  .sidebar.collapsed .nav-count,
  .sidebar.collapsed .sidebar-user-copy {
    display: block
  }

  .sidebar.collapsed .nav-link {
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 11px
  }

  .sidebar.collapsed .nav-link i {
    width: 18px;
    font-size: inherit
  }

  .sidebar.collapsed .sidebar-user {
    left: 14px;
    right: 14px;
    grid-template-columns: auto 1fr auto;
    justify-items: stretch;
    padding: 10px
  }

  .sidebar.collapsed .sidebar-user .icon-btn {
    width: 36px;
    height: 36px
  }

  .profile-layout,
  .contract-layout {
    grid-template-columns: 1fr
  }

  .contract-payment-card {
    position: static
  }
}

@media(max-width:700px) {

  .profile-hero,
  .contract-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px
  }

  .profile-identity {
    align-items: flex-start
  }

  .profile-avatar {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px
  }

  .profile-identity h2,
  .contract-hero h2 {
    font-size: 1rem
  }

  .profile-hero-actions {
    width: 100%
  }

  .profile-hero-actions .btn {
    flex: 1
  }

  .locked-data-grid,
  .contract-info-grid {
    grid-template-columns: 1fr
  }

  .contract-status-block {
    text-align: left
  }

  .contract-file-card {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .contract-file-actions {
    width: 100%
  }

  .contract-file-actions .btn {
    flex: 1
  }

  .employee-form-section {
    padding: 12px
  }

  .modal-xl {
    width: 100%
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0
  }

  .modal {
    max-height: 96vh;
    border-radius: 18px 18px 0 0
  }

  .contract-preview-wrap {
    height: 68vh
  }

  .search-help-card {
    grid-column: 1 !important
  }

  .data-table {
    min-width: 760px
  }

  .topbar-actions .profile-chip {
    padding-right: 5px
  }
}