:root {
  --brand-dark: #003c34;
  --brand-green: #0c725f;
  --surface: #f5f7f8;
  --ink: #17202a;
  --muted: #64748b;
}

* { box-sizing: border-box; }
body { background: var(--surface); color: var(--ink); min-height: 100vh; }
.print-navbar { background: var(--brand-dark); }
.nav-logo { width: 42px; height: 30px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.print-hero { background: linear-gradient(135deg, #e9f5f2, #f7fbfa); border-bottom: 1px solid #dbe7e4; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 800; color: var(--brand-green); }
.hero-tip { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem; border: 1px solid #cfe2dd; background: rgba(255,255,255,.8); border-radius: 16px; }
.hero-tip span { color: var(--muted); font-size: .9rem; }
.form-card, .preview-panel { border-radius: 18px; }
.form-sticky { top: 92px; }
.preview-panel { background: #fff; box-shadow: 0 12px 34px rgba(15,23,42,.08); padding: 1.25rem; }
.label-frame { padding: 12px; border-radius: 16px; background: linear-gradient(145deg, #e7ecef, #f9fafb); border: 1px solid #d8e0e5; overflow: hidden; }
.label-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 842.25 / 595.499986;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 25px rgba(15,23,42,.12);
  isolation: isolate;
}
.label-template {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.label-logo-androidpc {
  position: absolute;
  left: 74.5%;
  top: 2.5%;
  width: 24%;
  height: 24.4%;
  object-fit: contain;
  object-position: right center;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}
.dynamic-name,
.dynamic-phone,
.dynamic-city {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  text-transform: uppercase;
}
.dynamic-name {
  left: 29.7%;
  top: 26.5%;
  width: 62.7%;
  height: 9%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  white-space: pre-line;
  color: #000;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
  padding: 0 1.2%;
}
.dynamic-phone {
  left: 21.4%;
  top: 43.5%;
  width: 49.9%;
  height: 9.6%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  color: #000;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  writing-mode: horizontal-tb;
  direction: ltr;
  unicode-bidi: isolate;
  transform: none;
  padding: 0 1.2%;
}
.dynamic-city {
  left: 38%;
  top: 61%;
  width: 45%;
  height: 13%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: #0d0d0d;
  font-family: "Bangers", Impact, "Arial Black", sans-serif;
  line-height: .9;
  letter-spacing: .02em;
  transform: rotate(-1deg);
  padding: 0 1%;
}
.info-card { height: 100%; padding: .9rem 1rem; border-radius: 13px; border: 1px solid #e1e7eb; background: #fbfcfd; display: flex; flex-direction: column; gap: .3rem; }
.info-card strong { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: .7rem; }
.info-card span { font-weight: 700; overflow-wrap: anywhere; }
.loading-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,.88); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.form-control:focus { border-color: var(--brand-green); box-shadow: 0 0 0 .25rem rgba(12,114,95,.14); }
.btn-success { background: #128c7e; border-color: #128c7e; }
.btn-success:hover { background: #0f776c; border-color: #0f776c; }

@media (max-width: 991.98px) {
  .form-sticky { position: static !important; }
  .preview-panel { padding: .8rem; }
  .label-frame { padding: 6px; border-radius: 12px; }
}

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .print-navbar, .print-hero, .form-card, .preview-panel > :not(.label-frame), .loading-overlay { display: none !important; }
  main, .container-xl, .row, .col-lg-8, .preview-panel, .label-frame {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .label-canvas { width: 297mm !important; height: 210mm !important; box-shadow: none !important; }
}