* {
  box-sizing: border-box;
}

:root {
  --navy: #072d69;
  --navy-2: #041d48;
  --yellow: #ffc400;
  --orange: #ff8a00;
  --cream: #fff8df;
  --white: #ffffff;
  --text: #162033;
  --muted: #657089;
  --shadow: 0 24px 70px rgba(3, 24, 63, 0.20);
}

html {
  min-height: 100%;
  background: #071f4d;

  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100vh;
  margin: 0;

  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(255, 196, 0, .28),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 5%,
      rgba(255, 138, 0, .20),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #061b43 0%,
      #0a3474 48%,
      #08275a 100%
    );
}


/* =====================================================
   ELEMENTOS GERAIS
===================================================== */

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}


/* =====================================================
   PÁGINA
===================================================== */

.page {
  width: 100%;
  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 28px 16px;
}


/* =====================================================
   CARD PRINCIPAL
===================================================== */

.app-card {
  width: min(100%, 560px);

  padding: 22px;

  border-radius: 30px;

  background: rgba(255, 255, 255, .97);

  box-shadow: var(--shadow);

  border: 1px solid rgba(255, 255, 255, .55);
}


/* =====================================================
   CABEÇALHO
===================================================== */

.app-header {
  text-align: center;

  padding: 4px 8px 18px;
}

.eyebrow {
  margin: 0 0 5px;

  color: var(--orange);

  font-size: .75rem;
  font-weight: 900;

  letter-spacing: .14em;
}

h1 {
  margin: 0;

  color: var(--navy);

  font-size: clamp(2rem, 7vw, 3rem);

  line-height: .95;

  letter-spacing: -.04em;
}

.subtitle {
  max-width: 430px;

  margin: 12px auto 0;

  color: var(--muted);

  font-size: .96rem;

  line-height: 1.45;
}


/* =====================================================
   ESCOLHA DA MOLDURA
===================================================== */

.format-section {
  width: min(100%, 430px);

  margin: 0 auto 18px;
}

.format-title {
  margin: 0 0 10px;

  text-align: center;

  color: var(--navy);

  font-size: .9rem;

  font-weight: 900;
}

.format-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;
}

.format-btn {
  min-height: 64px;

  border: 2px solid transparent;

  border-radius: 15px;

  padding: 8px 6px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  color: var(--navy);

  background: #f2f5f9;

  cursor: pointer;

  text-align: center;

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

.format-btn:hover {
  background: #eaf0f8;
}

.format-btn:active {
  transform: scale(.97);
}

.format-btn.active {
  border-color: var(--orange);

  background: #fff7ec;

  box-shadow:
    0 8px 22px
    rgba(255, 138, 0, .15);
}

.format-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 50%;

  color: white;

  background: var(--orange);

  font-size: .85rem;

  font-weight: 900;

  line-height: 1;
}

.format-btn.active .format-icon {
  background: var(--navy);
}

.format-text {
  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

.format-text strong {
  color: var(--navy);

  font-size: .82rem;

  font-weight: 900;

  white-space: nowrap;
}


/* =====================================================
   EDITOR
===================================================== */

.editor-shell {
  width: 100%;
}


/* =====================================================
   ÁREA DO CANVAS
===================================================== */

.canvas-wrap {
  position: relative;

  width: min(100%, 430px);

  margin: 0 auto;

  overflow: hidden;

  border-radius: 24px;

  background:
    linear-gradient(
      45deg,
      #e9edf3 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      #e9edf3 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      #e9edf3 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      #e9edf3 75%
    ),
    #f8fafc;

  background-size: 28px 28px;

  background-position:
    0 0,
    0 14px,
    14px -14px,
    -14px 0;

  box-shadow:
    inset 0 0 0 1px rgba(7, 45, 105, .11),
    0 16px 40px rgba(7, 45, 105, .16);

  touch-action: pan-y;

  transition:
    aspect-ratio .25s ease,
    max-width .25s ease;
}


/* =====================================================
   MOLDURA 1
   1080 x 1620
   2:3
===================================================== */

.canvas-wrap.moldura1-format {
  aspect-ratio: 2 / 3;

  max-width: 430px;
}


/* =====================================================
   MOLDURA 2
   1080 x 1920
   9:16
===================================================== */

.canvas-wrap.moldura2-format {
  aspect-ratio: 9 / 16;

  max-width: 360px;
}


/* =====================================================
   MOLDURA 3
   1080 x 1080
   1:1
===================================================== */

.canvas-wrap.moldura3-format {
  aspect-ratio: 1 / 1;

  max-width: 430px;
}


/* =====================================================
   CANVAS
===================================================== */

#editorCanvas {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  touch-action: pan-y;

  user-select: none;

  -webkit-user-select: none;
}


/* =====================================================
   "ADICIONE SUA FOTO"
===================================================== */

.empty-state {
  position: absolute;

  inset: 22% 13% 28%;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  text-align: center;

  padding: 24px;

  color: var(--navy);

  border:
    2px dashed
    rgba(7, 45, 105, .18);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, .76);

  pointer-events: auto;

  cursor: pointer;

  touch-action: pan-y;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

  -webkit-user-select: none;

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

.empty-state:active:not(.hidden) {
  transform: scale(.98);
}

.empty-state.hidden {
  opacity: 0;

  transform: scale(.96);

  pointer-events: none;
}

.empty-icon {
  font-size: 2rem;

  pointer-events: none;
}

.empty-state strong {
  font-size: 1.08rem;

  pointer-events: none;
}

.empty-state span {
  color: var(--muted);

  font-size: .84rem;

  line-height: 1.35;

  pointer-events: none;
}


/* =====================================================
   DICA
===================================================== */

.hint {
  margin-top: 12px;

  text-align: center;

  color: var(--muted);

  font-size: .82rem;
}


/* =====================================================
   ÁREA DE BOTÕES
===================================================== */

.actions {
  padding-top: 18px;
}


/* =====================================================
   GRIDS
===================================================== */

.primary-grid,
.export-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}


/* =====================================================
   BOTÕES PRINCIPAIS
===================================================== */

.btn {
  min-height: 56px;

  border: 0;

  border-radius: 16px;

  padding: 13px 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  cursor: pointer;

  font-weight: 900;

  transition:
    transform .15s ease,
    filter .15s ease,
    opacity .15s ease;
}

.btn:active {
  transform:
    translateY(1px)
    scale(.99);
}


/* Tirar foto */

.btn-primary {
  color: var(--navy-2);

  background:
    linear-gradient(
      135deg,
      #ffd84a,
      #ffb300
    );

  box-shadow:
    0 10px 24px
    rgba(255, 174, 0, .30);
}


/* Escolher foto */

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

  background: #eef4ff;

  box-shadow:
    inset 0 0 0 1px
    rgba(7, 45, 105, .11);
}


/* Baixar */

.btn-download {
  color: white;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #0d4a9b
    );
}


/* Compartilhar */

.btn-share {
  color: white;

  background:
    linear-gradient(
      135deg,
      #ff7a00,
      #ff9f1a
    );
}


/* Botões desabilitados */

.btn:disabled {
  opacity: .42;

  cursor: not-allowed;

  filter: grayscale(.25);
}


/* Ícones */

.btn-icon {
  font-size: 1.15rem;
}


/* =====================================================
   CONTROLES DE ZOOM
===================================================== */

.adjust-row {
  display: grid;

  grid-template-columns:
    54px
    1fr
    54px;

  gap: 10px;

  margin: 12px 0;
}

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

  border: 0;

  border-radius: 13px;

  color: var(--navy);

  background: #f2f5f9;

  font-weight: 900;

  cursor: pointer;

  box-shadow:
    inset 0 0 0 1px
    rgba(7, 45, 105, .10);
}

.mini-btn.wide {
  font-size: .9rem;
}


/* =====================================================
   TROCAR FOTO
===================================================== */

.reset-btn {
  width: 100%;

  border: 0;

  padding: 12px;

  margin-top: 10px;

  color: var(--muted);

  background: transparent;

  font-weight: 800;

  cursor: pointer;
}

.reset-btn:disabled {
  opacity: .35;

  cursor: default;
}


/* =====================================================
   RODAPÉ
===================================================== */

.footer {
  padding: 14px 4px 0;

  text-align: center;

  color: var(--muted);

  font-size: .75rem;
}


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

.toast {
  position: fixed;

  left: 50%;

  bottom: 24px;

  z-index: 10;

  max-width:
    calc(100% - 32px);

  transform:
    translate(-50%, 30px);

  padding: 12px 17px;

  color: white;

  background:
    rgba(4, 29, 72, .96);

  border-radius: 999px;

  opacity: 0;

  pointer-events: none;

  transition: .25s ease;

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, .25);

  font-size: .88rem;

  font-weight: 700;

  text-align: center;
}

.toast.show {
  opacity: 1;

  transform:
    translate(-50%, 0);
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 520px) {

  .page {
    padding: 0;

    display: block;

    min-height: 100vh;
  }


  .app-card {
    width: 100%;

    min-height: 100vh;

    border-radius: 0;

    padding:
      16px
      14px
      22px;
  }


  .app-header {
    padding-bottom: 14px;
  }


  .format-section {
    width: 100%;

    margin-bottom: 16px;
  }


  .format-grid {
    grid-template-columns: repeat(3, 1fr);

    gap: 6px;
  }


  .format-btn {
    min-height: 60px;

    padding: 7px 4px;

    border-radius: 13px;
  }


  .format-icon {
    width: 25px;
    height: 25px;

    font-size: .76rem;
  }


  .format-text strong {
    font-size: .76rem;
  }


  .canvas-wrap {
    border-radius: 18px;

    touch-action: pan-y;
  }


  /* Moldura 1 */

  .canvas-wrap.moldura1-format {
    width: min(100%, 390px);

    max-width: 390px;
  }


  /* Moldura 2 */

  .canvas-wrap.moldura2-format {
    width: min(100%, 350px);

    max-width: 350px;
  }


  /* Moldura 3 */

  .canvas-wrap.moldura3-format {
    width: min(100%, 390px);

    max-width: 390px;
  }


  #editorCanvas {
    touch-action: pan-y;
  }


  .empty-state {
    touch-action: pan-y;
  }


  .primary-grid,
  .export-grid {
    grid-template-columns: 1fr;
  }


  .btn {
    min-height: 54px;
  }
}