@font-face {
  font-family: "Vazir";
  src: url("/fonts/Vazir-FD.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  --age-ink: #20263f;
  --age-muted: #66708b;
  --age-violet: #6558d9;
  --age-purple: #9a55d6;
  --age-pale: #f6f4ff;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: linear-gradient(155deg, #f7f8ff 0%, #f9f6ff 45%, #effbfa 100%);
  color: var(--age-ink);
  font-family: Vazir, Tahoma, sans-serif;
  line-height: 2;
}
.age-page {
  width: min(780px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0 80px;
}
.age-hero {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
}
.age-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 99px;
  background: #e9e6ff;
  color: #5548bc;
  font-size: 13px;
}
.age-hero h1 {
  margin: 12px 0 4px;
  font-size: clamp(29px, 6vw, 43px);
  line-height: 1.45;
}
.age-hero p {
  margin: 0;
  color: var(--age-muted);
  font-size: 16px;
}
.age-card,
.loading-card,
.result-card,
.age-content {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e7e5f4;
  border-radius: 25px;
  box-shadow: 0 18px 50px rgba(60, 51, 117, 0.1);
}
.age-card {
  padding: 22px;
}
.drop-zone {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px;
  border: 2px dashed #c8c2ef;
  border-radius: 18px;
  background: var(--age-pale);
  cursor: pointer;
  text-align: center;
  transition: 0.2s ease;
  overflow: hidden;
}
.drop-zone:hover,
.drop-zone.dragging {
  border-color: var(--age-violet);
  background: #efedff;
}
.upload-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--age-violet), var(--age-purple));
  color: #fff;
  font: 40px/1 Arial;
  transform: rotate(90deg);
}
.drop-zone span:not(.upload-icon) {
  color: var(--age-muted);
  font-size: 13px;
}
.drop-zone img {
  width: min(100%, 290px);
  max-height: 230px;
  object-fit: cover;
  border-radius: 13px;
  margin-top: 8px;
}
.analyse-button,
.try-again {
  width: 100%;
  margin-top: 15px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(105deg, var(--age-violet), var(--age-purple));
  color: #fff;
  padding: 14px;
  font:
    16px Vazir,
    Tahoma,
    sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(101, 88, 217, 0.28);
}
.analyse-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.privacy-note {
  margin: 12px 2px 0;
  color: var(--age-muted);
  font-size: 12px;
  text-align: center;
}
.loading-card,
.result-card {
  margin-top: 22px;
  padding: 28px;
  text-align: center;
}
.notice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding: 20px 52px 20px 20px;
  border: 1px solid #f1cfcf;
  border-radius: 21px;
  background: linear-gradient(135deg, #fff7f6, #fff);
  box-shadow: 0 14px 36px rgba(135, 66, 62, 0.1);
}
.notice-card[hidden] {
  display: none !important;
}
.notice-card.no-face {
  border-color: #e1d6fb;
  background: linear-gradient(135deg, #f9f7ff, #fff);
}
.notice-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #d45c5a;
  color: #fff;
  font: bold 24px/1 Arial;
}
.no-face .notice-icon {
  background: linear-gradient(135deg, var(--age-violet), var(--age-purple));
  font-size: 30px;
  transform: rotate(90deg);
}
.notice-card h2 {
  margin: 0;
  font-size: 16px;
}
.notice-card p {
  margin: 3px 0 0;
  color: #687088;
  font-size: 14px;
}
.notice-close {
  position: absolute;
  top: 11px;
  left: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7b8090;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.notice-close:hover {
  background: #f0edf4;
}
.scanner {
  position: relative;
  width: 102px;
  height: 102px;
  margin: 0 auto 10px;
  border: 5px solid #e4e1fa;
  border-radius: 32px;
  overflow: hidden;
  background: #f7f6ff;
}
.scanner::before {
  content: "";
  position: absolute;
  inset: 19px 25px 14px;
  border: 3px solid #8c7ee6;
  border-radius: 45% 45% 40% 40%;
}
.scanner span {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 46%,
    #6c5cde 49%,
    #a44fdb 53%,
    transparent 57%
  );
  animation: age-scan 1.7s ease-in-out infinite;
}
@keyframes age-scan {
  0%,
  100% {
    transform: translateY(-38px);
  }
  50% {
    transform: translateY(38px);
  }
}
.loading-card h2 {
  margin: 0;
  font-size: 20px;
}
.loading-card p {
  margin: 5px 0 0;
  color: var(--age-muted);
}
.result-card {
  border-color: #d9d3ff;
  background: linear-gradient(150deg, #fff, #f8f6ff);
}
.result-label {
  color: #675abe;
  font-size: 14px;
}
.result-card strong {
  display: block;
  margin: 6px 0;
  font-size: 50px;
  line-height: 1.25;
  color: #4e42b0;
}
.result-card strong span {
  font-family: Vazir, Tahoma, sans-serif;
}
.result-card p {
  margin: 5px 0;
}
.disclaimer {
  color: var(--age-muted);
  font-size: 12px;
}
.try-again {
  width: auto;
  padding: 10px 22px;
  font-size: 14px;
  box-shadow: none;
}
.age-content {
  margin-top: 28px;
  padding: 28px;
}
.age-content h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
.age-content h2:not(:first-child) {
  margin-top: 26px;
}
.age-content p {
  color: #535c73;
  margin: 0;
}
.age-content details {
  border-top: 1px solid #ebeaf3;
  padding: 13px 0;
}
.age-content summary {
  cursor: pointer;
  font-weight: bold;
}
.age-content details p {
  padding-top: 8px;
  font-size: 14px;
}
@media (max-width: 560px) {
  .age-page {
    width: min(100% - 22px, 780px);
    padding-top: 30px;
  }
  .age-card,
  .loading-card,
  .result-card,
  .age-content {
    border-radius: 19px;
  }
  .age-card,
  .age-content {
    padding: 16px;
  }
  .drop-zone {
    min-height: 205px;
  }
  .result-card strong {
    font-size: 42px;
  }
}