.container {
  width:
    min(100%, 620px);

  margin-inline:
    auto;

  padding:
    0 18px 40px;
}

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  position:
    sticky;

  top:
    0;

  z-index:
    50;

  height:
    70px;

  background:
    rgba(238, 242, 246, .88);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  box-shadow:
    0 10px 25px -18px var(--nm-dark);
}

.topbar-inner {
  width:
    min(100%, 620px);

  height:
    100%;

  margin-inline:
    auto;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}

.brand {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}

.brand-icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-sm);

  font-size:
    1rem;
}

.brand-name {
  display:
    block;

  font-family:
    var(--font-display);

  font-size:
    1rem;

  font-weight:
    700;
}

.brand-sub {
  display:
    block;

  color:
    var(--text-muted);

  font-size:
    .64rem;
}

.status-pill {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    .45rem .7rem;

  border-radius:
    999px;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-xs);

  font-size:
    .7rem;

  font-weight:
    700;
}

.status-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--success);

  box-shadow:
    0 0 7px rgba(22, 163, 74, .45);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  text-align:
    center;

  padding:
    32px 0 22px;
}

.hero-icon {
  width:
    58px;

  height:
    58px;

  margin:
    0 auto 15px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised);

  font-size:
    1.35rem;
}

.hero h1 {
  font-family:
    var(--font-display);

  font-size:
    clamp(1.55rem, 6vw, 2.1rem);

  line-height:
    1.2;

  margin-bottom:
    9px;
}

.hero p {
  max-width:
    43ch;

  margin-inline:
    auto;

  color:
    var(--text-muted);

  font-size:
    .88rem;
}

/* ============================================================
   MAIN CARD
   ============================================================ */

.main-card {
  padding:
    15px;

  border-radius:
    var(--radius-lg);

  margin-bottom:
    18px;
}

.upload-area {
  min-height:
    280px;

  padding:
    28px 18px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  border-radius:
    var(--radius);

  background:
    var(--surface);

  box-shadow:
    var(--inset);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.upload-area:hover {
  transform:
    translateY(-1px);
}

.upload-area.dragging {
  box-shadow:
    var(--inset),
    0 0 0 3px
      rgba(15, 39, 71, .13);
}

.upload-icon {
  width:
    60px;

  height:
    60px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    14px;

  border-radius:
    18px;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-sm);

  font-size:
    1.35rem;
}

.upload-area h2 {
  font-family:
    var(--font-display);

  font-size:
    1.08rem;

  margin-bottom:
    5px;
}

.upload-area p {
  color:
    var(--text-muted);

  font-size:
    .75rem;

  margin-bottom:
    18px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.primary-btn {
  width:
    100%;

  min-height:
    48px;

  padding:
    .85rem 1rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .55rem;

  border-radius:
    14px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-light)
    );

  box-shadow:
    var(--raised-sm),
    0 12px 25px -13px
      var(--navy-glow);

  font-size:
    .86rem;

  font-weight:
    700;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    opacity .2s ease;
}

.primary-btn:hover {
  transform:
    translateY(-1px);
}

.primary-btn:active {
  transform:
    translateY(1px);

  box-shadow:
    var(--inset-sm);
}

.primary-btn:disabled {
  opacity:
    .6;

  cursor:
    not-allowed;
}

.secondary-btn {
  min-height:
    44px;

  padding:
    .75rem 1rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .5rem;

  border-radius:
    13px;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-sm);

  font-size:
    .82rem;

  font-weight:
    700;

  transition:
    box-shadow .15s ease,
    transform .15s ease;
}

.secondary-btn:hover {
  transform:
    translateY(-1px);
}

.secondary-btn:active {
  transform:
    translateY(1px);

  box-shadow:
    var(--inset-sm);
}

/* ============================================================
   PREVIEW
   ============================================================ */

.preview-section {
  padding:
    4px;

  animation:
    sectionIn .25s ease;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preview-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin:
    4px 3px 12px;
}

.section-label {
  display:
    block;

  color:
    var(--text-faint);

  font-size:
    .66rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .07em;
}

.file-name {
  display:
    block;

  max-width:
    250px;

  margin-top:
    2px;

  color:
    var(--text);

  font-size:
    .78rem;

  font-weight:
    600;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.mini-icon-btn {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    12px;

  color:
    var(--text-muted);

  background:
    var(--surface);

  box-shadow:
    var(--raised-xs);
}

.mini-icon-btn:hover {
  color:
    var(--navy);
}

.mini-icon-btn:active {
  box-shadow:
    var(--inset-xs);
}

.image-frame {
  overflow:
    hidden;

  border-radius:
    18px;

  margin-bottom:
    15px;

  background:
    #e8edf2;
}

.image-frame img {
  width:
    100%;

  max-height:
    500px;

  object-fit:
    contain;

  margin-inline:
    auto;
}

/* ============================================================
   DISCLAIMER
   ============================================================ */

.disclaimer {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  margin:
    16px 4px 4px;

  padding:
    11px;

  border-radius:
    12px;

  background:
    rgba(15, 39, 71, .035);

  box-shadow:
    var(--inset-xs);

  color:
    var(--text-muted);

  font-size:
    .68rem;

  line-height:
    1.55;
}

.disclaimer i {
  margin-top:
    2px;

  color:
    var(--navy);
}

.disclaimer strong {
  color:
    var(--navy);
}

/* ============================================================
   RESULT
   ============================================================ */

.result-section {
  padding:
    16px;

  border-radius:
    var(--radius);

  margin-bottom:
    18px;

  animation:
    sectionIn .3s ease;
}

.result-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    12px;
}

.result-head h2 {
  margin-top:
    2px;

  font-family:
    var(--font-display);

  font-size:
    1.05rem;
}

.result-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    .4rem .62rem;

  border-radius:
    999px;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-xs);

  font-size:
    .62rem;

  font-weight:
    700;
}

.result-frame {
  min-height:
    180px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    18px;

  margin-bottom:
    14px;

  background:
    #e8edf2;
}

.result-frame img {
  width:
    100%;

  max-height:
    560px;

  object-fit:
    contain;
}

.result-loading {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--navy);

  font-size:
    .78rem;

  font-weight:
    600;
}

.result-info {
  display:
    grid;

  gap:
    10px;
}

.result-info-item {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--text-muted);

  font-size:
    .72rem;

  padding:
    9px 11px;

  border-radius:
    11px;

  box-shadow:
    var(--inset-xs);
}

.result-info-item i {
  color:
    var(--navy);
}

/* ============================================================
   INFO CARD
   ============================================================ */

.info-card {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  padding:
    15px;

  border-radius:
    var(--radius);

  margin-bottom:
    20px;
}

.info-icon {
  width:
    43px;

  height:
    43px;

  flex:
    0 0 43px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-sm);
}

.info-card h3 {
  font-family:
    var(--font-display);

  font-size:
    .93rem;

  margin-bottom:
    4px;
}

.info-card p {
  color:
    var(--text-muted);

  font-size:
    .73rem;

  line-height:
    1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  text-align:
    center;

  padding:
    5px 18px 28px;

  color:
    var(--text-muted);

  font-size:
    .69rem;
}

.footer strong {
  color:
    var(--navy);
}

/* ============================================================
   TOAST
   ============================================================ */

.toast-stack {
  position:
    fixed;

  left:
    50%;

  bottom:
    18px;

  z-index:
    100;

  width:
    min(92vw, 390px);

  transform:
    translateX(-50%);

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}

.toast {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  padding:
    11px 12px;

  border-radius:
    14px;

  background:
    var(--surface);

  box-shadow:
    var(--raised-sm);

  opacity:
    0;

  transform:
    translateY(12px);

  transition:
    opacity .25s ease,
    transform .25s ease;

  font-size:
    .74rem;
}

.toast.show {
  opacity:
    1;

  transform:
    translateY(0);
}

.toast > i {
  margin-top:
    2px;

  color:
    var(--navy);
}

.toast.success > i {
  color:
    var(--success);
}

.toast.error > i {
  color:
    var(--danger);
}

@media (min-width: 640px) {

  .container {
    padding-inline:
      20px;
  }

  .topbar-inner {
    padding-inline:
      20px;
  }

  .main-card,
  .result-section {
    padding:
      20px;
  }
}

.cooldown-card {
  margin-top: 14px;
  padding: 15px;

  text-align: center;

  border-radius: 16px;

  background: var(--surface);

  box-shadow: var(--inset);
}

.cooldown-icon {
  width: 44px;
  height: 44px;

  margin: 0 auto 8px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--surface);

  color: var(--navy);

  box-shadow: var(--raised-sm);
}

.cooldown-card h3 {
  font-family: var(--font-display);

  font-size: .94rem;

  margin-bottom: 4px;
}

.cooldown-card p {
  color: var(--text-muted);

  font-size: .71rem;

  line-height: 1.55;
}

.countdown {
  margin-top: 9px;

  font-family:
    'JetBrains Mono',
    monospace;

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: .06em;

  color: var(--navy);

  text-shadow:
    0 1px 0 rgba(255,255,255,.8);
}


/* ============================================================
   AGE GATE
   ============================================================ */

.age-gate {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: grid;

  place-items: center;

  padding: 18px;

  background:
    rgba(10, 20, 35, .58);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.age-gate-card {
  width: min(100%, 430px);

  padding: 24px 20px;

  border-radius: 24px;

  text-align: center;

  background:
    var(--surface);

  box-shadow:
    var(--raised-lg);
}

.age-gate-icon {
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  margin:
    0 auto 12px;

  border-radius: 50%;

  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised);

  font-size:
    1.35rem;
}

.age-gate-label {
  display: block;

  margin-bottom: 5px;

  color:
    var(--navy);

  font-size:
    .65rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;
}

.age-gate-card h2 {
  font-family:
    var(--font-display);

  font-size:
    1.25rem;

  margin-bottom:
    9px;
}

.age-gate-card p {
  color:
    var(--text-muted);

  font-size:
    .78rem;

  line-height:
    1.65;
}

.age-gate-card p strong {
  color:
    var(--navy);
}

.age-gate-question {
  margin-top:
    15px;

  color:
    var(--text) !important;

  font-weight:
    700;
}

.age-gate-actions {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  margin-top:
    16px;
}

.age-btn {
  min-height:
    48px;

  padding:
    .8rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    .45rem;

  border-radius:
    14px;

  font-size:
    .78rem;

  font-weight:
    700;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.age-btn:hover {
  transform:
    translateY(-1px);
}

.age-btn:active {
  transform:
    translateY(1px);
}

.age-btn-primary {
  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-light)
    );

  box-shadow:
    var(--raised-sm);
}

.age-btn-primary:active {
  box-shadow:
    var(--inset-sm);
}

.age-btn-secondary {
  color:
    var(--navy);

  background:
    var(--surface);

  box-shadow:
    var(--raised-sm);
}

.age-btn-secondary:active {
  box-shadow:
    var(--inset-sm);
}

.age-gate-note {
  margin-top:
    13px !important;

  color:
    var(--text-faint) !important;

  font-size:
    .61rem !important;
}

body.age-gate-locked {
  overflow:
    hidden;
}

@media (max-width: 390px) {

  .age-gate-actions {
    grid-template-columns:
      1fr;
  }

  .age-gate-card {
    padding:
      22px 17px;
  }
}