:root {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --ink: #111111;
  --muted: #6b7280;
  --line: #d1d5db;
  --green: #078e3f;
  --yellow: #ffe218;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  padding: 0 18px;
}

button:hover {
  filter: brightness(0.95);
}

button.secondary {
  background: #111827;
}

button.ghost {
  background: transparent;
  color: #111827;
  border: 1px solid var(--line);
}

label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 12px 14px;
  outline: none;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

input:focus,
textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(7, 142, 63, 0.14);
}

h1,
h2,
p {
  margin: 0;
}

.hidden {
  display: none !important;
}

.eyebrow {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.muted {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-card {
  display: grid;
  gap: 18px;
  width: min(100%, 420px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 28px;
}

.error-message {
  min-height: 20px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 700;
}

.app-page {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 28px;
  min-height: 100vh;
  padding: 28px;
}

.panel {
  align-self: start;
  display: grid;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 24px;
}

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

.actions .ghost {
  grid-column: 1 / -1;
}

.preview-wrap {
  display: grid;
  place-items: start center;
  overflow: auto;
  padding-bottom: 28px;
}

.label-paper {
  position: relative;
  width: 150mm;
  height: 165mm;
  min-height: auto;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #111111;
  color: #111111;
  padding: 38mm 15mm 9mm 15mm;
}

.brand-logo {
  position: absolute;
  top: 8mm;
  right: 15mm;
  width: 29mm;
  height: 29mm;
  object-fit: contain;
}

.recipient-block,
.sender-block {
  width: 100%;
}

.recipient-block h2,
.sender-block h2 {
  font-size: 6.2mm;
  font-weight: 900;
  line-height: 1.15;
}

.recipient-name,
.sender-name {
  margin-top: 1.5mm;
  font-size: 5.3mm;
  font-weight: 900;
  line-height: 1.25;
}

.recipient-address,
.sender-address {
  margin-top: 2.5mm;
  font-size: 5.3mm;
  line-height: 1.35;
}

.sender-block {
  margin-top: 9mm;
}

.contact-list {
  display: grid;
  gap: 3mm;
  margin: 6mm 0 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 5mm;
  font-size: 4.5mm;
  line-height: 1.15;
}

.icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 7mm;
  height: 7mm;
  overflow: hidden;
}

.icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon.tiktok {
  position: relative;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  overflow: hidden;
}

.icon.tiktok::before {
  content: "♪";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 5mm;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    -1px 0 #25f4ee,
    1px 0 #fe2c55;
}

.icon.tiktok img {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .app-page {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .preview-wrap {
    place-items: start center;
  }

  .label-paper {
    transform: scale(0.72);
    transform-origin: top center;
    margin-bottom: -44mm;
  }
}

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

  .actions .ghost {
    grid-column: auto;
  }

  .label-paper {
    transform: scale(0.56);
    margin-bottom: -73mm;
  }
}

@page {
  size: 150mm 165mm;
  margin: 0;
}

@media print {
  html,
  body {
    width: 150mm;
    height: 165mm;
    margin: 0;
    padding: 0;
    background: #ffffff;
    overflow: hidden;
  }

  main {
    width: 150mm;
    height: 165mm;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .no-print,
  .login-page {
    display: none !important;
  }

  .app-page,
  .preview-wrap {
    display: block;
    width: 150mm;
    height: 165mm;
    min-height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .label-paper {
    width: 150mm;
    height: 165mm;
    min-height: auto;
    margin: 0;
    padding: 38mm 15mm 9mm 15mm;
    border: 2px solid #111111;
    box-shadow: none;
    transform: none;
    overflow: hidden;
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
    break-before: avoid;
    break-after: avoid;
    break-inside: avoid;
  }
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #111827;
  transform: translateY(-50%);
}

.password-toggle:hover {
  background: #f3f4f6;
  filter: none;
}