:root {
  color-scheme: dark;
  --bg: #000;
  --panel: #030303;
  --panel-2: #050505;
  --stroke: #111317;
  --stroke-strong: #191b21;
  --text: #f6f8ff;
  --muted: #93a0af;
  --muted-2: #647181;
  --blue: #2f8cff;
  --blue-soft: #89d5ff;
  --purple: #925cff;
  --green: #00ee7a;
  --teal: #20c7b0;
  --orange: #ff9700;
  --yellow: #ffc400;
  --red: #ff1d24;
  --radius: 8px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .38);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.auth-screen {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 430px);
  align-items: center;
  justify-content: center;
  gap: 78px;
  min-height: 100vh;
  padding: 32px;
  background:
    radial-gradient(circle at 25% 20%, rgba(47, 140, 255, .12), transparent 32%),
    radial-gradient(circle at 76% 80%, rgba(0, 238, 122, .08), transparent 30%),
    #000;
}

.auth-brand h1 {
  margin: 0;
  font-size: 52px;
  line-height: .95;
  font-weight: 800;
}

.auth-brand p {
  margin: 16px 0 0;
  color: #a9aeb7;
  font-size: 17px;
  font-weight: 400;
}

.auth-card {
  width: 100%;
  padding: 26px;
  border: 1px solid var(--stroke-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, #050505, #010101);
  box-shadow: var(--shadow);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: #030303;
}

.auth-tabs button {
  height: 44px;
  border-radius: 12px;
  background: transparent;
  color: #92a1ae;
  font-size: 15px;
  font-weight: 700;
}

.auth-tabs button.active {
  color: #fff;
  background: #202020;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: #7f8b9c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.auth-form input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--stroke-strong);
  border-radius: 14px;
  outline: none;
  padding: 0 14px;
  background: #030303;
  color: #fff;
  font: inherit;
  letter-spacing: 0;
}

.auth-form input:focus {
  border-color: #2f8cff;
  box-shadow: 0 0 0 3px rgba(47, 140, 255, .12);
}

.auth-submit {
  height: 54px;
  margin-top: 4px;
  border-radius: 16px;
  background: #fff;
  color: #050505;
  font-size: 16px;
  font-weight: 800;
}

.auth-message {
  min-height: 18px;
  margin: 14px 2px 0;
  color: #ff565d;
  font-size: 14px;
  font-weight: 700;
}

.auth-message.success {
  color: var(--green);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
}

.operation-modal {
  position: relative;
  width: min(560px, 100%);
  padding: 38px 40px;
  border: 1px solid #15171d;
  border-top: 3px solid #2f62ff;
  border-radius: 8px;
  background: #020202;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .65);
}

.operation-modal::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 150px;
  right: 0;
  height: 3px;
  border-top-right-radius: 8px;
  background: linear-gradient(90deg, #6e40ff, #9f46ff);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #85858d;
  background: transparent;
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.operation-modal h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
}

.operation-modal p {
  margin: 14px 0 0;
  color: #8f8f96;
  font-size: 15px;
  font-weight: 400;
}

.operation-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 18px;
  margin-top: 48px;
}

.operation-form label {
  display: grid;
  gap: 8px;
  color: #858690;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.operation-form .full-field {
  grid-column: 1 / -1;
}

.operation-form input {
  width: 100%;
  height: 58px;
  border: 1px solid #24262c;
  border-radius: 18px;
  outline: none;
  padding: 0 14px;
  background: #101010;
  color: #fff;
  font: inherit;
}

.operation-form input:focus {
  border-color: #2f8cff;
  box-shadow: 0 0 0 3px rgba(47, 140, 255, .12);
}

.save-operation {
  grid-column: 1 / -1;
  height: 64px;
  margin-top: 12px;
  border-radius: 18px;
  background: #fff;
  color: #050505;
  font-size: 17px;
  font-weight: 800;
}

.confirm-modal {
  width: min(430px, 100%);
  padding: 32px;
  border: 1px solid #1d2027;
  border-radius: 14px;
  background: #050505;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .68);
  text-align: center;
}

.confirm-modal h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
}

.confirm-modal p {
  margin: 14px 0 0;
  color: #a3a8b2;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.refund-modal {
  width: min(460px, 100%);
}

.refund-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 26px;
}

.refund-options button {
  height: 48px;
  border: 1px solid #24262c;
  border-radius: 14px;
  background: #101010;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.refund-options button[data-refund-status="pendente"] {
  color: var(--yellow);
}

.refund-options button[data-refund-status="reembolsado"] {
  color: var(--green);
}

.refund-options button[data-refund-status="cancelado"] {
  color: #ff464d;
}

.refund-cancel {
  width: 100%;
  margin-top: 12px;
}

.cancel-delete,
.confirm-delete {
  height: 50px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
}

.cancel-delete {
  border: 1px solid #232730;
  background: #101010;
  color: #fff;
}

.confirm-delete {
  background: #ff464d;
  color: #fff;
}

.shell {
  width: min(1740px, calc(100vw - 64px));
  margin: 0 auto;
  padding: 24px 0 36px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: start;
  gap: 18px;
}

.brand h1 {
  margin: 0;
  font-size: 30px;
  line-height: .95;
  font-weight: 800;
  letter-spacing: 0;
}

.brand p {
  margin: 8px 0 0;
  color: #a9aeb7;
  font-size: 14px;
  font-weight: 400;
}

.account-strip,
.actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 14px;
}

.actions {
  justify-content: end;
}

.profile-pill,
.goal-pill,
.outline-btn,
.icon-text,
.new-btn,
.icon-btn {
  min-height: 50px;
  border: 1px solid var(--stroke-strong);
  background: #030303;
  border-radius: 17px;
}

.profile-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 154px;
  padding: 6px 14px 6px 8px;
}

.avatar,
.rank-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 18%, #3b3038, #07070b 62%);
  border: 1px solid #1d2026;
  color: #fff;
  font-weight: 900;
  text-transform: lowercase;
  background-size: cover;
  background-position: center;
}

.avatar-upload {
  padding: 0;
  cursor: pointer;
}

.avatar-upload:hover {
  border-color: #2f8cff;
}

.avatar.has-photo span,
.rank-avatar.has-photo {
  color: transparent;
  text-shadow: none;
}

.profile-pill strong {
  display: block;
  max-width: 86px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-pill span {
  display: block;
  margin-top: 7px;
  max-width: 86px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-pill {
  width: 278px;
  padding: 10px 12px 9px;
}

.goal-pill strong,
.goal-pill span,
.goal-pill em {
  font-size: 13px;
  line-height: 1;
}

.goal-pill strong {
  color: #fff;
}

.goal-pill span {
  color: #8d8f97;
}

.goal-pill em {
  float: right;
  color: var(--red);
  font-style: normal;
}

.progress {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #151515;
}

.progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff1919, #ff3f45);
  border-radius: inherit;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 50px;
  color: #8f96a1;
  background: transparent;
  border-color: transparent;
}

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

.outline-btn,
.icon-text,
.new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.outline-btn {
  min-width: 184px;
  padding: 0 18px;
}

.icon-text {
  min-width: 112px;
  padding: 0 17px;
}

.new-btn {
  min-width: 114px;
  color: #050505;
  background: #fff;
  border-color: #fff;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 800;
}

.outline-btn svg,
.icon-text svg,
.new-btn svg {
  width: 16px;
  height: 16px;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.period-tabs,
.date-range {
  display: flex;
  align-items: center;
  height: 50px;
  border: 1px solid var(--stroke);
  background: #030303;
  border-radius: 18px;
}

.period-tabs {
  width: 485px;
  padding: 6px;
  gap: 8px;
}

.period-tabs button {
  flex: 1;
  height: 38px;
  border-radius: 14px;
  background: transparent;
  color: #92a1ae;
  font-size: 14px;
  font-weight: 700;
}

.period-tabs .active {
  color: #fff;
  background: #202020;
}

.date-range {
  width: 308px;
  justify-content: space-between;
  padding: 0 18px;
}

.date-range span {
  flex: 1;
  color: #fff;
  font-size: 14px;
}

.date-range span + span {
  text-align: right;
  border-left: 1px solid var(--stroke-strong);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.kpi-card,
.panel {
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #030303, #010101);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.kpi-card {
  position: relative;
  min-height: 124px;
  padding: 24px 20px 18px;
  overflow: hidden;
}

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

.kpi-head span {
  color: #7f8b9c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.kpi-card strong {
  display: block;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0;
}

.kpi-card.blue strong {
  color: var(--blue);
}

.kpi-card.purple strong {
  color: var(--purple);
}

.kpi-card strong[data-kpi="sold"] {
  color: var(--green);
}

.kpi-card strong[data-kpi="expenses"] {
  color: #ff464d;
}

.kpi-card.green strong,
.kpi-card.green small {
  color: var(--green);
}

.kpi-card.profit.negative strong,
.kpi-card.profit.negative small {
  color: #ff464d;
}

.profit .shine {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d86e;
  box-shadow: 0 0 20px #00d86e;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(320px, .9fr);
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}

.panel {
  padding: 24px 22px;
}

.panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

.panel h2 svg {
  width: 19px;
  height: 19px;
}

.ranking-panel h2 svg {
  color: var(--yellow);
}

.history-panel h2 svg {
  color: var(--purple);
}

.ranking-panel {
  grid-column: 2;
  grid-row: 1;
  min-height: 360px;
}

.empty-state {
  margin: 30px 0 0;
  color: #5f6b79;
  font-size: 15px;
  font-weight: 600;
}

.ranking-list {
  display: grid;
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ranking-list li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(90px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.rank-avatar {
  width: 44px;
  height: 44px;
  font-size: 13px;
}

.photo.a1 { background: radial-gradient(circle at 45% 25%, #bd8762 0 18%, #201512 19% 52%, #060606 53%); }
.photo.a2 { background: radial-gradient(circle at 52% 18%, #2b2533, #07070c 62%); }
.photo.a3 { background: radial-gradient(circle at 53% 20%, #efe7e2 0 12%, #191a20 13% 58%, #050505 59%); }
.photo.a4 { background: conic-gradient(from 20deg, #00c2ff, #ffee00, #ff4848, #4af070, #00c2ff); }
.photo.a5 { background: radial-gradient(circle, #f0f0f0 0 28%, #252525 29% 58%, #050505 59%); color: #111; }
.photo.a6 { background: radial-gradient(circle at 45% 18%, #5f6069, #111 58%); }

.rank-avatar.muted::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #8b8b8b;
  border-radius: 50%;
  box-shadow: 0 13px 0 -4px #0f0f0f, 0 13px 0 -2px #8b8b8b;
}

.ranking-list b {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.ranking-list strong {
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.ranking-list strong.positive {
  color: var(--green);
}

.ranking-list strong.negative {
  color: #ff464d;
}

.ranking-list em {
  position: absolute;
  top: -4px;
  left: 34px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #000;
  background: var(--yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.history-panel {
  grid-column: 1 / 2;
  min-height: 245px;
  margin-top: 0;
  padding-bottom: 0;
}

.table-scroll {
  position: relative;
  margin: 28px -24px 0;
  overflow: auto;
  border-top: 1px solid var(--stroke);
}

.table-empty {
  margin: 22px 24px 26px;
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

th,
td {
  padding: 15px 22px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: #7890aa;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

td {
  border-top: 1px solid #0c0d10;
  color: #dce4f2;
  font-size: 14px;
}

td:nth-child(4) {
  color: var(--blue);
  font-weight: 800;
}

td:nth-child(5) {
  color: var(--green);
  font-weight: 800;
}

td:nth-child(6) {
  color: #ff464d;
  font-weight: 800;
}

td:nth-child(7) {
  color: var(--green);
  font-weight: 800;
}

td:nth-child(8) {
  color: var(--green);
  font-weight: 800;
}

.operation-name {
  max-width: 220px;
  overflow: hidden;
  color: #dce4f2;
  font-weight: 700;
  text-overflow: ellipsis;
}

.refund-badge {
  display: inline-grid;
  place-items: center;
  min-width: 92px;
  height: 28px;
  border: 1px solid #24262c;
  border-radius: 999px;
  color: #a3a8b2;
  background: #0c0c0c;
  font-size: 12px;
  font-weight: 800;
}

.refund-badge.reembolsado {
  border-color: rgba(0, 238, 122, .35);
  color: var(--green);
}

.refund-badge.pendente {
  border-color: rgba(255, 196, 0, .32);
  color: var(--yellow);
}

.refund-badge.cancelado {
  border-color: rgba(255, 70, 77, .32);
  color: #ff464d;
}

.refund-value {
  color: var(--green);
  font-weight: 800;
}

td.positive {
  color: var(--green);
}

td.negative {
  color: #ff464d;
}

th:last-child,
td:last-child {
  text-align: right;
}

.operation-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.table-action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #20242b;
  border-radius: 10px;
  background: #080808;
}

.table-action svg {
  width: 16px;
  height: 16px;
}

.table-action.edit {
  color: #89d5ff;
}

.table-action.refund {
  color: var(--yellow);
}

.table-action.refund span {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.table-action.delete {
  color: #ff464d;
}

.table-action:hover {
  border-color: #3a414b;
  background: #101010;
}

@media (max-width: 1450px) {
  .shell {
    width: min(1220px, calc(100vw - 40px));
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .account-strip,
  .actions {
    justify-content: end;
    flex-wrap: wrap;
  }

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

@media (max-width: 980px) {
  .auth-screen {
    grid-template-columns: 1fr;
    gap: 30px;
    align-content: center;
  }

  .auth-brand h1 {
    font-size: 40px;
  }

  .shell {
    width: min(100% - 28px, 760px);
    padding-top: 22px;
  }

  .controls {
    align-items: stretch;
    flex-direction: column;
  }

  .period-tabs,
  .date-range {
    width: 100%;
  }

  .period-tabs {
    overflow-x: auto;
  }

  .period-tabs button {
    min-width: 76px;
  }

  .kpi-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .history-panel {
    grid-column: auto;
    margin-top: 0;
  }

  .ranking-panel {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .brand h1 {
    font-size: 30px;
  }

  .profile-pill,
  .goal-pill,
  .outline-btn,
  .icon-text,
  .new-btn {
    width: 100%;
  }

  .account-strip,
  .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .icon-btn {
    display: none;
  }

  .kpi-card strong {
    font-size: 28px;
  }

  .panel {
    padding: 22px 18px;
  }

  .operation-modal {
    padding: 34px 24px;
  }

  .operation-form {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .table-scroll {
    margin-inline: -18px;
  }

  .ranking-list {
    padding: 0;
    gap: 22px;
  }

  .ranking-list li {
    grid-template-columns: 44px minmax(64px, 1fr) auto;
    gap: 10px;
  }

  .rank-avatar {
    width: 44px;
    height: 44px;
  }

  .ranking-list strong {
    font-size: 13px;
  }
}

:root {
  --bg: #000000;
  --panel: rgba(9, 9, 11, 0.92);
  --panel-soft: rgba(14, 14, 17, 0.78);
  --panel-hover: rgba(18, 18, 22, 0.92);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.14);
  --text: #f7f7f8;
  --muted: #9ca3af;
  --muted-strong: #c7cbd1;
  --blue: #3b8cff;
  --purple: #8b5cf6;
  --green: #00e887;
  --red: #ff4655;
  --orange: #ff9f0a;
  --yellow: #f4c20d;
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 45px rgba(0, 0, 0, 0.34);
}

* {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

body {
  color: var(--text);
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.45;
  background:
    radial-gradient(circle at 50% -14%, rgba(90, 90, 100, 0.18) 0, rgba(18, 18, 22, 0.08) 28%, transparent 56%),
    radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.08) 0, transparent 26%),
    #000000;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.shell {
  padding-top: 24px;
}

.brand h1,
.auth-brand h1 {
  color: #ffffff;
  font-weight: 760;
  letter-spacing: 0;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.08);
}

.brand p,
.auth-brand p,
.modal-subtitle,
.empty-state {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
}

.profile-pill,
.goal-pill,
.header-icon,
.ghost-btn,
.new-btn,
.period-tabs,
.date-range,
.kpi-card,
.chart-card,
.ranking-card,
.history-card,
.modal-card,
.confirm-card,
.auth-card,
.table-action,
.avatar-control {
  border-color: var(--stroke);
  box-shadow: var(--shadow-card);
}

.profile-pill,
.goal-pill,
.header-icon,
.ghost-btn,
.period-tabs,
.date-range,
.kpi-card,
.chart-card,
.ranking-card,
.history-card,
.modal-card,
.confirm-card,
.auth-card,
.table-action,
.avatar-control,
.auth-input,
.operation-form input {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(6, 6, 7, 0.9);
  backdrop-filter: blur(14px);
}

.profile-pill {
  width: 166px;
  height: 54px;
  padding: 7px 12px 7px 8px;
  border-radius: 18px;
}

.avatar,
.rank-avatar {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.45);
}

.avatar-fallback {
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(145deg, #17171b, #070708);
  color: #ffffff;
}

.profile-name,
.ranking-list strong,
.user-badge span,
.auth-tabs button,
.new-btn,
.ghost-btn,
.modal-card h2,
.confirm-card h2,
.table-action,
.operation-form button,
.confirm-actions button {
  letter-spacing: 0;
}

.profile-name {
  max-width: 98px;
  color: #ffffff;
  font-weight: 740;
}

.profile-tier {
  color: #a8b3c4;
  font-size: 10px;
  font-weight: 700;
}

.goal-pill {
  width: 286px;
  height: 40px;
  border-radius: 999px;
  padding: 7px 12px;
}

.goal-copy {
  color: #ffffff;
  font-weight: 760;
}

.goal-rest {
  color: #a4aab4;
  font-weight: 560;
}

.goal-percent {
  color: var(--red);
  font-weight: 780;
}

.goal-track {
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.goal-fill {
  background: linear-gradient(90deg, #ff2d3d, #ff5a63);
  box-shadow: 0 0 18px rgba(255, 70, 85, 0.38);
}

.header-icon,
.ghost-btn,
.table-action,
.avatar-control {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.header-icon:hover,
.ghost-btn:hover,
.table-action:hover,
.avatar-control:hover {
  transform: translateY(-1px);
  border-color: var(--stroke-strong);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.new-btn {
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 17px;
  color: #030303;
  background: linear-gradient(180deg, #ffffff, #e7e7e9);
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.new-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 45px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.38);
}

.period-tabs {
  height: 52px;
  padding: 6px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(3, 3, 4, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 36px rgba(0, 0, 0, 0.32);
}

.period-tabs button {
  color: #9fb2c8;
  border-radius: 13px;
  font-weight: 720;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.period-tabs button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
}

.period-tabs button.active {
  color: #050505;
  background: linear-gradient(180deg, #f6f6f7, #d9d9dc);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.12);
}

.date-range {
  height: 50px;
  border-radius: 18px;
  color: #ffffff;
}

.date-range input {
  color: #ffffff;
  font-weight: 700;
}

.date-range span {
  background: rgba(255, 255, 255, 0.08);
}

.kpi-grid {
  gap: 16px;
}

.kpi-card {
  min-height: 124px;
  border-radius: 20px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.kpi-card::before,
.chart-card::before,
.ranking-card::before,
.history-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.075), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.025));
  opacity: 0.58;
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.17);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 11, 0.96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 58px rgba(0, 0, 0, 0.48);
}

.kpi-card::after {
  background: var(--green);
  box-shadow: 0 0 18px rgba(0, 232, 135, 0.5);
}

.kpi-card span,
.panel-title,
th,
.operation-form label,
.confirm-card p,
.ranking-list small {
  color: #93a4b8;
  letter-spacing: 0;
  font-weight: 690;
}

.kpi-card strong {
  margin-top: 14px;
  font-size: clamp(26px, 1.7vw, 31px);
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 0 22px color-mix(in srgb, currentColor 20%, transparent);
}

.kpi-card.investment strong {
  color: var(--blue);
}

.kpi-card.sold strong,
.kpi-card.refund strong,
.kpi-card.profit.positive strong {
  color: var(--green);
}

.kpi-card.expenses strong,
.kpi-card.profit.negative strong {
  color: var(--red);
}

.dashboard-grid {
  gap: 30px;
}

.chart-card,
.ranking-card,
.history-card {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.chart-card,
.ranking-card {
  min-height: 360px;
  padding: 25px 26px;
}

.history-card {
  padding-top: 24px;
}

.panel-title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 780;
}

.panel-title .blue {
  color: var(--blue);
}

.panel-title .purple {
  color: var(--purple);
}

.panel-title .gold {
  color: var(--yellow);
}

.chart-grid {
  stroke: rgba(255, 255, 255, 0.06);
}

.chart-axis text {
  fill: rgba(255, 255, 255, 0.74);
  font-weight: 650;
}

.chart-line.income {
  stroke: var(--green);
}

.chart-line.expense {
  stroke: var(--blue);
}

.ranking-list li {
  border-radius: 14px;
  padding: 9px 0;
  background: transparent;
  border: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.ranking-list li:hover {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.055);
  transform: translateX(1px);
}

.ranking-list li.current {
  background: transparent;
  border-color: transparent;
}

.rank-place {
  background: linear-gradient(180deg, #ffd84d, #eab308);
  color: #050505;
  box-shadow: 0 0 18px rgba(244, 194, 13, 0.28);
}

.rank-value,
.positive {
  color: var(--green);
}

.negative {
  color: var(--red);
}

.history-table th {
  background: rgba(255, 255, 255, 0.012);
  color: #8eb9eb;
  font-size: 12px;
  font-weight: 760;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.history-table td {
  color: #ffffff;
  font-weight: 690;
}

.history-table tr {
  transition: background 170ms ease;
}

.history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.026);
}

.history-table th,
.history-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.history-table td.investment-value {
  color: var(--blue);
}

.history-table td.sold-value,
.history-table td.refund-value {
  color: var(--green);
}

.history-table td.expense-value {
  color: var(--red);
}

.status-pill {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
}

.status-pill.reembolsado {
  color: var(--green);
  border-color: rgba(0, 232, 135, 0.42);
  background: rgba(0, 232, 135, 0.1);
}

.status-pill.cancelado {
  color: var(--red);
  border-color: rgba(255, 70, 85, 0.38);
  background: rgba(255, 70, 85, 0.1);
}

.status-pill.pendente {
  color: var(--yellow);
  border-color: rgba(244, 194, 13, 0.34);
  background: rgba(244, 194, 13, 0.1);
}

.table-action {
  border-radius: 11px;
  background: rgba(8, 8, 10, 0.92);
}

.table-action.edit {
  color: #75caff;
  border-color: rgba(117, 202, 255, 0.17);
}

.table-action.refund {
  color: var(--yellow);
  border-color: rgba(244, 194, 13, 0.18);
}

.table-action.delete {
  color: var(--red);
  border-color: rgba(255, 70, 85, 0.18);
}

.auth-card,
.modal-card,
.confirm-card {
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(4, 4, 5, 0.96);
}

.modal-card::before,
.auth-card::before {
  opacity: 0.8;
}

.auth-input,
.operation-form input {
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 17px;
  transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.auth-input:focus,
.operation-form input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.045);
  background: rgba(16, 16, 18, 0.96);
}

.auth-tabs {
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.auth-tabs button.active {
  color: #050505;
  background: linear-gradient(180deg, #ffffff, #dddddf);
}

.auth-form button,
.operation-form button,
.confirm-actions button.confirm-primary {
  border-radius: 17px;
  background: linear-gradient(180deg, #ffffff, #e4e4e6);
  color: #050505;
  box-shadow: 0 16px 36px rgba(255, 255, 255, 0.08);
  transition: transform 170ms ease, filter 170ms ease, box-shadow 170ms ease;
}

.auth-form button:hover,
.operation-form button:hover,
.confirm-actions button.confirm-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 18px 42px rgba(255, 255, 255, 0.12);
}

.confirm-actions button.confirm-secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.close-modal,
.close-confirm,
.logout-btn {
  color: #a5abb6;
  transition: color 170ms ease, transform 170ms ease;
}

.close-modal:hover,
.close-confirm:hover,
.logout-btn:hover {
  color: #ffffff;
  transform: scale(1.04);
}

@media (max-width: 1450px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .account-area,
  .actions {
    justify-self: stretch;
  }

  .kpi-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ranking-card,
  .history-card,
  .chart-card {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 14px;
  }

  .shell {
    width: calc(100vw - 28px);
    padding-top: 18px;
  }

  .profile-pill,
  .goal-pill,
  .new-btn,
  .ghost-btn {
    width: 100%;
  }

  .period-tabs {
    width: 100%;
    gap: 3px;
    padding: 5px;
  }

  .period-tabs button {
    font-size: 12px;
  }

  .kpi-card {
    min-height: 116px;
  }

  .kpi-card strong {
    font-size: 27px;
  }

  .chart-card,
  .ranking-card,
  .history-card {
    border-radius: 18px;
  }
}

:root {
  --bg: #000000;
  --panel: #050505;
  --panel-soft: #030303;
  --panel-hover: #080808;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.13);
  --text: #f5f5f5;
  --muted: #8f8f8f;
  --muted-strong: #b8b8b8;
  --blue: #2f8cff;
  --purple: #8b5cf6;
  --green: #00e887;
  --red: #ff4655;
  --orange: #ff9f0a;
  --yellow: #f4c20d;
  --shadow: none;
  --shadow-soft: none;
  --shadow-card: none;
}

html,
body,
.auth-screen {
  background: #000000;
}

body {
  background: #000000;
  color: var(--text);
}

.auth-screen::before,
.kpi-card::before,
.chart-card::before,
.ranking-card::before,
.history-card::before,
.modal-card::before,
.auth-card::before {
  display: none;
}

.profile-pill,
.goal-pill,
.header-icon,
.ghost-btn,
.new-btn,
.period-tabs,
.date-range,
.kpi-card,
.chart-card,
.ranking-card,
.history-card,
.modal-card,
.confirm-card,
.auth-card,
.table-action,
.avatar-control,
.auth-input,
.operation-form input,
.auth-tabs,
.confirm-actions button.confirm-secondary,
.status-pill {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: none;
}

.chart-card,
.ranking-card,
.history-card,
.auth-card,
.modal-card,
.confirm-card {
  background: #030303;
}

.kpi-card {
  background: #050505;
}

.profile-pill,
.goal-pill,
.period-tabs,
.date-range,
.table-action,
.avatar-control,
.auth-input,
.operation-form input {
  background: #050505;
}

.brand h1,
.auth-brand h1,
.panel-title,
.modal-card h2,
.confirm-card h2,
.profile-name,
.goal-copy,
.ranking-list strong,
.history-table td {
  color: #f5f5f5;
  text-shadow: none;
}

.brand p,
.auth-brand p,
.modal-subtitle,
.empty-state,
.profile-tier,
.goal-rest,
.kpi-card span,
.operation-form label,
.confirm-card p,
.ranking-list small {
  color: #8f8f8f;
}

.avatar,
.rank-avatar,
.avatar-fallback {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

.avatar-fallback {
  background: #080808;
}

.goal-track {
  background: #101010;
  box-shadow: none;
}

.goal-fill {
  background: #ff333f;
  box-shadow: none;
}

.header-icon:hover,
.ghost-btn:hover,
.table-action:hover,
.avatar-control:hover {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transform: none;
}

.new-btn {
  color: #ffffff;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.new-btn:hover {
  color: #ffffff;
  background: #111111;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  filter: none;
  transform: none;
}

.period-tabs {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.period-tabs button {
  color: #8f8f8f;
  background: #000000;
  box-shadow: none;
}

.period-tabs button:hover {
  color: #ffffff;
  background: #0b0b0b;
}

.period-tabs button.active {
  color: #ffffff;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.date-range {
  background: #000000;
}

.date-range span {
  background: rgba(255, 255, 255, 0.08);
}

.kpi-card {
  transition: background 180ms ease, border-color 180ms ease;
}

.kpi-card:hover {
  background: #070707;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: none;
  transform: none;
}

.kpi-card strong {
  text-shadow: none;
}

.kpi-card::after {
  box-shadow: none;
}

.ranking-list li,
.ranking-list li.current {
  background: transparent;
  border-color: transparent;
}

.ranking-list li:hover {
  background: #050505;
  border-color: rgba(255, 255, 255, 0.08);
  transform: none;
}

.rank-place {
  background: #f4c20d;
  color: #000000;
  box-shadow: none;
}

.history-table th {
  background: #030303;
  color: #8eb9eb;
  border-top-color: rgba(255, 255, 255, 0.06);
}

.history-table tbody tr:hover {
  background: #050505;
}

.history-table th,
.history-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.status-pill {
  background: #050505;
}

.status-pill.reembolsado {
  color: var(--green);
  background: #050505;
  border-color: rgba(0, 232, 135, 0.34);
}

.status-pill.cancelado {
  color: var(--red);
  background: #050505;
  border-color: rgba(255, 70, 85, 0.34);
}

.status-pill.pendente {
  color: var(--yellow);
  background: #050505;
  border-color: rgba(244, 194, 13, 0.3);
}

.table-action {
  background: #050505;
}

.table-action:hover {
  background: #101010;
}

.auth-input:focus,
.operation-form input:focus {
  background: #070707;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.auth-tabs {
  background: #000000;
}

.auth-tabs button.active,
.auth-form button,
.operation-form button,
.confirm-actions button.confirm-primary {
  color: #ffffff;
  background: #111111;
  box-shadow: none;
}

.auth-form button:hover,
.operation-form button:hover,
.confirm-actions button.confirm-primary:hover {
  background: #151515;
  box-shadow: none;
  filter: none;
  transform: none;
}

.confirm-actions button.confirm-secondary:hover {
  background: #111111;
}

.close-modal:hover,
.close-confirm:hover,
.logout-btn:hover {
  transform: none;
}

#operationModal {
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

#operationModal .operation-modal {
  width: 90%;
  max-width: 450px;
  max-height: 90vh;
  padding: 30px;
  box-sizing: border-box;
  overflow-y: auto;
}

#operationModal .modal-close {
  top: 18px;
  right: 18px;
}

#operationModal .operation-modal h2 {
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 6px;
}

#operationModal .operation-modal p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 28px;
}

#operationModal .operation-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 16px;
}

#operationModal .operation-form label {
  gap: 9px;
  font-size: 11px;
  line-height: 1.2;
}

#operationModal .operation-form .full-field {
  grid-column: 1 / -1;
}

#operationModal .operation-form input {
  height: 48px;
  padding: 0 14px;
  font-size: 14px;
}

#operationModal .operation-form button {
  grid-column: 1 / -1;
  height: 55px;
  margin-top: 4px;
  font-size: 16px;
}

@media (max-width: 560px) {
  #operationModal {
    padding: 14px;
  }

  #operationModal .operation-modal {
    width: 92%;
    padding: 24px 20px;
  }

  #operationModal .operation-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #operationModal .operation-form input {
    height: 48px;
  }

  #operationModal .operation-form button {
    height: 52px;
  }
}

.app-layout {
  --sidebar-open: 240px;
  --sidebar-closed: 64px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-closed) minmax(0, 1fr);
  background: #000000;
  transition: grid-template-columns 200ms ease;
}

.app-layout.sidebar-pinned,
.app-layout.sidebar-hovered {
  grid-template-columns: var(--sidebar-open) minmax(0, 1fr);
}

.app-layout.sidebar-hidden {
  grid-template-columns: 0 minmax(0, 1fr);
}

.app-content {
  min-width: 0;
}

.app-page.hidden {
  display: none;
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-closed);
  height: 100vh;
  overflow: hidden;
  background: #000000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.app-layout.sidebar-pinned .app-sidebar,
.app-layout.sidebar-hovered .app-sidebar {
  width: var(--sidebar-open);
}

.app-layout.sidebar-hidden .app-sidebar {
  width: 0;
  transform: translateX(-100%);
  border-right-color: transparent;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.sidebar-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #050505;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-head strong,
.sidebar-link span,
.sidebar-pin span {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.app-layout.sidebar-pinned .sidebar-head strong,
.app-layout.sidebar-hovered .sidebar-head strong,
.app-layout.sidebar-pinned .sidebar-link span,
.app-layout.sidebar-hovered .sidebar-link span,
.app-layout.sidebar-pinned .sidebar-pin span,
.app-layout.sidebar-hovered .sidebar-pin span {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-head strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 760;
}

.sidebar-nav {
  display: grid;
  gap: 6px;
  padding: 14px 10px;
}

.sidebar-link,
.sidebar-pin,
.sidebar-visibility-toggle {
  appearance: none;
  border: 1px solid transparent;
  background: #000000;
  color: #8f8f8f;
  cursor: pointer;
  font: inherit;
}

.sidebar-link,
.sidebar-pin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.sidebar-link svg,
.sidebar-pin svg,
.sidebar-visibility-toggle svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 180ms ease;
}

.sidebar-link:hover,
.sidebar-pin:hover {
  color: #ffffff;
  background: #080808;
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-link.active {
  color: #ffffff;
  background: #111111;
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -10px;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: #2f8cff;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-pin[aria-pressed="true"] {
  color: #ffffff;
  background: #111111;
  border-color: rgba(255, 255, 255, 0.1);
}

.sidebar-visibility-toggle {
  position: fixed;
  top: 18px;
  left: 72px;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #050505;
  transition: background 180ms ease, border-color 180ms ease, left 200ms ease;
}

.sidebar-visibility-toggle:hover {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.14);
}

.app-layout.sidebar-pinned .sidebar-visibility-toggle,
.app-layout.sidebar-hovered .sidebar-visibility-toggle {
  left: 248px;
}

.app-layout.sidebar-hidden .sidebar-visibility-toggle {
  left: 14px;
}

.sidebar-mobile-scrim {
  display: none;
}

.data-panel {
  min-height: 320px;
}

.data-topbar {
  margin-bottom: 28px;
}

.data-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 18px;
}

.data-add-btn {
  width: auto;
  min-width: 178px;
  padding: 0 18px;
}

.data-filters {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(142px, 170px) minmax(170px, 230px);
  gap: 10px;
}

.data-filters input,
.data-filters select,
.operation-form select {
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #050505;
  color: #f5f5f5;
  padding: 0 13px;
  font: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: none;
}

.data-filters input:focus,
.data-filters select:focus,
.operation-form select:focus {
  border-color: rgba(255, 255, 255, 0.18);
}

.data-table-scroll {
  overflow-x: auto;
}

.data-history-table {
  min-width: 1180px;
  table-layout: auto;
}

.data-history-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.data-history-table td:nth-child(4) {
  min-width: 240px;
}

.invites-table {
  min-width: 1220px;
}

.invite-controls {
  grid-template-columns: minmax(170px, 220px);
}

.invite-generated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #050505;
  color: #ffffff;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.invite-generated span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-action.copy {
  color: #9db4ff;
  border-color: rgba(157, 180, 255, 0.18);
}

.table-action:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.status-pill.active {
  color: var(--green);
  border-color: rgba(0, 232, 135, 0.34);
}

.status-pill.used {
  color: #9db4ff;
  border-color: rgba(157, 180, 255, 0.28);
}

.status-pill.expired {
  color: var(--yellow);
  border-color: rgba(244, 194, 13, 0.3);
}

.status-pill.cancelled {
  color: var(--red);
  border-color: rgba(255, 70, 85, 0.34);
}

.data-modal {
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

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

.data-view-modal {
  position: relative;
  width: min(92vw, 520px);
  padding-top: 38px;
}

.data-view-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}

.data-view-list dt {
  color: #8eb9eb;
  font-size: 12px;
  font-weight: 760;
}

.data-view-list dd {
  margin: -8px 0 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .app-layout,
  .app-layout.sidebar-pinned,
  .app-layout.sidebar-hovered,
  .app-layout.sidebar-hidden {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    left: 0;
    width: var(--sidebar-open);
    transform: translateX(-100%);
  }

  .app-layout.sidebar-mobile-open .app-sidebar {
    transform: translateX(0);
  }

  .app-layout.sidebar-pinned .app-sidebar,
  .app-layout.sidebar-hovered .app-sidebar {
    width: var(--sidebar-open);
  }

  .sidebar-head strong,
  .sidebar-link span,
  .sidebar-pin span {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-visibility-toggle {
    top: 14px;
    left: 14px;
  }

  .app-layout.sidebar-pinned .sidebar-visibility-toggle,
  .app-layout.sidebar-hovered .sidebar-visibility-toggle,
  .app-layout.sidebar-hidden .sidebar-visibility-toggle {
    left: 14px;
  }

  .sidebar-mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: none;
    background: rgba(0, 0, 0, 0.72);
  }

  .app-layout.sidebar-mobile-open .sidebar-mobile-scrim {
    display: block;
  }

  .app-content {
    width: 100%;
  }

  .data-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .data-add-btn {
    width: 100%;
  }

  .data-filters {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .data-modal {
    width: 92%;
    padding: 24px 20px;
  }

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

body {
  overflow-x: hidden;
}

.app-layout,
.app-layout.sidebar-hovered,
.app-layout.sidebar-hidden {
  --sidebar-open: 235px;
  --sidebar-closed: 64px;
  grid-template-columns: var(--sidebar-closed) minmax(0, 1fr);
}

.app-layout.sidebar-pinned {
  grid-template-columns: var(--sidebar-open) minmax(0, 1fr);
}

.app-content {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
  transition: width 200ms ease, margin 200ms ease;
}

.app-content .shell {
  width: min(1740px, calc(100% - 48px));
  max-width: calc(100% - 48px);
}

.app-sidebar {
  z-index: 80;
  width: var(--sidebar-closed);
  min-width: var(--sidebar-closed);
}

.app-layout.sidebar-hovered .app-sidebar,
.app-layout.sidebar-pinned .app-sidebar {
  width: var(--sidebar-open);
}

.app-layout.sidebar-hovered:not(.sidebar-pinned) .app-sidebar {
  position: sticky;
  top: 0;
  box-shadow: none;
}

.app-layout.sidebar-hidden .app-sidebar {
  width: var(--sidebar-closed);
  min-width: var(--sidebar-closed);
  transform: none;
  border-right-color: rgba(255, 255, 255, 0.08);
}

.sidebar-top {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-top .sidebar-pin {
  width: 100%;
}

.sidebar-head,
.sidebar-mark,
.sidebar-bottom,
.sidebar-visibility-toggle {
  display: none;
}

.sidebar-link span,
.sidebar-pin span {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.app-layout.sidebar-pinned .sidebar-link span,
.app-layout.sidebar-hovered .sidebar-link span,
.app-layout.sidebar-pinned .sidebar-pin span,
.app-layout.sidebar-hovered .sidebar-pin span {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-nav {
  padding-top: 10px;
}

.dashboard-grid,
.kpi-grid,
.topbar,
.controls,
.panel,
.table-scroll {
  min-width: 0;
}

.table-scroll {
  max-width: 100%;
}

@media (max-width: 980px) {
  .app-layout,
  .app-layout.sidebar-pinned,
  .app-layout.sidebar-hovered,
  .app-layout.sidebar-hidden {
    display: block;
  }

  .app-content .shell {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
  }

  .app-sidebar,
  .app-layout.sidebar-pinned .app-sidebar,
  .app-layout.sidebar-hovered .app-sidebar,
  .app-layout.sidebar-hidden .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-closed);
    min-width: var(--sidebar-closed);
    transform: none;
  }

  .app-layout.sidebar-mobile-open .app-sidebar {
    width: var(--sidebar-open);
    min-width: var(--sidebar-open);
  }

  .sidebar-link span,
  .sidebar-pin span {
    opacity: 0;
    pointer-events: none;
  }

  .app-layout.sidebar-mobile-open .sidebar-link span,
  .app-layout.sidebar-mobile-open .sidebar-pin span {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
    background: #000000;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  .app-layout,
  .app-layout.sidebar-pinned,
  .app-layout.sidebar-hovered,
  .app-layout.sidebar-hidden {
    display: block;
    min-height: 100dvh;
  }

  .app-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding-left: 56px;
  }

  .app-content .shell,
  .shell {
    width: calc(100vw - 68px);
    max-width: calc(100vw - 68px);
    margin: 0 12px 0 0;
    padding: 14px 0 24px;
  }

  .app-sidebar,
  .app-layout.sidebar-pinned .app-sidebar,
  .app-layout.sidebar-hovered .app-sidebar,
  .app-layout.sidebar-hidden .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: 52px;
    min-width: 52px;
    height: 100dvh;
    transform: none;
    background: #000000;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: width 180ms ease;
  }

  .app-layout.sidebar-mobile-open .app-sidebar {
    width: min(235px, calc(100vw - 24px));
    min-width: min(235px, calc(100vw - 24px));
  }

  .sidebar-top {
    display: none;
  }

  .sidebar-nav {
    padding: 12px 7px;
  }

  .sidebar-link {
    height: 42px;
    padding: 0 10px;
    border-radius: 11px;
  }

  .sidebar-link svg {
    width: 19px;
    height: 19px;
  }

  .sidebar-link span,
  .sidebar-pin span {
    opacity: 0;
    pointer-events: none;
  }

  .app-layout.sidebar-mobile-open .sidebar-link span {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    background: rgba(0, 0, 0, 0.76);
  }

  .app-layout.sidebar-mobile-open .sidebar-mobile-scrim {
    display: block;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }

  .brand h1 {
    font-size: 24px;
    line-height: 1.05;
  }

  .brand p {
    margin-top: 6px;
    font-size: 13px;
  }

  .account-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
  }

  .profile-pill,
  .goal-pill {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
  }

  .profile-pill {
    padding: 6px 10px 6px 7px;
  }

  .profile-name,
  .profile-pill strong {
    max-width: none;
  }

  .goal-pill {
    height: auto;
    padding: 8px 11px;
  }

  .goal-pill strong,
  .goal-pill span,
  .goal-pill em {
    font-size: 12px;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .new-btn,
  .data-add-btn {
    width: 100%;
    height: 46px;
    min-height: 46px;
    border-radius: 14px;
  }

  .controls {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }

  .period-tabs {
    width: 100%;
    height: 46px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 14px;
  }

  .period-tabs button {
    min-width: 70px;
    padding: 0 10px;
    font-size: 13px;
    flex: 0 0 auto;
  }

  .date-range {
    width: 100%;
    height: 44px;
    border-radius: 14px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  .kpi-card {
    min-height: 94px;
    padding: 15px 12px;
    border-radius: 16px;
  }

  .kpi-card span {
    font-size: 11px;
  }

  .kpi-card strong {
    margin-top: 10px;
    font-size: clamp(20px, 5.4vw, 25px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }

  .ranking-panel,
  .history-panel,
  .panel {
    width: 100%;
    min-width: 0;
    padding: 18px 12px;
    border-radius: 16px;
  }

  .ranking-panel {
    min-height: 220px;
  }

  .panel h2,
  .panel-title {
    font-size: 19px;
  }

  .ranking-list li {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .ranking-list b,
  .ranking-list strong {
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .table-scroll,
  .data-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .data-history-table,
  .invites-table {
    min-width: 980px;
  }

  th,
  td {
    font-size: 13px;
    padding: 14px 12px;
  }

  .operation-actions {
    gap: 8px;
  }

  .table-action {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .data-topbar {
    margin-bottom: 16px;
  }

  .data-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 14px;
  }

  .data-filters {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
  }

  .data-filters input,
  .data-filters select,
  .operation-form select {
    height: 46px;
    font-size: 16px;
    border-radius: 13px;
  }

  .modal-backdrop {
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow-y: auto;
  }

  #operationModal .operation-modal,
  .operation-modal,
  .data-modal,
  .confirm-modal,
  .data-view-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: 90dvh;
    overflow-y: auto;
    padding: 24px 18px;
    border-radius: 18px;
  }

  #operationModal .operation-modal h2,
  .operation-modal h2,
  .confirm-modal h2 {
    font-size: 23px;
  }

  #operationModal .operation-modal p,
  .operation-modal p,
  .confirm-modal p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  #operationModal .operation-form,
  .operation-form,
  .data-form {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  #operationModal .operation-form input,
  .operation-form input,
  .operation-form select,
  .auth-form input {
    height: 46px;
    min-height: 46px;
    font-size: 16px;
    border-radius: 13px;
  }

  #operationModal .operation-form button,
  .operation-form button,
  .confirm-actions button,
  .auth-form button {
    width: 100%;
    height: 50px;
    min-height: 50px;
    font-size: 16px;
    border-radius: 14px;
  }

  .confirm-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .auth-screen {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom));
  }

  .auth-brand h1 {
    font-size: 34px;
  }

  .auth-card {
    width: 100%;
    padding: 22px 18px;
  }
}

@media (max-width: 430px) {
  .app-content {
    padding-left: 52px;
  }

  .app-content .shell,
  .shell {
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
    margin-right: 12px;
  }

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

  .kpi-card {
    min-height: 90px;
    padding: 14px 10px;
  }

  .kpi-card strong {
    font-size: clamp(19px, 5.2vw, 23px);
  }
}

@media (max-width: 375px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .brand h1 {
    font-size: 22px;
  }

  .profile-pill,
  .goal-pill,
  .new-btn {
    min-height: 44px;
  }

  .panel {
    padding: 16px 10px;
  }
}