:root {
  --ink: #102a4b;
  --green: #0b54aa;
  --green2: #2d8060;
  --mint: #e4f0fb;
  --cream: #f7f8f2;
  --paper: #fff;
  --line: #dfe4da;
  --muted: #68798c;
  --amber: #c17a20;
  --blue: #396b85;
  --danger: #b6433c;
  --shadow: 0 24px 70px rgba(26, 54, 39, 0.11);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.shell {
  max-width: 1440px;
  margin: auto;
  min-height: 100vh;
  overflow: hidden;
}
.topbar {
  height: 82px;
  padding: 0 clamp(24px, 6vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 248, 242, 0.92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font: 800 20px Manrope;
}
.brand > span:last-child span {
  color: var(--green);
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--green);
  display: grid;
  place-items: center;
}
.brand-mark svg {
  width: 19px;
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
}
.topbar nav {
  display: flex;
  gap: 34px;
  height: 100%;
}
.topbar nav a {
  display: flex;
  align-items: center;
  color: #59635d;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  position: relative;
}
.topbar nav a.active {
  color: var(--green);
}
.topbar nav a.active:after {
  content: "";
  height: 3px;
  background: var(--green);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
}
.help-button,
.section-title button {
  border: 1px solid #cfd8cf;
  background: transparent;
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--green);
  font-weight: 700;
  cursor: pointer;
}
.hero {
  min-height: 610px;
  padding: 72px clamp(24px, 7vw, 104px);
  display: grid;
  grid-template-columns: 1fr minmax(390px, 505px);
  gap: 8vw;
  align-items: center;
  background:
    radial-gradient(
      circle at 13% 82%,
      rgba(120, 177, 126, 0.13),
      transparent 25%
    ),
    linear-gradient(115deg, #f7f8f2 0%, #f7f8f2 58%, #edf3e9 58%, #e2eee0 100%);
  position: relative;
}
.hero:after {
  content: "+";
  position: absolute;
  right: 4.8%;
  top: 13%;
  font: 300 90px Manrope;
  color: rgba(25, 100, 71, 0.08);
}
.eyebrow,
.section-title span,
.how > div > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  color: var(--green);
}
.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
}
.eyebrow span {
  width: 26px;
  height: 2px;
  background: var(--green);
}
h1 {
  font: 800 clamp(48px, 5vw, 72px) / 1.03 Manrope;
  margin: 20px 0 24px;
  letter-spacing: -3.6px;
}
h1 em {
  color: var(--green);
  font-style: normal;
  position: relative;
}
h1 em:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 7px;
  border-top: 3px solid #8bb28f;
  border-radius: 50%;
}
.hero-copy > p {
  max-width: 540px;
  font-size: 18px;
  line-height: 1.7;
  color: #5f6962;
}
.trust-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
}
.trust-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mint);
  color: var(--green);
  font-weight: 800;
}
.trust-row div:last-child {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.trust-row span {
  color: var(--muted);
  margin-top: 2px;
}
.verify-card {
  background: var(--paper);
  border: 1px solid #dce4db;
  border-radius: 22px;
  padding: 34px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}
.card-heading {
  display: flex;
  gap: 16px;
  align-items: center;
}
.card-heading > div > span {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--green);
  font-weight: 800;
}
.card-heading h2 {
  margin: 6px 0 0;
  font: 700 23px Manrope;
}
.scan-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #e6f0e5;
  position: relative;
  display: block;
}
.scan-icon i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--green);
  border-style: solid;
}
.scan-icon i:nth-child(1) {
  left: 10px;
  top: 10px;
  border-width: 2px 0 0 2px;
}
.scan-icon i:nth-child(2) {
  right: 10px;
  top: 10px;
  border-width: 2px 2px 0 0;
}
.scan-icon i:nth-child(3) {
  left: 10px;
  bottom: 10px;
  border-width: 0 0 2px 2px;
}
.scan-icon i:nth-child(4) {
  right: 10px;
  bottom: 10px;
  border-width: 0 2px 2px 0;
}
.hint {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 24px 0;
}
label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.input-wrap {
  position: relative;
}
.input-wrap input {
  width: 100%;
  height: 58px;
  border: 1.5px solid #cbd4cc;
  border-radius: 11px;
  padding: 0 74px 0 18px;
  font: 600 19px "DM Sans";
  letter-spacing: 2px;
  outline: none;
  background: #fbfcf9;
}
.input-wrap input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(25, 100, 71, 0.09);
}
.input-wrap span {
  position: absolute;
  right: 16px;
  top: 20px;
  font-size: 12px;
  color: #8b938d;
  letter-spacing: 0;
}
#serial-help {
  display: block;
  margin: 7px 0 19px;
  color: #7c857f;
}
.primary {
  width: 100%;
  height: 56px;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 11px;
  font-weight: 700;
  font-size: 15px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: 0.2s;
}
.primary:hover {
  background: #104e36;
  transform: translateY(-1px);
}
.primary b {
  font-size: 21px;
}
.privacy {
  text-align: center;
  font-size: 11px;
  color: #818a83;
  margin-top: 18px;
}
.privacy span {
  color: var(--green);
}
.result {
  display: none;
  margin-top: 18px;
  padding: 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.result.show {
  display: block;
}
.result strong {
  display: block;
  font: 700 16px Manrope;
  margin-bottom: 4px;
}
.result.authentic {
  background: #e6f3e8;
  border: 1px solid #bcddc3;
  color: #16583e;
}
.result.warning {
  background: #fff3df;
  border: 1px solid #ecd1a2;
  color: #8a5819;
}
.result.invalid {
  background: #f9e8e6;
  border: 1px solid #ebc1bd;
  color: #91352f;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: white;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 25px clamp(24px, 7vw, 104px);
}
.stats article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 34px;
  border-right: 1px solid var(--line);
}
.stats article:last-child {
  border: 0;
}
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.stat-icon.green {
  background: #e7f2e6;
  color: var(--green);
}
.stat-icon.amber {
  background: #fff1d7;
  color: var(--amber);
}
.stat-icon.blue {
  background: #e5eff3;
  color: var(--blue);
}
.stats article div {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: baseline;
}
.stats small {
  grid-column: 1/-1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #788079;
}
.stats strong {
  font: 800 22px Manrope;
}
.stats em {
  font-size: 10px;
  color: var(--green);
  font-style: normal;
}
.history,
.how {
  padding: 70px clamp(24px, 7vw, 104px);
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 24px;
}
.section-title h2,
.how h2 {
  font: 700 30px Manrope;
  margin: 7px 0 0;
  letter-spacing: -0.8px;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
th,
td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeee8;
  font-size: 13px;
}
th {
  font-size: 10px;
  letter-spacing: 1px;
  color: #7c857f;
  background: #fafbf8;
}
tbody tr:last-child td {
  border-bottom: 0;
}
.empty-row td {
  text-align: center;
  color: #858d87;
  padding: 32px;
}
.status-pill {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
}
.status-pill.authentic {
  background: #e5f2e6;
  color: var(--green);
}
.status-pill.warning {
  background: #fff0d7;
  color: #96601b;
}
.status-pill.invalid {
  background: #f8e7e5;
  color: #9c3c35;
}
.how {
  background: #173c2f;
  color: white;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 9vw;
}
.how > div > span {
  color: #9dc6a8;
}
.how h2 {
  font-size: 32px;
  max-width: 360px;
}
.how ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.how li b {
  display: block;
  color: #8eb99a;
  font: 700 12px Manrope;
  margin-bottom: 25px;
}
.how li strong {
  font: 700 16px Manrope;
}
.how li p {
  font-size: 13px;
  line-height: 1.6;
  color: #b9c9c1;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(24px, 7vw, 104px);
  font-size: 11px;
  color: #737c75;
  background: #102e24;
}
@media (max-width: 850px) {
  .topbar nav {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 52px;
    background: linear-gradient(155deg, #f7f8f2 60%, #e2eee0);
  }
  .hero-copy {
    text-align: center;
  }
  .eyebrow,
  .trust-row {
    justify-content: center;
  }
  .hero-copy > p {
    margin-left: auto;
    margin-right: auto;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stats article {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  .stats article:last-child {
    border: 0;
  }
  .how {
    grid-template-columns: 1fr;
  }
  .how ol {
    grid-template-columns: 1fr;
  }
  .how li {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 18px;
  }
  .how li b {
    margin-bottom: 10px;
  }
  footer {
    flex-direction: column;
  }
  .verify-card {
    padding: 25px;
  }
}
@media (max-width: 470px) {
  .help-button {
    display: none;
  }
  .topbar {
    height: 70px;
  }
  .hero {
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero h1 {
    font-size: 45px;
    letter-spacing: -2.7px;
  }
  .verify-card {
    border-radius: 16px;
  }
  .stats,
  .history,
  .how {
    padding-left: 18px;
    padding-right: 18px;
  }
  .section-title {
    align-items: flex-start;
    gap: 12px;
  }
  .section-title button {
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Save Concept identity */
:root {
  --ink: #071b42;
  --green: #0c54ad;
  --green2: #1972cd;
  --mint: #e7f0fb;
  --cream: #f5f8fc;
  --line: #d8e1ed;
  --muted: #5f6f84;
  --amber: #b8842d;
  --blue: #0b56ad;
  --danger: #b43e43;
  --shadow: 0 28px 70px rgba(4, 32, 77, 0.14);
}
body {
  background: var(--cream);
}
.topbar {
  background: rgba(248, 250, 253, 0.94);
  border-color: #dce4ef;
}
.save-brand {
  gap: 10px;
}
.save-brand > span:last-child {
  display: grid;
  line-height: 0.8;
}
.save-brand strong {
  font: 800 21px Manrope;
  color: #0b3975;
}
.save-brand small {
  font: 500 17px Manrope;
  color: #0b3975;
}
.save-brand sup {
  font-size: 7px;
}
.save-mark {
  background: transparent;
  width: 43px;
  height: 43px;
}
.save-mark svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #0c4c98;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar nav a.active,
.help-button,
.section-title button {
  color: #0b54aa;
}
.topbar nav a.active:after {
  background: #0b54aa;
}
.hero {
  grid-template-columns: minmax(420px, 1.15fr) minmax(390px, 0.85fr);
  gap: 4.5vw;
  min-height: 670px;
  background:
    radial-gradient(circle at 34% 50%, #fff 0, #f2f6fc 46%, transparent 47%),
    linear-gradient(120deg, #f8fafc 0%, #edf3fb 100%);
}
.hero:after {
  content: "SC";
  font-size: 120px;
  color: rgba(8, 70, 145, 0.035);
  top: 8%;
}
.product-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(220px, 0.72fr);
  align-items: center;
  min-width: 0;
}
.product-copy {
  position: relative;
  z-index: 2;
}
.product-copy h1 {
  font-size: clamp(42px, 4.3vw, 66px);
  color: #071b42;
}
.product-copy > p {
  font-size: 17px;
  line-height: 1.65;
  color: #5f6f84;
  max-width: 430px;
}
.product-shot {
  margin: 0 -18px 0 -52px;
  align-self: end;
  position: relative;
  z-index: 1;
}
.product-shot img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 24px 25px rgba(3, 30, 68, 0.15));
}
.product-shot figcaption {
  font-size: 11px;
  text-align: center;
  color: #6f7f92;
  margin-top: -20px;
  position: relative;
}
.eyebrow,
.section-title span,
.how > div > span {
  color: #0b54aa;
}
.eyebrow span {
  background: #0b54aa;
}
.verify-card {
  border-color: #d7e2f0;
  box-shadow: 0 30px 80px rgba(2, 32, 73, 0.15);
}
.scan-icon {
  background: #e7f0fb;
}
.scan-icon i {
  border-color: #0b54aa;
}
.card-heading > div > span {
  color: #0b54aa;
}
.primary {
  background: linear-gradient(135deg, #0b4f9f, #0c67c9);
  box-shadow: 0 12px 25px rgba(11, 84, 170, 0.23);
}
.primary:hover {
  background: linear-gradient(135deg, #083e7e, #0959ad);
}
.input-wrap input:focus {
  border-color: #0b54aa;
  box-shadow: 0 0 0 4px rgba(11, 84, 170, 0.1);
}
.stat-icon.green {
  background: #e7f0fb;
  color: #0b54aa;
}
.stats em {
  color: #426b9a;
}
.stats article div {
  grid-template-columns: auto;
}
.stats article strong {
  font-size: 20px;
}
.how {
  background: linear-gradient(125deg, #061a40, #0a3975);
}
footer {
  background: #041632;
  color: #9eacc0;
}
.result.authentic {
  background: #e7f2fb;
  border-color: #b9d3ed;
  color: #0b4f8e;
}
.status-pill.authentic {
  background: #e4effa;
  color: #0b54aa;
}
@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .product-panel {
    max-width: 720px;
    margin: auto;
  }
  .verify-card {
    max-width: 560px;
    width: 100%;
    margin: auto;
  }
  .product-shot {
    margin-left: -20px;
  }
}
@media (max-width: 620px) {
  .product-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .product-copy p {
    margin-left: auto;
    margin-right: auto;
  }
  .product-shot {
    margin: -18px auto 0;
    width: 72%;
    max-width: 320px;
  }
  .product-shot img {
    max-height: 380px;
  }
  .eyebrow {
    justify-content: center;
  }
  .hero {
    padding-top: 38px;
  }
  .product-copy h1 {
    font-size: 43px;
  }
  .product-shot figcaption {
    margin-top: -10px;
  }
}

.product-shot {
  margin-left: -35px;
  margin-right: -40px;
}
.product-shot img {
  max-height: 500px;
  border-radius: 18px;
}
.product-shot figcaption {
  margin: 10px auto 0;
  max-width: 310px;
  line-height: 1.45;
  color: #53677f;
}
.product-shot figcaption strong {
  color: #0b4f9f;
}
.serial-explainer {
  padding: 76px clamp(24px, 7vw, 104px);
  display: grid;
  grid-template-columns: minmax(290px, 0.75fr) minmax(420px, 1.25fr);
  gap: 8vw;
  align-items: center;
  background: #fff;
}
.serial-number-demo {
  min-height: 260px;
  border: 1px solid #c9d9eb;
  border-radius: 22px;
  background: linear-gradient(145deg, #f9fbfe, #e8f1fb);
  box-shadow: 0 22px 55px rgba(4, 45, 96, 0.1);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.serial-number-demo:before {
  content: "SC";
  position: absolute;
  right: -12px;
  bottom: -38px;
  font: 800 150px Manrope;
  color: rgba(11, 84, 170, 0.055);
}
.serial-number-demo:after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(11, 84, 170, 0.2);
  border-radius: 14px;
}
.serial-number-demo span {
  font-size: 12px;
  letter-spacing: 1.8px;
  font-weight: 800;
  color: #0b54aa;
  position: relative;
  z-index: 1;
}
.serial-number-demo strong {
  font: 800 clamp(52px, 6vw, 76px) / 1 Manrope;
  letter-spacing: 8px;
  color: #071b42;
  margin: 18px 0 14px;
  position: relative;
  z-index: 1;
}
.serial-number-demo small {
  font-size: 13px;
  color: #66788e;
  position: relative;
  z-index: 1;
}
.serial-copy > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  color: #0b54aa;
}
.serial-copy h2 {
  font: 700 clamp(29px, 3vw, 40px) / 1.2 Manrope;
  letter-spacing: -1.2px;
  margin: 10px 0 18px;
  color: #071b42;
}
.serial-copy > p {
  font-size: 16px;
  line-height: 1.7;
  color: #5d6f84;
  max-width: 720px;
}
.serial-copy ul {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.serial-copy li {
  display: flex;
  gap: 10px;
}
.serial-copy li i {
  flex: 0 0 27px;
  height: 27px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e6effa;
  color: #0b54aa;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
.serial-copy li span {
  font-size: 13px;
  line-height: 1.45;
  color: #65768a;
}
.serial-copy li strong {
  display: block;
  color: #173052;
  margin-bottom: 4px;
}
.stats article strong {
  white-space: nowrap;
}
@media (max-width: 1050px) {
  .product-shot {
    margin-left: -10px;
    margin-right: -10px;
  }
  .serial-explainer {
    gap: 4vw;
  }
  .serial-copy ul {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .serial-explainer {
    grid-template-columns: 1fr;
    padding-top: 55px;
    padding-bottom: 55px;
  }
  .serial-number-demo {
    min-height: 220px;
  }
  .serial-copy h2 {
    font-size: 30px;
  }
  .product-shot {
    width: 100%;
    max-width: 520px;
  }
  .product-shot img {
    max-height: none;
  }
}
@media (max-width: 470px) {
  .serial-number-demo strong {
    font-size: 48px;
    letter-spacing: 5px;
  }
  .serial-number-demo {
    padding: 30px;
  }
  .product-shot {
    width: 100%;
  }
}

.hero {
  grid-template-columns: minmax(330px, 0.8fr) minmax(390px, 0.9fr);
  justify-content: center;
}
.product-panel {
  display: block;
  max-width: 570px;
}
.verify-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scan-button {
  height: 56px;
  border: 1.5px solid #0b54aa;
  border-radius: 11px;
  background: #fff;
  color: #0b54aa;
  font-weight: 800;
  cursor: pointer;
}
.qr-icon {
  font-size: 22px;
  vertical-align: -2px;
  margin-right: 6px;
}
.tutorial-shot {
  margin: 0;
  border: 1px solid #d5e1ef;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #edf4fb);
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(4, 45, 96, 0.1);
}
.tutorial-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.tutorial-shot figcaption {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  color: #53677f;
  font-size: 13px;
  line-height: 1.4;
}
.tutorial-shot figcaption span {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 8px;
  background: #0b54aa;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.admin {
  padding: 76px clamp(24px, 7vw, 104px);
  background: #eef3f9;
  border-top: 1px solid #dbe4ef;
}
.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}
.admin-head > div > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  color: #0b54aa;
}
.admin-head h2 {
  font: 700 34px Manrope;
  margin: 7px 0 4px;
}
.admin-head p {
  margin: 0;
  color: #68798c;
}
.demo-badge {
  padding: 8px 12px;
  border-radius: 99px;
  background: #fff4d9;
  color: #96651c;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #ecd6a5;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(480px, 1.28fr);
  gap: 22px;
}
.generator-card,
.admin-register {
  background: #fff;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 12px 35px rgba(5, 40, 82, 0.06);
}
.admin-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.admin-card-title > span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e5effa;
  color: #0b54aa;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.admin-card-title small {
  font-size: 10px;
  letter-spacing: 1.3px;
  color: #0b54aa;
  font-weight: 800;
}
.admin-card-title h3 {
  margin: 3px 0 0;
  font: 700 20px Manrope;
}
.generator-card input,
.generator-card select {
  width: 100%;
  height: 48px;
  border: 1px solid #cdd8e5;
  border-radius: 9px;
  background: #fbfcfe;
  padding: 0 13px;
  font: 500 14px "DM Sans";
  margin-bottom: 16px;
  outline: none;
}
.generator-card input:focus,
.generator-card select:focus {
  border-color: #0b54aa;
  box-shadow: 0 0 0 3px rgba(11, 84, 170, 0.09);
}
.form-row {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 12px;
}
.generated-output {
  display: none;
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: #e8f2fb;
  color: #0b4f8e;
  font-size: 13px;
}
.generated-output.show {
  display: block;
}
.generated-output strong {
  font: 800 24px Manrope;
  letter-spacing: 3px;
  display: block;
}
.admin-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.admin-summary article {
  padding: 14px;
  border-radius: 12px;
  background: #f4f7fb;
}
.admin-summary small {
  display: block;
  color: #6b7c90;
  font-size: 11px;
}
.admin-summary strong {
  font: 800 23px Manrope;
}
.admin-table-wrap {
  overflow: auto;
  max-height: 390px;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
}
.admin-table-wrap table {
  min-width: 600px;
}
.admin-table-wrap button {
  border: 1px solid #c7d4e2;
  background: #fff;
  color: #173b68;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.admin-table-wrap button[data-state="blocked"] {
  color: #a43b3e;
  border-color: #e2babc;
}
.admin-security {
  font-size: 13px;
  color: #66788e;
  margin: 18px 2px 0;
  line-height: 1.5;
}
.scanner-dialog {
  width: min(92vw, 520px);
  border: 0;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 35px 100px rgba(0, 20, 55, 0.35);
  color: #0b244b;
}
.scanner-dialog::backdrop {
  background: rgba(3, 18, 42, 0.72);
  backdrop-filter: blur(5px);
}
.scanner-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.scanner-head small {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #0b54aa;
  font-weight: 800;
}
.scanner-head h2 {
  margin: 4px 0 0;
  font: 700 24px Manrope;
}
.scanner-head button {
  border: 0;
  background: #edf2f8;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 24px;
  color: #53677f;
  cursor: pointer;
}
.scanner-dialog > p,
.scanner-status {
  font-size: 14px;
  color: #66788e;
}
.camera-frame {
  aspect-ratio: 4/3;
  background: #071a38;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  margin: 18px 0;
}
.camera-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#qr-reader {
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: inherit;
  background: #031127;
}
#qr-reader video,
#qr-reader img {
  width: 100% !important;
  object-fit: cover;
}
#qr-reader__dashboard_section_csr button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  color: #071f4c;
  font-weight: 700;
}
.camera-target {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  left: 21%;
  top: 11%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.camera-target i {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: #fff;
  border-style: solid;
}
.camera-target i:nth-child(1) {
  left: -1px;
  top: -1px;
  border-width: 3px 0 0 3px;
}
.camera-target i:nth-child(2) {
  right: -1px;
  top: -1px;
  border-width: 3px 3px 0 0;
}
.camera-target i:nth-child(3) {
  left: -1px;
  bottom: -1px;
  border-width: 0 0 3px 3px;
}
.camera-target i:nth-child(4) {
  right: -1px;
  bottom: -1px;
  border-width: 0 3px 3px 0;
}
.upload-qr {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: #0b54aa;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.upload-qr input {
  display: none;
}
@media (max-width: 900px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .product-panel {
    text-align: center;
    margin: auto;
  }
  .product-copy p {
    margin-left: auto;
    margin-right: auto;
  }
  .admin-head {
    align-items: flex-start;
    gap: 16px;
  }
  .topbar nav a[href="#admin"] {
    display: none;
  }
}
@media (max-width: 620px) {
  .verify-actions {
    grid-template-columns: 1fr;
  }
  .admin-head {
    flex-direction: column;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .serial-explainer {
    padding-top: 40px;
  }
  .admin {
    padding-top: 55px;
  }
  .scanner-dialog {
    padding: 20px;
  }
}

.admin-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-table-wrap button.qr-action {
  background: #e8f1fb;
  border-color: #b9d0e8;
  color: #0b54aa;
}
.qr-dialog {
  width: min(92vw, 440px);
  border: 0;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 35px 100px rgba(0, 20, 55, 0.35);
  color: #0b244b;
}
.qr-dialog::backdrop {
  background: rgba(3, 18, 42, 0.72);
  backdrop-filter: blur(5px);
}
.qr-sheet {
  margin: 20px 0;
  padding: 24px;
  border: 1px solid #ccd9e8;
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 0 0 0 7px #f1f5fa;
}
.qr-sheet #qr-canvas {
  width: 230px;
  height: 230px;
  margin: 12px 0;
}
.qr-sheet #qr-canvas canvas,
.qr-sheet #qr-canvas img {
  width: 230px !important;
  height: 230px !important;
}
.qr-sheet > span {
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: #536b86;
}
.qr-sheet > strong {
  font: 800 30px Manrope;
  letter-spacing: 4px;
  margin: 4px 0;
  color: #081e47;
}
.qr-sheet > small {
  font-size: 11px;
  color: #718197;
}
.qr-brand {
  display: flex;
  gap: 8px;
  align-items: center;
  align-self: flex-start;
  color: #0b3975;
  line-height: 0.82;
}
.qr-brand > strong {
  font: 800 18px Manrope;
}
.qr-brand small {
  font: 500 14px Manrope;
}
.mini-mark {
  width: 35px;
  height: 35px;
  object-fit: contain;
  display: block;
}
.mobile-nav {
  display: none;
}
@media (max-width: 760px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .topbar {
    position: relative;
  }
  .mobile-nav {
    position: fixed;
    z-index: 40;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    height: 64px;
    border: 1px solid rgba(201, 215, 232, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 38px rgba(3, 28, 63, 0.2);
    backdrop-filter: blur(16px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px;
  }
  .mobile-nav a,
  .mobile-nav button {
    border: 0;
    background: transparent;
    text-decoration: none;
    color: #66788e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 12px;
    font-family: "DM Sans";
    cursor: pointer;
    min-width: 0;
  }
  .mobile-nav a:first-child {
    color: #0b54aa;
    background: #e9f1fa;
  }
  .mobile-nav span {
    font-size: 20px;
    line-height: 1;
  }
  .mobile-nav small {
    font-size: 10px;
    font-weight: 800;
  }
  .hero {
    min-height: auto;
    padding-bottom: 45px;
  }
  .product-copy h1 {
    font-size: 39px;
  }
  .product-copy > p {
    font-size: 16px;
  }
  .verify-card {
    padding: 22px;
  }
  .verify-card h2 {
    font-size: 21px;
  }
  .input-wrap input {
    height: 56px;
    font-size: 20px;
  }
  .primary,
  .scan-button {
    min-height: 54px;
  }
  .stats {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .history,
  .admin {
    scroll-margin-top: 10px;
  }
  .admin-table-wrap {
    max-height: 460px;
  }
  .admin-table-wrap table {
    min-width: 560px;
  }
  .admin-actions button {
    min-height: 36px;
    padding-left: 11px;
    padding-right: 11px;
  }
  .scanner-dialog,
  .qr-dialog {
    max-height: calc(100dvh - 24px);
    overflow: auto;
    margin: auto;
  }
  .camera-frame {
    max-height: 48dvh;
  }
  .qr-sheet {
    padding: 18px;
  }
  .qr-sheet #qr-canvas,
  .qr-sheet #qr-canvas canvas,
  .qr-sheet #qr-canvas img {
    width: 210px !important;
    height: 210px !important;
  }
}
@media (max-width: 390px) {
  .mobile-nav {
    left: 6px;
    right: 6px;
  }
  .mobile-nav small {
    font-size: 9px;
  }
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }
  .verify-card {
    padding: 18px;
  }
  .card-heading {
    gap: 10px;
  }
  .scan-icon {
    width: 45px;
    height: 45px;
  }
  .admin {
    padding-left: 14px;
    padding-right: 14px;
  }
  .qr-dialog,
  .scanner-dialog {
    width: 96vw;
    padding: 17px;
  }
}
.install-button {
  background: #0b54aa;
  color: #fff;
  border-color: #0b54aa;
}
.install-button:hover {
  background: #083f82;
}
.invite-button {
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #0b54aa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "DM Sans";
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
}
.invite-button span {
  font-size: 18px;
}
.share-status {
  text-align: center;
  color: #55708d;
  font-size: 12px;
  min-height: 17px;
}
@media (display-mode: standalone) {
  .install-button {
    display: none;
  }
}
@media (max-width: 760px) {
  .install-button {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
  }
  .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }
  .save-brand > span:last-child {
    display: none;
  }
  .save-mark {
    width: 38px;
    height: 38px;
  }
  .invite-button {
    min-height: 44px;
    font-size: 14px;
  }
}
.language-switcher,
.admin-language {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid #d6e0ec;
  border-radius: 12px;
  background: #fff;
}
.language-switcher button,
.admin-language button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  min-width: 34px;
  height: 32px;
  cursor: pointer;
  font: 700 12px "DM Sans";
}
.language-switcher button {
  font-size: 18px;
}
.language-switcher button.active,
.admin-language button.active {
  background: #e5effa;
  box-shadow: inset 0 0 0 1px #b9d0e8;
}
.admin-head-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-table-wrap button[data-state="invalid"] {
  color: #a43b3e;
  border-color: #e2babc;
}
.admin-table-wrap button[data-state="authentic"] {
  color: #126640;
  border-color: #b8d8c5;
}
@media (max-width: 1040px) {
  .topbar {
    gap: 10px;
  }
  .topbar nav {
    gap: 18px;
  }
  .install-button {
    display: none;
  }
}
@media (max-width: 620px) {
  .language-switcher {
    margin-left: auto;
  }
  .admin-head-tools {
    width: 100%;
    justify-content: space-between;
  }
}
.admin-page {
  min-height: 100vh;
}
.admin-page .topbar {
  position: sticky;
  top: 0;
}
.admin-standalone {
  min-height: calc(100vh - 82px);
  padding-top: 48px;
}
.admin-standalone .admin-head h1 {
  font: 700 34px Manrope;
  margin: 7px 0 4px;
}
.back-public {
  margin-left: auto;
  color: #0b54aa;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}
.admin-search {
  width: 100%;
  height: 46px;
  border: 1px solid #cdd8e5;
  border-radius: 10px;
  padding: 0 14px;
  margin: 0 0 14px;
  font: 500 14px "DM Sans";
  outline: none;
}
.admin-search:focus {
  border-color: #0b54aa;
  box-shadow: 0 0 0 3px rgba(11, 84, 170, 0.09);
}
.admin-standalone .admin-table-wrap {
  max-height: 560px;
}
.admin-standalone .generator-card h2 {
  margin: 3px 0 0;
  font: 700 20px Manrope;
}
@media (max-width: 700px) {
  .admin-page .topbar {
    height: auto;
    min-height: 70px;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .back-public {
    order: 3;
    width: 100%;
    text-align: center;
  }
  .admin-standalone {
    padding-top: 34px;
  }
}
.login-gate {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: radial-gradient(
    circle at 22% 18%,
    #f9fbff 0,
    #e8f1fb 42%,
    #dbe8f7 100%
  );
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}
.login-gate.hidden {
  display: none;
}
.login-brand {
  position: fixed;
  top: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #0b3975;
}
.login-brand > span:last-child {
  display: grid;
  line-height: 0.85;
}
.login-brand strong {
  font: 800 21px Manrope;
}
.login-brand small {
  font: 500 17px Manrope;
}
.login-card {
  width: min(100%, 460px);
  background: #fff;
  border: 1px solid #cddbea;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 30px 90px rgba(4, 35, 75, 0.18);
}
.login-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: #0b54aa;
}
.login-card h1 {
  font: 800 34px/1.12 Manrope;
  letter-spacing: -1.2px;
  margin: 9px 0 12px;
}
.login-card > p {
  color: #62758c;
  line-height: 1.6;
  margin: 0 0 24px;
}
.login-card form > small {
  display: block;
  color: #78879a;
  font-size: 12px;
  margin: 7px 0 18px;
}
.login-scan {
  width: 100%;
  margin-top: 10px;
}
.instructions-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #0b54aa;
  font-weight: 800;
  padding: 15px;
  cursor: pointer;
}
.login-error {
  min-height: 20px;
  color: #a43b3e;
  text-align: center;
  font-size: 13px;
}
.user-session {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd9e8;
  background: #fff;
  border-radius: 10px;
  padding: 7px 10px;
  color: #173b68;
  cursor: pointer;
}
.user-session span {
  font-weight: 800;
}
.user-session small {
  color: #8a3d3e;
}
.bonus-section {
  padding: 70px clamp(24px, 7vw, 104px);
  background: linear-gradient(135deg, #061a40, #0b4388);
  color: #fff;
}
.bonus-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.bonus-heading > div > span {
  font-size: 11px;
  letter-spacing: 1.7px;
  font-weight: 800;
  color: #8ebbe8;
}
.bonus-heading h2 {
  font: 800 36px Manrope;
  margin: 7px 0 4px;
}
.bonus-heading p {
  color: #bed0e5;
  margin: 0;
}
.bonus-score {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.bonus-score strong {
  font: 800 50px Manrope;
}
.bonus-score span {
  color: #a9c1dc;
}
.progress-track {
  height: 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  margin: 28px 0 10px;
  overflow: hidden;
}
.progress-track span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #56b8ff, #f1ca65);
  border-radius: inherit;
  transition: width 0.4s;
}
.progress-message {
  color: #c8d9ea;
  font-size: 13px;
}
/* Compact Clube SAVE teaser CTA (the full rank journey/premiações now live
   at /clube-save) — reuses .primary's button look, just adds spacing since
   it now sits directly under .progress-message instead of a rewards grid. */
.bonus-teaser-cta {
  margin-top: 22px;
  text-decoration: none;
}
.rewards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.rewards-grid article {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 17px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.07);
}
.rewards-grid article.unlocked {
  background: #fff;
  color: #09234b;
}
.rewards-grid article.featured {
  border-color: #e4c15b;
}
.rewards-grid article > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #7eb8ed;
}
.rewards-grid h3 {
  font: 800 21px Manrope;
  margin: 8px 0;
}
.rewards-grid p {
  font-size: 13px;
  line-height: 1.5;
  min-height: 40px;
  color: #bfd0e3;
}
.rewards-grid .unlocked p {
  color: #65768a;
}
.rewards-grid button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9px;
  padding: 10px;
  background: transparent;
  color: inherit;
  font-weight: 800;
}
.rewards-grid .unlocked button {
  background: #0b54aa;
  color: #fff;
  border-color: #0b54aa;
  cursor: pointer;
}
.rewards-grid .claimed button {
  background: #e8edf3;
  color: #637083;
  border-color: #d5dce4;
  cursor: default;
}
.coupon-output {
  display: none;
  margin-top: 18px;
  padding: 18px;
  border-radius: 13px;
  background: #fff;
  color: #0b3975;
}
.coupon-output.show {
  display: block;
}
.coupon-output strong {
  display: block;
  font: 800 25px Manrope;
  letter-spacing: 2px;
  margin-top: 4px;
}
.instructions-dialog {
  width: min(92vw, 500px);
  border: 0;
  border-radius: 20px;
  padding: 25px;
  color: #0b244b;
  box-shadow: 0 35px 100px rgba(0, 20, 55, 0.35);
}
.instructions-dialog::backdrop {
  background: rgba(3, 18, 42, 0.72);
}
.instructions-dialog ol {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 18px;
}
.instructions-dialog li {
  display: flex;
  gap: 13px;
}
.instructions-dialog li b {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #e5effa;
  color: #0b54aa;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
}
.instructions-dialog li span {
  color: #65768a;
  font-size: 14px;
  line-height: 1.45;
}
.instructions-dialog li strong {
  display: block;
  color: #173052;
  margin-bottom: 3px;
}
.instructions-dialog > p {
  font-size: 13px;
  color: #8b5c16;
  background: #fff4db;
  padding: 12px;
  border-radius: 9px;
}
@media (max-width: 900px) {
  .user-session {
    display: none;
  }
  .rewards-grid {
    grid-template-columns: 1fr;
  }
  .bonus-heading {
    align-items: flex-start;
  }
  .rewards-grid p {
    min-height: auto;
  }
}
@media (max-width: 520px) {
  .login-brand {
    position: static;
    margin-bottom: 16px;
  }
  .login-gate {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .login-card {
    padding: 24px;
  }
  .login-card h1 {
    font-size: 29px;
  }
  .bonus-heading {
    flex-direction: column;
  }
  .bonus-score strong {
    font-size: 42px;
  }
}
.login-layout {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(390px, 460px);
  gap: 34px;
  align-items: center;
}
.login-language {
  position: fixed;
  top: 27px;
  right: 32px;
}
.login-product-visual {
  position: relative;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #eef3f9;
  box-shadow: 0 30px 90px rgba(4, 35, 75, 0.15);
  animation: productFloat 5s ease-in-out infinite;
}
.login-product-visual > img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* Small translucent brand watermark on the demo/activation illustrations —
   no solid white chip behind it (would show up as a visible white patch on
   the product photo); just the mark itself with a soft shadow so it reads
   against any background, never covering the QR Code or serial callout. */
.demo-brand-mark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 5px rgba(4, 35, 75, 0.55)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
  pointer-events: none;
}
.demo-flag {
  display: inline-block;
  font: 800 clamp(6px, 0.62vw, 8px) Manrope, sans-serif;
  letter-spacing: 0.08em;
  color: #eaf2ff;
  text-shadow: 0 1px 3px rgba(4, 35, 75, 0.9);
  background: rgba(7, 27, 66, 0.55);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 2px 6px;
  margin-bottom: 3px;
  white-space: nowrap;
}
/* Box measured directly from login-product-back-v2.png's real pixels
   (1254×1254): the printed white square's navy border sits at x 445–808,
   y 625–940, i.e. left 35.5%/right 64.4%/top 49.8%/bottom 75.0% of the
   image. It relies on `.login-product-visual > img` staying at its native
   1:1 ratio with no cropping (see that rule) — every breakpoint used to
   force a different crop (4/3, 16/10) via object-fit: cover, which shifts
   which part of the image is visible, so the QR/serial drifted outside the
   printed square on mobile. One set of numbers now works at every width
   because nothing crops.
   `.live-auth-label` itself IS that box (inset ~0.5% on every side for a
   safety margin from the printed border) and centers its content with
   flexbox instead of a fixed `top`, because the "DEMONSTRAÇÃO" pill and
   serial text use `vw`-based clamp() font sizes that scale with the
   *viewport* width, not this card's width — on a phone they render near
   their minimum, so the stack is shorter than on desktop and a fixed `top`
   left a gap above it on mobile. Centering with flexbox keeps it centered
   no matter how tall the stack ends up. */
.live-auth-label {
  position: absolute;
  left: 36%;
  right: 36%;
  top: 50.3%;
  bottom: 25.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #071b42;
}
.live-auth-label #login-demo-qr {
  width: 50%;
  aspect-ratio: 1;
  background: #fff;
  flex-shrink: 0;
}
.live-auth-label #login-demo-qr canvas,
.live-auth-label #login-demo-qr img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.live-auth-label strong {
  font: 800 clamp(9px, 1vw, 15px) Manrope;
  letter-spacing: 2px;
  margin-top: 3px;
}
.login-product-visual figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  color: #173052;
}
.login-product-visual figcaption > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #0b54aa;
  color: #fff;
  font-weight: 800;
}
.login-product-visual figcaption div {
  display: flex;
  flex-direction: column;
}
.login-product-visual figcaption strong {
  font-size: 14px;
}
.login-product-visual figcaption small {
  font-size: 11px;
  color: #65768a;
  margin-top: 2px;
}
@keyframes productFloat {
  0%,
  100% {
    transform: perspective(900px) rotateY(-1.5deg) translateY(0);
  }
  50% {
    transform: perspective(900px) rotateY(1.5deg) translateY(-7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-product-visual {
    animation: none;
  }
}

/* Ampola isolada com verso autenticável */
.product-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, .72fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  max-width: 700px;
  overflow: visible;
}
.product-panel::after { content: none; }
.product-copy { min-width: 0; }
.signature-vial {
  width: min(100%, 300px);
  /* Matches save-concept-vial-signature-v1.png/-back-v1.png's real pixel
     size (1024×1536) exactly, so .vial-face > img's object-fit: contain
     never has to letterbox — without this, width and height were set
     independently per breakpoint, the rendered image floated inside empty
     space that shifted at every screen size, and .vial-auth-label's
     percentage-based QR/code overlay (calibrated against the image itself)
     drifted away from — sometimes outside — the printed label on it. */
  aspect-ratio: 1024 / 1536;
  align-self: center;
  justify-self: center;
  perspective: 1200px;
  isolation: isolate;
}
.vial-flip {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 28px;
  cursor: pointer;
  perspective: inherit;
  -webkit-tap-highlight-color: transparent;
}
.vial-flip:focus-visible {
  outline: 3px solid #26cfe2;
  outline-offset: 7px;
}
.vial-flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2,.72,.2,1);
  will-change: transform;
}
.vial-flip:hover .vial-flip-inner,
.vial-flip:focus-visible .vial-flip-inner,
.signature-vial.is-flipped .vial-flip-inner {
  transform: rotateY(180deg);
}
.vial-face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.vial-face > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  animation: none;
  filter: drop-shadow(0 28px 24px rgba(0, 18, 46, .3));
}
.vial-back { transform: rotateY(180deg); }
.vial-auth-label {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48.7%;
  display: grid;
  justify-items: center;
  width: 31%;
  transform: translateX(-50%);
}
.vial-auth-label #signature-demo-qr,
.vial-auth-label #signature-demo-qr canvas,
.vial-auth-label #signature-demo-qr img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}
.vial-auth-label strong {
  display: block;
  width: 125%;
  margin-top: 16%;
  color: #071b42;
  font: 800 clamp(12px, 1.15vw, 16px)/1 Manrope, sans-serif;
  letter-spacing: .16em;
  text-align: center;
}
@media (max-width: 1120px) {
  .product-panel {
    grid-template-columns: minmax(230px, 1fr) minmax(165px, .65fr);
    gap: 18px;
  }
}
@media (max-width: 900px) {
  .product-panel {
    grid-template-columns: minmax(250px, 1fr) minmax(180px, .7fr);
    max-width: none;
  }
  .signature-vial { width: min(100%, 260px); }
}
@media (max-width: 600px) {
  .product-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-copy { text-align: left; }
  .signature-vial {
    width: min(72vw, 270px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vial-flip-inner { transition: none; }
}

/* Revisão visual premium: portal e painel */
:root {
  --sc-navy: #061a3c;
  --sc-blue: #0b5fce;
  --sc-cyan: #20cde0;
  --sc-shadow: 0 24px 70px rgba(6, 31, 72, .12);
}
.verify-card,
.generator-card,
.admin-register,
.customer-dashboard {
  position: relative;
  isolation: isolate;
  box-shadow: var(--sc-shadow);
  border-color: rgba(28, 81, 146, .12);
}
.verify-card::before,
.generator-card::before,
.customer-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.72), transparent 34% 72%, rgba(18,156,218,.04));
}
.verify-card,
.generator-card,
.customer-dashboard,
.admin-summary article,
.customer-summary article {
  transform: perspective(1100px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.verify-card:hover,
.generator-card:hover,
.customer-dashboard:hover {
  box-shadow: 0 30px 85px rgba(6, 31, 72, .17);
  border-color: rgba(25, 122, 211, .2);
}
.primary,
.scan-button,
.instructions-button,
.invite-button,
.customers-head button,
.admin-logout,
.back-public {
  min-height: 44px;
  font-size: 14px;
}
.primary,
.scan-button,
.instructions-button,
.invite-button,
.support-fab {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.primary:hover,
.scan-button:hover,
.instructions-button:hover,
.invite-button:hover {
  transform: translateY(-2px);
}
.input-wrap:focus-within,
.admin-search:focus,
.generator-card input:focus,
.generator-card select:focus {
  box-shadow: 0 0 0 4px rgba(25, 149, 219, .12);
}
.support-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 16px 8px 8px;
  color: #fff;
  background: rgba(5, 27, 62, .92);
  border: 1px solid rgba(62, 208, 232, .32);
  border-radius: 999px;
  box-shadow: 0 14px 35px rgba(3, 23, 55, .25);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.support-fab span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #062150;
  background: linear-gradient(145deg, #61edf2, #20bde0);
  border-radius: 50%;
  font: 800 16px Manrope, sans-serif;
}
.support-fab strong { font: 750 13px Manrope, sans-serif; }
.support-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(3, 23, 55, .32); }
.support-dialog {
  width: min(92vw, 560px);
  padding: 0;
  color: var(--sc-navy);
  background: rgba(252, 254, 255, .98);
  border: 1px solid rgba(26, 91, 164, .14);
  border-radius: 24px;
  box-shadow: 0 35px 110px rgba(1, 18, 45, .35);
}
.support-dialog::backdrop { background: rgba(3, 17, 41, .58); backdrop-filter: blur(7px); }
.support-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e5edf6;
}
.support-head small { color: var(--sc-blue); font: 800 11px Manrope, sans-serif; letter-spacing: .12em; }
.support-head h2 { margin: 4px 0 0; font: 750 24px/1.2 Manrope, sans-serif; }
.support-head > button {
  width: 40px;
  height: 40px;
  color: #38506d;
  background: #edf3f9;
  border: 0;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}
.support-grid { display: grid; gap: 10px; padding: 20px 26px; }
.support-grid article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  padding: 14px;
  background: #f5f9fd;
  border: 1px solid #e5edf5;
  border-radius: 15px;
}
.support-grid article > span { color: var(--sc-blue); font: 800 12px Manrope, sans-serif; }
.support-grid strong { display: block; margin-bottom: 3px; font: 750 14px Manrope, sans-serif; }
.support-grid p { margin: 0; color: #60738b; font-size: 14px; line-height: 1.5; }
.support-scan { width: calc(100% - 52px); margin: 0 26px 26px; }

.admin-page { background: linear-gradient(145deg, #eff5fb 0%, #f9fbfd 45%, #eef5fb 100%); }
.admin-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(10, 87, 177, .075) .7px, transparent .7px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.admin-standalone { position: relative; }
.admin-head {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 190px;
  align-items: center;
  min-height: 190px;
  padding: 28px 34px;
  color: #fff;
  background: linear-gradient(125deg, #061a3c 0%, #092d68 67%, #0b5fce 140%);
  border: 1px solid rgba(75, 203, 235, .2);
  border-radius: 24px;
  box-shadow: 0 30px 75px rgba(5, 31, 71, .2);
}
.admin-head::before {
  content: "";
  position: absolute;
  inset: -80% -10% auto 35%;
  height: 300px;
  background: radial-gradient(circle, rgba(35, 205, 227, .2), transparent 68%);
  pointer-events: none;
}
.admin-head h1 { color: #fff; }
.admin-head p { color: #afc2da; }
.admin-head > div:first-child { position: relative; z-index: 2; }
.admin-head-visual { position: relative; align-self: stretch; }
.admin-head-visual .demo-badge { position: absolute; z-index: 3; top: 0; right: 0; }
.admin-head-visual figure {
  position: absolute;
  inset: -52px 0 -90px 12px;
  margin: 0;
  perspective: 900px;
}
.admin-head-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(0, 7, 25, .45));
  transform: rotateY(-13deg) rotateX(3deg);
}
.admin-grid { align-items: start; }
.admin-summary article,
.customer-summary article {
  background: linear-gradient(145deg, #fff, #f3f7fb);
  box-shadow: 0 10px 25px rgba(7, 42, 86, .07);
}
.admin-summary article strong,
.customer-summary article strong { color: #082e68; }
.admin-table-wrap,
.customer-table-wrap { box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(8, 41, 82, .06); }
.admin-table-wrap tbody tr,
.customer-table-wrap tbody tr { transition: background .18s ease, transform .18s ease; }
.admin-table-wrap tbody tr:hover,
.customer-table-wrap tbody tr:hover { background: #f1f7fd; }
.admin-login-card {
  box-shadow: 0 38px 120px rgba(0, 13, 35, .42);
  transform: perspective(900px) rotateX(1.5deg);
}
@media (max-width: 820px) {
  .admin-head { grid-template-columns: 1fr 115px; min-height: 170px; padding: 24px; }
  .admin-head-visual figure { inset: -20px -10px -45px 0; }
}
@media (max-width: 600px) {
  .support-fab { right: 14px; bottom: 78px; padding-right: 10px; }
  .support-fab strong { display: none; }
  .admin-head { grid-template-columns: 1fr; }
  .admin-head-visual { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .verify-card, .generator-card, .customer-dashboard, .admin-summary article, .customer-summary article { transform: none !important; }
}

/* Permissões administrativas de clientes */
.customer-profile-card.customer-blocked {
  border-color: rgba(184, 54, 52, .25);
  background: linear-gradient(145deg, #fff, #fff5f4);
}
.customer-permissions-panel {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #071d43, #0a397e);
  border: 1px solid rgba(77, 210, 235, .24);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(3, 25, 61, .18);
  color: #fff;
}
.permissions-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.permissions-heading small {
  color: #54dce9;
  font: 800 11px Manrope, sans-serif;
  letter-spacing: .11em;
}
.permissions-heading h3 {
  margin: 4px 0 0;
  color: #fff;
  font: 750 20px Manrope, sans-serif;
}
.permission-actions {
  display: grid;
  grid-template-columns: 1fr 1.45fr auto;
  gap: 12px;
  align-items: end;
}
.permission-actions form { min-width: 0; }
.permission-actions label {
  display: block;
  margin-bottom: 7px;
  color: #b8c9df;
  font-size: 12px;
  font-weight: 700;
}
.permission-actions form > div { display: flex; gap: 7px; }
.permission-actions select {
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0 34px 0 11px;
  color: #112f58;
  background: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  font-size: 12px;
}
.permission-actions button,
.serial-permission-button {
  min-height: 42px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.permission-actions form button {
  flex: 0 0 auto;
  color: #06204a;
  background: linear-gradient(145deg, #64e8ee, #27c7df);
}
.account-state-button.block { color: #7d2525; background: #ffe5e2; }
.account-state-button.activate { color: #0c5d42; background: #dff6e9; }
.admin-action-feedback { min-height: 1px; margin-top: 10px; color: #8ce8f0; font-size: 12px; }
.customer-product-list article {
  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
  align-items: center;
}
.serial-permission-button {
  color: #8b3130;
  background: #fff0ee;
  border: 1px solid #f1cfca;
}
.serial-permission-button[data-serial-action="restore"] {
  color: #146044;
  background: #e8f6ee;
  border-color: #c9e7d5;
}

/* Rotação funcional da ampola no painel administrativo */
.admin-vial-figure { perspective: 900px; }
.admin-vial-flip {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  perspective: inherit;
  -webkit-tap-highlight-color: transparent;
}
.admin-vial-flip:focus-visible {
  outline: 2px solid #55dfec;
  outline-offset: 5px;
}
.admin-vial-flip:hover .vial-flip-inner,
.admin-vial-flip:focus-visible .vial-flip-inner,
.admin-vial-figure.is-flipped .vial-flip-inner {
  transform: rotateY(180deg);
}
.admin-head-visual .admin-vial-flip img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 22px 20px rgba(0, 7, 25, .45));
}
.admin-vial-auth-label {
  top: 48.7%;
  width: 31%;
}
.admin-vial-auth-label #admin-signature-qr,
.admin-vial-auth-label #admin-signature-qr canvas,
.admin-vial-auth-label #admin-signature-qr img {
  position: static;
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  transform: none;
  filter: none;
}
.admin-vial-auth-label strong {
  width: 130%;
  margin-top: 15%;
  color: #071b42;
  font: 800 8px/1 Manrope, sans-serif;
  letter-spacing: .12em;
  text-align: center;
}
@media (max-width: 1050px) {
  .permission-actions { grid-template-columns: 1fr; }
  .account-state-button { width: 100%; }
}
@media (max-width: 720px) {
  .permissions-heading { flex-direction: column; }
  .permission-actions form > div { flex-direction: column; }
  .permission-actions form button { width: 100%; }
  .customer-product-list article { grid-template-columns: auto 1fr; }
  .customer-product-list article code,
  .customer-product-list article .status-pill,
  .customer-product-list article .serial-permission-button { grid-column: 2; }
}
@media (max-width: 820px) {
  .login-gate {
    padding-top: 88px;
  }
  .login-layout {
    grid-template-columns: 1fr;
    max-width: 470px;
  }
  .login-brand {
    position: absolute;
  }
  .login-language {
    position: absolute;
  }
  .login-card {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .login-gate {
    justify-content: flex-start;
  }
  .login-language {
    top: 18px;
    right: 16px;
  }
  .login-brand {
    top: 18px;
    left: 16px;
  }
  .login-brand > span:last-child {
    display: none;
  }
  .login-layout {
    gap: 16px;
  }
  .login-product-visual figcaption {
    left: 10px;
    right: 10px;
    bottom: 9px;
  }
  .login-card {
    padding: 21px;
  }
}
.brand-icon-only {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.brand-icon-only img,
.login-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.login-brand img {
  width: 58px;
  height: 58px;
}
.login-layout {
  width: min(1120px, 100%);
  grid-template-columns: minmax(470px, 1fr) minmax(390px, 440px);
}
.login-tutorial-wrap {
  display: grid;
  gap: 12px;
}
.login-tutorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.login-tutorial article {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d7e2ef;
  border-radius: 12px;
  padding: 11px;
  box-shadow: 0 8px 24px rgba(4, 35, 75, 0.06);
}
.login-tutorial article > b {
  color: #0b54aa;
  font: 800 10px Manrope;
}
.login-tutorial article span {
  font-size: 10px;
  line-height: 1.35;
  color: #68798c;
}
.login-tutorial article strong {
  display: block;
  color: #173052;
  font-size: 11px;
  margin-bottom: 2px;
}
.original-only {
  margin: -10px 0 18px;
  padding: 11px 13px;
  border-left: 3px solid #0b54aa;
  background: #eef5fc;
  color: #0b3975;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.55px;
  line-height: 1.45;
}
.hero:before,
.bonus-section:before {
  content: "";
  position: absolute;
  background: url("./save-concept-mark-v2.png") center/contain no-repeat;
  pointer-events: none;
  opacity: 0.025;
}
.hero:before {
  width: 360px;
  height: 360px;
  left: 3%;
  bottom: -75px;
}
.bonus-section {
  position: relative;
  overflow: hidden;
}
.bonus-section:before {
  width: 430px;
  height: 430px;
  right: -90px;
  top: -120px;
  filter: grayscale(1);
}
.topbar {
  box-shadow: 0 8px 30px rgba(7, 31, 76, 0.04);
}
.login-card {
  box-shadow: 0 20px 65px rgba(4, 35, 75, 0.12);
  border-color: #dbe4ef;
}
@media (max-width: 900px) {
  .login-layout {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  .login-tutorial {
    grid-template-columns: 1fr;
  }
  .login-tutorial article {
    padding: 10px 12px;
  }
}
@media (max-width: 520px) {
  .brand-icon-only img,
  .login-brand img {
    width: 42px;
    height: 42px;
  }
  .login-tutorial {
    display: none;
  }
  .original-only {
    font-size: 9px;
  }
}

/* Ajuda contextual do login: invisível até hover, foco ou toque. */
.login-layout {
  display: block;
  width: min(460px, 100%);
}
.login-help-wrap {
  position: relative;
  margin-top: 8px;
}
.instructions-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 10px;
}
.instructions-button:hover,
.instructions-button:focus-visible {
  background: #eef5fc;
  outline: none;
}
.help-icon {
  width: 22px;
  height: 22px;
  border: 1px solid #9ab7d8;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 13px Manrope;
  background: #fff;
}
.login-help-popover {
  position: absolute;
  z-index: 120;
  width: min(510px, calc(100vw - 48px));
  right: calc(100% + 20px);
  top: 50%;
  padding: 12px;
  border: 1px solid #cddbea;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 30px 90px rgba(4, 35, 75, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(12px, -50%) scale(0.97);
  transform-origin: right center;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.login-help-popover:after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-top: 1px solid #cddbea;
  border-right: 1px solid #cddbea;
  transform: translateY(-50%) rotate(45deg);
}
.login-help-wrap:hover .login-help-popover,
.login-help-wrap:focus-within .login-help-popover,
.login-help-wrap.open .login-help-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}
.login-help-popover .login-product-visual {
  border-radius: 15px;
  box-shadow: none;
  animation: none;
}
.login-help-popover .login-product-visual figcaption {
  left: 10px;
  right: 10px;
  bottom: 9px;
  padding: 9px 11px;
}
.login-help-popover .login-tutorial {
  margin-top: 9px;
}
.login-help-popover .login-tutorial article {
  padding: 9px;
}
.login-scan {
  margin-top: 4px;
}
@media (max-width: 1050px) {
  .login-help-popover {
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 10px) scale(0.97);
    transform-origin: bottom center;
  }
  .login-help-wrap:hover .login-help-popover,
  .login-help-wrap:focus-within .login-help-popover,
  .login-help-wrap.open .login-help-popover {
    transform: translate(-50%, 0) scale(1);
  }
  .login-help-popover:after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -8px;
    transform: translateX(-50%) rotate(135deg);
  }
}
@media (max-width: 520px) {
  .login-help-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 50%;
    bottom: auto;
    width: auto;
    max-height: calc(100dvh - 28px);
    overflow: auto;
    transform: translateY(-46%) scale(0.97);
    transform-origin: center;
  }
  .login-help-wrap:hover .login-help-popover,
  .login-help-wrap:focus-within .login-help-popover,
  .login-help-wrap.open .login-help-popover {
    transform: translateY(-50%) scale(1);
  }
  .login-help-popover:after {
    display: none;
  }
  .login-help-popover .login-tutorial {
    display: grid;
  }
  .login-help-popover .login-product-visual figcaption {
    position: static;
    border-radius: 0;
  }
  .login-help-popover .login-tutorial article {
    padding: 8px;
  }
  .login-help-popover .login-tutorial article:nth-child(3) {
    display: none;
  }
}

/* Histórico permanente e progressão do Clube Save. */
.history-note {
  margin: 7px 0 0;
  color: #718095;
  font-size: 13px;
}
.history-total {
  min-width: 104px;
  padding: 12px 16px;
  border: 1px solid #d9e3ee;
  border-radius: 13px;
  background: #fff;
  text-align: center;
}
.history-total strong {
  display: block;
  font: 800 25px Manrope;
  color: #0b54aa;
}
.history-total span {
  font-size: 11px;
  color: #718095;
}
.history .table-wrap {
  max-height: 560px;
  overflow: auto;
}
.history thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.history time {
  white-space: nowrap;
  color: #405872;
}
.level-badge {
  min-width: 175px;
  padding: 14px 17px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.09);
}
.level-badge small {
  display: block;
  color: #8ebbe8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.level-badge strong {
  display: block;
  font: 800 23px Manrope;
  margin: 4px 0;
}
.level-badge span {
  font-size: 12px;
  color: #bed0e5;
}
.level-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  font-size: 12px;
  color: #bed0e5;
}
.level-progress-head strong {
  color: #fff;
}
.level-journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: 30px;
}
.level-journey article {
  position: relative;
  min-height: 158px;
  padding: 16px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.level-journey article > span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #8ebbe8;
}
.level-journey article.current {
  background: rgba(255, 255, 255, 0.13);
  border-color: #6cb8ff;
}
.level-journey article.complete {
  border-color: rgba(111, 207, 151, 0.5);
}
.level-journey article.complete > span {
  background: #2f9b65;
  color: #fff;
  border-color: #2f9b65;
}
.level-journey small {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: #8ebbe8;
}
.level-journey strong {
  display: block;
  font: 800 16px Manrope;
  margin-top: 3px;
}
.level-journey p {
  font-size: 11px;
  line-height: 1.4;
  color: #bed0e5;
  margin: 7px 0 0;
}
.level-journey article > b {
  margin-top: auto;
  font-size: 11px;
  color: #f1ca65;
}
@media (max-width: 900px) {
  .level-journey {
    grid-template-columns: repeat(2, 1fr);
  }
  .level-journey article:last-child {
    grid-column: 1/-1;
  }
  .history .section-title {
    align-items: flex-start;
  }
}
@media (max-width: 520px) {
  .history .section-title {
    flex-direction: row;
  }
  .history-total {
    min-width: 86px;
    padding: 10px;
  }
  .level-progress-head {
    flex-direction: column;
    gap: 5px;
  }
  .level-journey {
    grid-template-columns: 1fr;
  }
  .level-journey article,
  .level-journey article:last-child {
    grid-column: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .level-journey article > b {
    margin: 0;
  }
  .level-badge {
    width: 100%;
  }
}

/* Acesso administrativo discreto e protegido. */
.admin-footer-link {
  align-self: center;
  margin-left: auto;
  color: inherit;
  text-decoration: none;
  font-size: 9px;
  letter-spacing: 0.8px;
  opacity: 0.22;
  transition: opacity 0.2s;
}
.admin-footer-link:hover,
.admin-footer-link:focus-visible {
  opacity: 0.75;
}
.admin-login-gate {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at 30% 20%, #163e78, #061630 70%);
}
.admin-login-gate[hidden] {
  display: none;
}
.admin-login-card {
  width: min(100%, 410px);
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 35px 100px rgba(0, 15, 40, 0.45);
}
.admin-login-card > img {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin: 0 auto 18px;
}
.admin-login-card > span {
  display: block;
  text-align: center;
  color: #0b54aa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
}
.admin-login-card h1 {
  text-align: center;
  font-size: 29px;
  letter-spacing: -1px;
  margin: 8px 0;
}
.admin-login-card > p {
  text-align: center;
  color: #68798c;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
}
.admin-login-card input {
  width: 100%;
  height: 50px;
  border: 1px solid #cdd8e5;
  border-radius: 10px;
  padding: 0 14px;
  margin-bottom: 15px;
  font: 500 15px "DM Sans";
  outline: none;
}
.admin-login-card input:focus {
  border-color: #0b54aa;
  box-shadow: 0 0 0 3px rgba(11, 84, 170, 0.1);
}
.admin-login-card > a {
  display: block;
  text-align: center;
  margin-top: 17px;
  color: #60748c;
  text-decoration: none;
  font-size: 13px;
}
.admin-login-error {
  min-height: 20px;
  margin-top: 10px;
  color: #a43b3e;
  text-align: center;
  font-size: 13px;
}
.admin-locked > .topbar,
.admin-locked > .admin {
  visibility: hidden;
}
.admin-logout {
  border: 1px solid #cbd9e8;
  background: #fff;
  color: #8a3d3e;
  border-radius: 9px;
  padding: 9px 13px;
  font-weight: 800;
  cursor: pointer;
}
@media (max-width: 620px) {
  footer {
    flex-wrap: wrap;
  }
  .admin-footer-link {
    width: 100%;
    text-align: right;
  }
  .admin-login-card {
    padding: 25px;
  }
  .admin-page .admin-language {
    margin-left: auto;
  }
  .admin-logout {
    order: 4;
    margin-left: auto;
  }
}

/* Carteira de benefícios ativados na conta do cliente. */
.benefits-wallet {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}
.wallet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.wallet-head > div > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #8ebbe8;
}
.wallet-head h3 {
  font: 800 24px Manrope;
  margin: 5px 0;
}
.wallet-head p {
  max-width: 610px;
  margin: 0;
  color: #bed0e5;
  font-size: 13px;
  line-height: 1.5;
}
.wallet-head > strong {
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 99px;
  background: #fff;
  color: #0b3975;
  font-size: 12px;
}
.active-benefits {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.active-benefits article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: #fff;
  color: #0b244b;
}
.benefit-check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e4f4eb;
  color: #167249;
  font-weight: 900;
}
.active-benefits article div {
  min-width: 0;
}
.active-benefits small {
  display: block;
  color: #637a91;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.active-benefits strong {
  display: block;
  font: 800 15px Manrope;
  margin: 3px 0;
}
.active-benefits code {
  font: 800 16px Manrope;
  letter-spacing: 1.4px;
  color: #0b54aa;
}
.active-benefits button {
  border: 1px solid #bcd0e7;
  background: #eef5fc;
  color: #0b54aa;
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}
.wallet-empty {
  padding: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  text-align: center;
  color: #adc5df;
  font-size: 13px;
}
.coupon-output.show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.coupon-output.show span {
  font-weight: 800;
}
.coupon-output.show strong {
  margin: 0;
}
@media (max-width: 620px) {
  .benefits-wallet {
    padding: 18px;
  }
  .wallet-head {
    flex-direction: column;
  }
  .active-benefits article {
    grid-template-columns: auto 1fr;
  }
  .active-benefits article button {
    grid-column: 1/-1;
    width: 100%;
  }
  .coupon-output.show {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Resumo permanente da conta junto ao ID do produto. */
.user-account-summary {
  display: flex;
  align-items: stretch;
  border: 1px solid #cbd9e8;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(4, 35, 75, 0.06);
}
.account-id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 11px;
  border-right: 1px solid #e0e7ef;
}
.account-id small,
.account-status small {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #718095;
}
.account-id strong {
  font: 800 13px Manrope;
  color: #173b68;
  margin-top: 3px;
}
.account-status {
  display: flex;
  align-items: stretch;
}
.header-level,
.header-benefits {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 10px;
  text-decoration: none;
}
.header-level {
  border-right: 1px solid #e0e7ef;
}
.header-level b {
  font: 800 12px Manrope;
  color: #0b54aa;
  margin-top: 3px;
}
.header-benefits {
  align-items: center;
  background: #eef5fc;
  color: #0b54aa;
}
.header-benefits b {
  font: 800 14px Manrope;
}
.header-benefits small {
  color: #55708d;
}
.user-account-summary .user-session {
  display: flex;
  border: 0;
  border-left: 1px solid #e0e7ef;
  border-radius: 0;
  padding: 0 10px;
  box-shadow: none;
}
.user-account-summary .user-session:hover {
  background: #fff1f1;
}
.user-account-summary .user-session small {
  font-size: 10px;
  font-weight: 800;
}
@media (max-width: 1150px) {
  .account-id {
    display: none;
  }
  .topbar {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: 70px;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .user-account-summary {
    order: 6;
    width: 100%;
    margin-top: 7px;
  }
  .account-id {
    display: flex;
  }
  .account-status {
    margin-left: auto;
  }
  .user-account-summary .user-session {
    display: flex;
  }
  .header-level,
  .header-benefits {
    min-width: 78px;
    align-items: center;
  }
  .hero {
    padding-top: 38px;
  }
}
@media (max-width: 390px) {
  .account-id {
    padding-left: 8px;
    padding-right: 8px;
  }
  .header-level,
  .header-benefits {
    min-width: 68px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* Dashboard administrativo de clientes e benefícios. */
.verification-privacy {
  margin: -8px 0 18px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f6f8fb;
  color: #60748c;
  font-size: 12px;
  line-height: 1.5;
}
.customer-dashboard {
  margin-top: 24px;
  padding: 26px;
  border: 1px solid #d9e3ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(4, 35, 75, 0.07);
}
.customers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.customers-head span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0b54aa;
}
.customers-head h2 {
  font: 800 27px Manrope;
  margin: 6px 0;
}
.customers-head p {
  margin: 0;
  color: #68798c;
  font-size: 14px;
}
.customers-head button {
  border: 1px solid #bed0e3;
  border-radius: 10px;
  background: #eef5fc;
  color: #0b54aa;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}
.customer-head-actions { display: flex; align-items: center; gap: 10px; }
.customer-head-actions a { display: inline-flex; min-height: 40px; align-items: center; border-radius: 10px; padding: 0 14px; background: #0b54aa; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
@media (max-width: 640px) {
  .customer-head-actions { width: 100%; }
  .customer-head-actions a, .customer-head-actions button { flex: 1; justify-content: center; }
}

/* VerificaFarma 2026 — clean clinical system */
:root {
  --ink: #102a4b;
  --green: #0b54aa;
  --green2: #0876d9;
  --mint: #e7f1fb;
  --cream: #f4f8fc;
  --paper: #fff;
  --line: #dce5df;
  --muted: #68798c;
  --shadow: 0 22px 70px rgba(7,31,76, .10);
}
body { background: #f4f8fc; letter-spacing: -.01em; }
.shell { max-width: none; }
.topbar {
  height: 76px;
  border-color: rgba(206, 220, 212, .85);
  background: rgba(244, 247, 245, .88);
  box-shadow: 0 8px 30px rgba(11,84,170, .04);
  backdrop-filter: blur(18px) saturate(1.25);
}
.topbar nav a { font-size: 13px; letter-spacing: .01em; }
.topbar nav a.active:after { height: 2px; }
.hero {
  min-height: calc(100vh - 76px);
  padding-top: clamp(54px, 7vw, 96px);
  padding-bottom: clamp(54px, 7vw, 96px);
  background:
    linear-gradient(rgba(11, 84, 170, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 84, 170, .035) 1px, transparent 1px),
    radial-gradient(circle at 82% 20%, rgba(176, 216, 190, .45), transparent 34%),
    #f4f8fc;
  background-size: 32px 32px, 32px 32px, auto, auto;
}
.hero:after { content: "AUTH / 03"; right: 5%; top: 8%; font: 700 10px/1.2 monospace; letter-spacing: .2em; color: rgba(11, 84, 170, .4); }
h1 { letter-spacing: -.055em; }
.verify-card,
.generator-card,
.admin-register,
.customer-dashboard,
.history,
.how,
.bonus-section {
  border: 1px solid rgba(211, 224, 216, .92);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(7,31,76, .07);
}
.verify-card { padding: clamp(26px, 4vw, 42px); }
.verify-card:before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -82px;
  top: -82px;
  border: 1px dashed rgba(11, 84, 170, .22);
  border-radius: 50%;
}
input, select, textarea {
  border-color: #d3dfeb !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: inset 0 1px 2px rgba(7,31,76, .025) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #2783ca !important;
  box-shadow: 0 0 0 4px rgba(11, 84, 170, .10) !important;
}
button.primary, .primary {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0b63bd, #073e82) !important;
  box-shadow: 0 13px 28px rgba(11, 84, 170, .20);
}
.product-visual,
.admin-vial-figure {
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
  filter: drop-shadow(0 34px 36px rgba(7,31,76, .18));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.product-visual:hover,
.admin-vial-figure:hover { transform: perspective(1100px) rotateY(0) rotateX(0) translateY(-6px); }
.customer-profile-card {
  border-color: #dce7f1;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 45%, #f1f7fd);
  box-shadow: 0 16px 44px rgba(11,84,170, .07);
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.customer-profile-card:hover { transform: perspective(900px) translateY(-5px) rotateX(1deg); border-color: #bdd5e9; box-shadow: 0 24px 55px rgba(11,84,170, .12); }
.customer-avatar { border-radius: 15px; background: linear-gradient(145deg, #0b63bd, #071f4c); box-shadow: 0 8px 18px rgba(11,84,170,.2); }
.customer-profile-metrics span,
.customer-summary article,
.admin-summary article { background: #eef5fc; border-color: #dfe8f1; }
.customer-profile-metrics strong,
.customer-summary strong { color: #0b54aa; }
.customer-card-foot button,
.customer-head-actions a { background: #0b54aa; }
.customer-table-wrap,
.admin-table-wrap { border-radius: 18px; border-color: #dce5df; box-shadow: 0 14px 38px rgba(11,84,170,.05); }
.customer-table-wrap thead,
.admin-table-wrap thead { background: rgba(238, 244, 240, .96); backdrop-filter: blur(10px); }
.admin-page { background: radial-gradient(circle at 90% 0%, #e7f1fb, transparent 26%), #f4f8fc; }
.admin-head { border-radius: 26px; overflow: hidden; background: linear-gradient(130deg, #071f4c, #0b54aa); box-shadow: 0 26px 70px rgba(7,31,76,.18); }
.admin-login-gate { background: radial-gradient(circle at 70% 20%, #d9eafa, transparent 38%), #f2f6f3; }
.admin-login-card { border: 1px solid #d7e4f0; border-radius: 26px; box-shadow: 0 30px 90px rgba(7,31,76,.16); }
.customer-detail-head { background: linear-gradient(120deg, #071f4c, #0b63bd); }
.status-pill.authentic { background: #e7f5ff; color: #0b54aa; }
@media (max-width: 760px) {
  .topbar { height: 68px; }
  .hero { min-height: auto; background-size: 24px 24px, 24px 24px, auto, auto; }
  .verify-card, .generator-card, .admin-register, .customer-dashboard { border-radius: 20px; }
  .product-visual, .admin-vial-figure { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .product-visual, .admin-vial-figure, .customer-profile-card { transform: none !important; transition: none !important; }
}
.customer-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.customer-summary article {
  padding: 17px;
  border: 1px solid #e0e7ef;
  border-radius: 13px;
  background: #f8fafd;
}
.customer-summary small {
  display: block;
  color: #718095;
  font-size: 11px;
}
.customer-summary strong {
  display: block;
  margin-top: 5px;
  font: 800 28px Manrope;
  color: #0b54aa;
}
.customer-dashboard > label {
  margin-top: 4px;
}
.customer-table-wrap {
  margin-top: 14px;
  max-height: 570px;
  overflow: auto;
  border: 1px solid #dfe6ee;
  border-radius: 13px;
}
.customer-table-wrap table {
  min-width: 980px;
}
.customer-table-wrap thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.customer-date {
  display: block;
  margin-top: 5px;
  color: #718095;
  white-space: nowrap;
}
.serial-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}
.serial-tags span,
.serial-tags b {
  padding: 4px 7px;
  border-radius: 7px;
  background: #eef5fc;
  color: #0b54aa;
  font: 700 10px Manrope;
}

.customer-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.customer-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 24px;
}
.customer-profile-card {
  padding: 20px;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f8fbff);
  box-shadow: 0 12px 32px rgba(10, 39, 83, 0.06);
}
.customer-profile-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.customer-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #082c65;
  color: #fff;
  font-weight: 800;
}
.customer-profile-top small,
.customer-profile-top time,
.customer-card-foot small {
  display: block;
  color: #718095;
  font-size: 12px;
}
.customer-profile-top strong {
  display: block;
  color: #071f4c;
  overflow-wrap: anywhere;
}
.customer-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 14px;
}
.customer-profile-metrics span {
  padding: 10px;
  border-radius: 12px;
  background: #eef5ff;
}
.customer-profile-metrics small,
.customer-profile-metrics strong {
  display: block;
}
.customer-profile-metrics small {
  color: #6b7f98;
  font-size: 12px;
}
.customer-profile-metrics strong {
  color: #082c65;
  font-size: 20px;
}
.customer-medicine-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 31px;
}
.customer-medicine-tags span,
.customer-medicine-tags b {
  padding: 6px 9px;
  border-radius: 999px;
  background: #e8f8f4;
  color: #096b5a;
  font-size: 12px;
}
.customer-card-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e7edf4;
}
.customer-card-foot button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 13px;
  background: #082c65;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.customer-cards-empty {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: #718095;
  border: 1px dashed #ccd8e7;
  border-radius: 16px;
}
.customer-detail-dialog {
  width: min(960px, calc(100% - 28px));
  max-height: min(88vh, 900px);
  border: 0;
  border-radius: 22px;
  padding: 0;
  color: #14253c;
  box-shadow: 0 30px 90px rgba(3, 18, 44, 0.3);
}
.customer-detail-dialog::backdrop {
  background: rgba(3, 18, 44, 0.66);
  backdrop-filter: blur(4px);
}
.customer-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  background: #071f4c;
  color: #fff;
}
.customer-detail-head small {
  color: #8edfd4;
  letter-spacing: 0.12em;
}
.customer-detail-head h2 {
  margin: 3px 0 0;
}
.customer-detail-head button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 25px;
}
#customer-detail-content {
  padding: 24px 26px 30px;
}
.customer-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.customer-detail-summary article {
  padding: 15px;
  border-radius: 14px;
  background: #eef5ff;
}
.customer-detail-summary small,
.customer-detail-summary strong {
  display: block;
}
.customer-detail-summary small {
  color: #6b7f98;
}
.customer-detail-summary strong {
  margin-top: 4px;
  color: #071f4c;
}
.customer-detail-section {
  margin-top: 26px;
}
.customer-detail-section > div:first-child > small {
  color: #168b7a;
  font-weight: 800;
  letter-spacing: .1em;
}
.customer-detail-section h3 {
  margin: 4px 0 12px;
}
.customer-product-list {
  display: grid;
  gap: 8px;
}
.customer-product-list article {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e1e9f2;
  border-radius: 13px;
}
.customer-product-list small,
.customer-product-list time {
  display: block;
  color: #718095;
  font-size: 12px;
}
.medicine-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #e8f8f4;
  color: #08705e;
  font-weight: 800;
}
.customer-metadata-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.customer-metadata-grid > div {
  padding: 13px;
  border-radius: 12px;
  background: #f5f8fc;
}
.customer-metadata-grid dt {
  color: #718095;
  font-size: 12px;
}
.customer-metadata-grid dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.customer-event-list {
  display: grid;
  gap: 7px;
}
.customer-event-list article {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid #e5ebf2;
}
.customer-event-list time,
.customer-event-list span {
  color: #66788e;
  font-size: 13px;
}
@media (max-width: 820px) {
  .customer-summary,
  .customer-detail-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .customer-card-grid {
    grid-template-columns: 1fr;
  }
  .customer-product-list article {
    grid-template-columns: auto 1fr;
  }
  .customer-metadata-grid,
  .customer-event-list {
    grid-template-columns: 1fr;
  }
}
.customer-level-pill {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 99px;
  background: #e8f0fb;
  color: #0b54aa;
  font-size: 11px;
  font-weight: 800;
}
.customer-points {
  display: block;
  margin-top: 7px;
  font: 800 13px Manrope;
  color: #173b68;
}
.customer-benefits-list {
  display: grid;
  gap: 6px;
}
.customer-benefits-list > span {
  display: flex;
  flex-direction: column;
  padding: 7px 9px;
  border-radius: 9px;
  background: #f1f7fd;
}
.customer-benefits-list strong {
  font-size: 11px;
  color: #176443;
}
.customer-benefits-list code {
  margin-top: 2px;
  font: 800 11px Manrope;
  color: #0b54aa;
}
.customer-benefits-list small {
  color: #7a8795;
}
.next-reward {
  display: inline-flex;
  padding: 7px 9px;
  border-radius: 9px;
  background: #fff4da;
  color: #8a5a14;
  font-size: 11px;
  font-weight: 800;
}
.next-reward.complete {
  background: #e7f4eb;
  color: #176443;
}
@media (max-width: 720px) {
  .customer-dashboard {
    padding: 18px;
  }
  .customers-head {
    flex-direction: column;
  }
  .customer-summary {
    grid-template-columns: 1fr;
  }
  .customers-head button {
    width: 100%;
  }
}

/* Assinatura interativa Save Concept */
html {
  scroll-behavior: smooth;
  scrollbar-color: #1473e6 #eaf0f7;
  scrollbar-width: thin;
}
body::-webkit-scrollbar { width: 9px; }
body::-webkit-scrollbar-track { background: #eaf0f7; }
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #08cfe1, #175bd8);
  border: 2px solid #eaf0f7;
  border-radius: 99px;
}
.scroll-signature {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: 3px;
  pointer-events: none;
  background: rgba(10, 42, 84, .06);
}
.scroll-signature i {
  display: block;
  width: 100%;
  height: var(--scroll-progress, 0%);
  background: linear-gradient(180deg, #11d7df, #1162db 70%, #072f80);
  box-shadow: 0 0 12px rgba(17, 98, 219, .5);
}
.product-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.product-panel::after {
  content: "S";
  position: absolute;
  right: -4%;
  bottom: -23%;
  z-index: -1;
  font: 800 clamp(220px, 30vw, 480px)/.8 Manrope, sans-serif;
  color: rgba(255, 255, 255, .025);
  transform: rotate(-8deg);
  pointer-events: none;
}
.signature-vial {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(42vw, 370px);
  height: clamp(390px, 53vw, 610px);
  margin: 0;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.signature-vial img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 35px 35px rgba(0, 15, 38, .46));
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(18px);
  transition: transform .18s ease-out, filter .35s ease;
  animation: vial-breathe 5.5s ease-in-out infinite;
  will-change: transform;
}
.signature-vial:hover img {
  filter: drop-shadow(0 42px 42px rgba(0, 21, 55, .58));
}
.vial-halo {
  position: absolute;
  inset: 14% -18% 4%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(32, 216, 244, .33), rgba(18, 96, 220, .12) 38%, transparent 70%);
  filter: blur(4px);
  transition: background-position .2s ease;
}
.vial-orbit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 118%;
  aspect-ratio: 1;
  border: 1px solid rgba(64, 210, 242, .23);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
}
.vial-orbit::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 47%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #45ddf0;
  box-shadow: 0 0 18px #45ddf0;
}
.vial-orbit-one { animation: orbit-spin 8s linear infinite; }
.vial-orbit-two {
  width: 92%;
  opacity: .55;
  animation: orbit-spin-reverse 11s linear infinite;
}
.signature-vial figcaption {
  position: absolute;
  right: -3%;
  bottom: 8%;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 9px;
  min-width: 205px;
  padding: 11px 15px;
  color: #fff;
  background: rgba(4, 20, 47, .74);
  border: 1px solid rgba(102, 223, 241, .25);
  border-radius: 14px;
  box-shadow: 0 16px 35px rgba(0, 11, 31, .24);
  backdrop-filter: blur(14px);
}
.signature-vial figcaption > span {
  grid-row: 1 / 3;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42e4c2;
  box-shadow: 0 0 0 5px rgba(66, 228, 194, .12);
}
.signature-vial figcaption strong { font: 750 12px Manrope, sans-serif; }
.signature-vial figcaption small { color: #a9bbd1; font-size: 10px; }
@keyframes vial-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}
@keyframes orbit-spin-reverse {
  to { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(-360deg); }
}
.reveal-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s cubic-bezier(.2,.75,.25,1), transform .72s cubic-bezier(.2,.75,.25,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-ready.is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .signature-vial { width: min(72vw, 340px); height: 450px; }
  .signature-vial figcaption { right: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .signature-vial img, .vial-orbit-one, .vial-orbit-two { animation: none !important; transform: none; }
  .reveal-ready { opacity: 1; transform: none; transition: none; }
}

/* Interações finais: transições de menus e experiência touch/mobile */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 36%, rgba(25, 207, 226, .08) 50%, transparent 64%);
  transform: translateX(-100%);
}
body.ui-transitioning::after { animation: ui-sweep .5s cubic-bezier(.2,.7,.2,1); }
@keyframes ui-sweep {
  0% { opacity: 0; transform: translateX(-100%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
.section-arrival { animation: section-arrival .7s cubic-bezier(.2,.75,.2,1); }
@keyframes section-arrival {
  0% { opacity: .65; transform: translateY(10px) scale(.995); }
  100% { opacity: 1; transform: none; }
}
.topbar a,
.mobile-nav a,
.mobile-nav button,
.admin-topbar button,
.admin button {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.topbar a:active,
.mobile-nav a:active,
.mobile-nav button:active,
.admin button:active { transform: scale(.96); }

@media (max-width: 600px) {
  .product-panel { padding-bottom: 8px; }
  .signature-vial {
    width: min(78vw, 286px);
    height: min(118vw, 430px);
    min-height: 350px;
    margin-inline: auto;
  }
  .vial-auth-label { width: 33%; }
  .vial-auth-label strong {
    margin-top: 13%;
    font-size: clamp(11px, 3.4vw, 14px);
  }
  .vial-flip::after {
    content: "Toque para ver QR Code e serial";
    position: absolute;
    left: 50%;
    bottom: 1px;
    z-index: 6;
    width: max-content;
    max-width: 92vw;
    padding: 7px 11px;
    color: #dffbff;
    background: rgba(4, 24, 55, .82);
    border: 1px solid rgba(70, 221, 238, .3);
    border-radius: 999px;
    font: 700 11px/1.2 Manrope, sans-serif;
    letter-spacing: .02em;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
  }
  .admin-head-visual { min-height: 310px; }
  .admin-vial-figure { width: min(62vw, 210px); height: 290px; }
}
@media (hover: none) {
  .vial-flip:hover .vial-flip-inner,
  .admin-vial-flip:hover .vial-flip-inner { transform: none; }
  .signature-vial.is-flipped .vial-flip-inner,
  .admin-vial-figure.is-flipped .vial-flip-inner { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.ui-transitioning::after,
  .section-arrival { animation: none; }
}

/* Ícone próprio para ações de leitura e selo de autenticação */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.qr-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: currentColor;
  border: 3px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor 0 0) 3px 3px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) 12px 3px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) 3px 12px / 4px 4px no-repeat,
    linear-gradient(currentColor 0 0) 11px 11px / 3px 3px no-repeat,
    linear-gradient(currentColor 0 0) 15px 15px / 2px 2px no-repeat;
  box-sizing: border-box;
}
.icon-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.scan-button:has(.visually-hidden) { min-width: 52px; padding-inline: 14px; }
.serial-instruction {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 14px;
  color: #52647a;
  font-size: 14px;
  line-height: 1.5;
}
.serial-instruction::before {
  content: "i";
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #075ab8;
  background: #e7f5ff;
  border-radius: 50%;
  font: 800 13px/1 Manrope, sans-serif;
}

.consent-banner {
  position: fixed;
  z-index: 10020;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
  padding: 20px 22px;
  color: #eef8ff;
  background: rgba(4, 22, 50, .97);
  border: 1px solid rgba(65, 213, 231, .28);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 10, 30, .4);
  backdrop-filter: blur(16px);
}
.consent-banner[hidden] { display: none; }
.consent-banner small { color: #6fe5ee; font: 750 11px/1.3 Manrope, sans-serif; letter-spacing: .13em; }
.consent-banner h2 { margin: 5px 0 4px; font-size: 20px; }
.consent-banner p { max-width: 720px; margin: 0; color: #bfd0e4; font-size: 14px; line-height: 1.55; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.consent-actions button { min-height: 42px; padding: 0 14px; color: #e8f6ff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; cursor: pointer; }
.consent-actions button.primary { background: linear-gradient(135deg, #0a75db, #11cbd8); border-color: transparent; }
.consent-dialog { width: min(92vw, 620px); padding: 0; color: #102a4b; background: #fff; border: 0; border-radius: 24px; box-shadow: 0 30px 100px rgba(0, 19, 50, .34); }
.consent-dialog::backdrop { background: rgba(1, 12, 30, .68); backdrop-filter: blur(5px); }
.consent-options { display: grid; gap: 10px; padding: 18px 22px; }
.consent-options label { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 14px; background: #f5f9fd; border: 1px solid #deebf6; border-radius: 14px; }
.consent-options label span { display: grid; gap: 3px; }
.consent-options label small { color: #64778c; font-size: 13px; line-height: 1.4; }
.consent-options input { width: 21px; height: 21px; accent-color: #0876d9; }
.consent-dialog > .primary { width: calc(100% - 44px); margin: 0 22px 22px; }
.privacy-boundary { margin: 14px 0 0; padding: 12px 14px; color: #36556f; background: #edf7fc; border-left: 3px solid #18a9c1; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.consent-status-grid dd { font-weight: 750; }
@media (max-width: 720px) {
  .consent-banner { grid-template-columns: 1fr; right: 10px; bottom: 78px; left: 10px; gap: 14px; padding: 17px; }
  .consent-actions { justify-content: stretch; }
  .consent-actions button { flex: 1 1 135px; }
}

/* ==========================================================================
   Save Concept — Cyber Premium (2026 refresh)
   Deep black + electric blue. One identity, not a light/dark toggle — the
   whole customer portal reads this layer last, so it wins over every color
   declared earlier in this file. Rather than hunting down and flipping
   hundreds of scattered hex values throughout the file (high risk of
   breaking contrast somewhere invisible without a way to check visually),
   this overrides every CONTAINER-level surface the customer actually sees,
   as background+text PAIRS, so nothing goes dark-on-dark or light-on-light.
   Deep list/table-row internals inside Histórico/Bónus inherit from their
   container; flag anything that still reads wrong so it can get its own
   pass — that's a faster, safer loop than a blind global rewrite.
   ========================================================================== */
:root {
  --ink: #f2f6fc;
  --green: #2f7bff;
  --green2: #4c8fff;
  --mint: #101a2c;
  --cream: #050810;
  --paper: #0b1220;
  --line: rgba(122, 162, 255, .16);
  --muted: #8ca0be;
  --amber: #f5a623;
  --blue: #2f7bff;
  --danger: #ff5468;
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, .65);
  --electric: #2f7bff;
  --neon: #22d3ff;
  --surface-2: #101a2c;
  --surface-3: #16223a;
  --glow: 0 0 40px rgba(47, 123, 255, .22);
}
html { color-scheme: dark; }
body { background: var(--cream); color: var(--ink); }
.topbar {
  border-color: var(--line) !important;
  background: rgba(5, 8, 16, .78) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35) !important;
}
.topbar nav a { color: var(--muted); }
.topbar nav a.active { color: var(--ink); }
.topbar nav a.active:after { background: var(--electric); box-shadow: 0 0 12px rgba(47, 123, 255, .6); }
footer, .mobile-nav {
  background: rgba(5, 8, 16, .92) !important;
  border-color: var(--line) !important;
  color: var(--muted);
}
.mobile-nav a:first-child { color: var(--electric) !important; background: rgba(47, 123, 255, .12) !important; }
.hero {
  background:
    linear-gradient(rgba(47, 123, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 123, 255, .05) 1px, transparent 1px),
    radial-gradient(circle at 82% 14%, rgba(47, 123, 255, .16), transparent 40%),
    var(--cream) !important;
}
.hero:before, .bonus-section:before { opacity: .05; filter: invert(1); }
.verify-card,
.generator-card,
.admin-register,
.customer-dashboard,
.history,
.how,
.bonus-section {
  border-color: var(--line) !important;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.verify-card:before { border-color: rgba(47, 123, 255, .3); }
input, select, textarea {
  border-color: var(--line) !important;
  background: rgba(16, 26, 44, .85) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2) !important;
}
input::placeholder, textarea::placeholder { color: #4f5f78 !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--electric) !important;
  box-shadow: 0 0 0 4px rgba(47, 123, 255, .22) !important;
}
button.primary, .primary {
  background: linear-gradient(135deg, #3b82ff, #1554c7) !important;
  box-shadow: 0 14px 34px rgba(47, 123, 255, .32) !important;
  color: #f8fbff !important;
}
.product-visual, .admin-vial-figure { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.customer-profile-card {
  border-color: var(--line) !important;
  background: linear-gradient(155deg, var(--paper) 45%, var(--surface-2)) !important;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.customer-profile-card:hover { border-color: rgba(47, 123, 255, .4) !important; box-shadow: var(--shadow), var(--glow); }
.customer-avatar { background: linear-gradient(145deg, #3b82ff, #12234a) !important; box-shadow: 0 8px 18px rgba(47, 123, 255, .3); }
.customer-profile-metrics span, .customer-summary article, .admin-summary article { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink); }
.customer-profile-metrics strong, .customer-summary strong { color: var(--electric) !important; }
.customer-card-foot button, .customer-head-actions a { background: var(--electric) !important; color: #f8fbff !important; }
.customer-table-wrap, .admin-table-wrap { border-color: var(--line) !important; box-shadow: var(--shadow); }
.customer-table-wrap thead, .admin-table-wrap thead { background: rgba(16, 26, 44, .96) !important; color: var(--muted); }
.status-pill.authentic { background: rgba(52, 211, 153, .14) !important; color: #34d399 !important; }
.status-pill.invalid { background: rgba(255, 84, 104, .14) !important; color: var(--danger) !important; }
.history-note, .history-total span { color: var(--muted) !important; }
.history-total { background: var(--surface-2) !important; border-color: var(--line) !important; }
.history-total strong { color: var(--electric) !important; }
.history time { color: #7d92ad !important; }

/* Login / authenticate hero — the highest-priority screen in the product. */
.login-gate {
  background:
    radial-gradient(circle at 18% 15%, rgba(47, 123, 255, .16), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(34, 211, 255, .08), transparent 45%),
    var(--cream) !important;
}
.login-brand { color: var(--ink) !important; }
.login-card {
  background: linear-gradient(165deg, #0d1526, #080d18) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow), 0 0 60px rgba(47, 123, 255, .06) !important;
  color: var(--ink);
}
.login-kicker { color: var(--neon) !important; }
.login-card h1 { color: var(--ink); }
.login-card > p { color: var(--muted) !important; }
.login-card form > small { color: #6b7f9c !important; }
.original-only { border-color: var(--electric) !important; background: rgba(47, 123, 255, .1) !important; color: #cfe0ff !important; }
.verification-privacy { background: rgba(122, 162, 255, .07) !important; color: var(--muted) !important; }
.login-error { color: var(--danger) !important; }
.instructions-button { color: var(--electric) !important; }
.instructions-button:hover, .instructions-button:focus-visible { background: rgba(47, 123, 255, .1) !important; }
.login-help-popover { background: var(--surface-2) !important; border-color: var(--line) !important; box-shadow: var(--shadow) !important; }
.login-tutorial article strong { color: var(--ink) !important; }
.login-tutorial article span { color: var(--muted) !important; }
.user-session { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink) !important; }
.user-session small { color: var(--danger) !important; }
.language-switcher button { filter: none; opacity: .85; }
.language-switcher button:hover, .language-switcher button.active { opacity: 1; background: rgba(47, 123, 255, .12) !important; }

/* Consent dialog/banner: banner was already dark, the dialog wasn't. */
.consent-dialog { background: var(--paper) !important; color: var(--ink) !important; }
.consent-options label { background: var(--surface-2) !important; border-color: var(--line) !important; }
.consent-options label small { color: var(--muted) !important; }
.privacy-boundary { background: rgba(24, 169, 193, .1) !important; color: #8fe0ee !important; }

/* Save Core — proprietary 3D authentication element. CSS-only (no WebGL):
   layered radial glow + three tilted rings orbiting a nucleus, all built
   from `transform`/`opacity` so it stays GPU-cheap. `data-state` on
   #save-core (driven by app.js around the real /api/profiles/session call —
   never decorative-only) selects the animation. */
.save-core {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0 auto 22px;
  perspective: 700px;
}
.save-core-glow {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 123, 255, .35), transparent 68%);
  filter: blur(8px);
  animation: save-core-breathe 3.2s ease-in-out infinite;
}
.save-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(122, 162, 255, .35);
  transform-style: preserve-3d;
}
.save-core-ring-1 { transform: rotateX(62deg) rotateZ(0deg); animation: save-core-spin 9s linear infinite; }
.save-core-ring-2 { inset: 10px; border-color: rgba(34, 211, 255, .3); transform: rotateX(62deg) rotateZ(120deg); animation: save-core-spin 7s linear infinite reverse; }
.save-core-ring-3 { inset: 20px; border-color: rgba(122, 162, 255, .2); transform: rotateX(62deg) rotateZ(240deg); animation: save-core-spin 12s linear infinite; }
.save-core-nucleus {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #6fb0ff, #1a54cf 60%, #0c2c6e);
  box-shadow: 0 0 26px rgba(47, 123, 255, .55), inset 0 0 12px rgba(255, 255, 255, .25);
  color: #f2f8ff;
}
.save-core-nucleus svg { width: 20px; height: 20px; }
.save-core-icon-check { opacity: 0; transform: scale(.6); transform-origin: center; transition: opacity .25s ease, transform .25s ease; }
.save-core-icon-shield { transition: opacity .25s ease; }
@keyframes save-core-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.08); } }
@keyframes save-core-spin { to { transform: rotateX(62deg) rotateZ(360deg); } }
.save-core-ring-2[style], .save-core[data-state] .save-core-ring-2 { animation-direction: reverse; }

/* IDLE (default): the breathing glow + slow orbit above already read as
   "system awake, watching" — no extra rule needed. */

/* READY: user has typed/pasted a well-formed serial — the core brightens
   as a "go" signal before they even press submit. */
.save-core[data-state="ready"] .save-core-glow { animation-duration: 1.6s; }
.save-core[data-state="ready"] .save-core-nucleus { box-shadow: 0 0 34px rgba(47, 123, 255, .75), inset 0 0 12px rgba(255, 255, 255, .3); }

/* VALIDATING: rings spin up, nucleus pulses — mirrors the real in-flight
   POST to /api/profiles/session (see app.js loginWith()). */
.save-core[data-state="validating"] .save-core-ring-1 { animation-duration: 1.6s; }
.save-core[data-state="validating"] .save-core-ring-2 { animation-duration: 1.2s; }
.save-core[data-state="validating"] .save-core-ring-3 { animation-duration: 2s; }
.save-core[data-state="validating"] .save-core-glow { animation: save-core-breathe 1s ease-in-out infinite; }
.save-core[data-state="validating"] .save-core-nucleus { animation: save-core-pulse .9s ease-in-out infinite; }
@keyframes save-core-pulse { 0%, 100% { box-shadow: 0 0 26px rgba(47, 123, 255, .5), inset 0 0 12px rgba(255,255,255,.25); } 50% { box-shadow: 0 0 42px rgba(47, 123, 255, .85), inset 0 0 16px rgba(255,255,255,.4); } }

/* SUCCESS: one confirmation burst, then the shield swaps to a check. */
.save-core[data-state="success"] .save-core-glow { background: radial-gradient(circle, rgba(52, 211, 153, .5), transparent 68%); animation: save-core-success-burst .6s ease-out; }
.save-core[data-state="success"] .save-core-nucleus { background: radial-gradient(circle at 35% 30%, #7bf3c2, #14a874 60%, #0a5c40); box-shadow: 0 0 30px rgba(52, 211, 153, .6), inset 0 0 12px rgba(255,255,255,.3); }
.save-core[data-state="success"] .save-core-icon-shield { opacity: 0; }
.save-core[data-state="success"] .save-core-icon-check { opacity: 1; transform: scale(1); }
@keyframes save-core-success-burst { 0% { transform: scale(1); opacity: .6; } 45% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: .7; } }

/* ERROR: light dims and cools, a short shake — never a bare "Error". The
   text next to it (app.js) always says what actually went wrong. */
.save-core[data-state="error"] .save-core-glow { background: radial-gradient(circle, rgba(255, 84, 104, .32), transparent 68%); opacity: .5; }
.save-core[data-state="error"] .save-core-nucleus { background: radial-gradient(circle at 35% 30%, #ff8f9c, #c72d42 60%, #6e1220); box-shadow: 0 0 20px rgba(255, 84, 104, .4), inset 0 0 12px rgba(255,255,255,.15); animation: save-core-shake .4s ease-in-out; }
@keyframes save-core-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .save-core-glow, .save-core-ring, .save-core-nucleus { animation: none !important; }
  .save-core[data-state="ready"] .save-core-nucleus,
  .save-core[data-state="validating"] .save-core-nucleus { box-shadow: 0 0 30px rgba(47, 123, 255, .6), inset 0 0 12px rgba(255,255,255,.25); }
}
@media (max-width: 600px) {
  .save-core { width: 84px; height: 84px; margin-bottom: 16px; }
  .save-core-nucleus { inset: 26px; }
}