@font-face {
  font-family: "LicensePlate";
  src: url("LicensePlate.ttf") format("truetype");
}

:root{
  --bg:#0f1115;
  --panel:#141822;
  --panel2:#161b26;
  --border:#263047;
  --fg:#e6e9ef;
  --muted:#aab2c0;
  --accent:#4f8cff;
  --accent2:#3a6fe0;
  --ok:#2ecc71;
  --radius:14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#0d0f14,#0f121a);
  color:var(--fg);
  font:15px/1.45 system-ui,Segoe UI,Arial;
}

/* ===== Header ===== */
header{
  text-align:center;
  padding: 6px 2px;
}
header h1{
  font-size:3.6em;
  font-weight:800;
  letter-spacing:0.06em;
  background-image:linear-gradient(90deg,#8bdcff,#e6c98c);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  margin:0;
}
header .subtitle{
  margin-top:2px;
  font-size:.95em;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#8b949e;
}

/* ===== Card ===== */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  max-width:900px;
  margin:20px auto;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* =========================================================
   LAYOUT: CONTROLES IZQ + PREVIEW DER (DESKTOP) / COLUMNA (MOBILE)
   ========================================================= */
.layout{
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.controls{
  flex:1 1 auto;
  min-width:0;
}
.preview{
  flex:0 0 320px;
  max-width:320px;
  text-align:center;
}

/* canvas: BLOQUEA ASPECTO, NO SE APLASTA */
.preview canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1307 / 1771; 
  background:#000;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}

/* =========================================================
   CONTROLES: ROWS COMPACTAS (LICENCIA + TAMAÑO + COLOR EN LÍNEA)
   ========================================================= */
.row{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  align-items:flex-end;
}

/* 3 columnas por fila: campo / tamaño / color */
.row .field{
  flex:1 1 auto;
  min-width:0;
}
.row .size{
  flex:0 0 92px;
}
.row .color{
  flex:0 0 92px;
}

/* ===== Labels ===== */
label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:600;
}

/* ===== Inputs ===== */
input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--fg);
  outline:none;
}
input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(79,140,255,.25);
}

/* ===== Size box ===== */
.sizebox{
  text-align:center;
  padding:10px;
}

/* ===== Color picker (que se vea el color seleccionado) ===== */
.colorbox{
  height:42px;
  padding:4px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  cursor:pointer;
}
.colorbox:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(79,140,255,.25);
}
.colorbox::-webkit-color-swatch{
  border:none;
  border-radius:8px;
}
.colorbox::-webkit-color-swatch-wrapper{
  padding:0;
}

/* ===== Actions ===== */
.actions{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.actions button{flex:1}

/* ===== Button ===== */
button{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  color:#d6d6d6;
  background:linear-gradient(180deg,#2ecc71,#1ea85a);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
button:hover{filter:brightness(1.05)}

/* =========================================================
   MOBILE:
   ========================================================= */
@media(max-width:700px){
  .layout{
    flex-direction:column;
  }

  .controls{
    width:100%;
  }

  .preview{
    width:100%;
    max-width:100%;
  }

  .preview canvas{
    max-width:380px;
    margin:0 auto;
  }

  .row{
    flex-direction:column;
    align-items:stretch;
  }
  .row .size,
  .row .color{
    flex:1 1 auto;
  }

  .actions{
    flex-direction:column;
  }
}

/* ===== Fondo watermark repetido LU9ABV en diagonal ===== */
body::before{
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-45deg);
  transform-origin: center;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 120px
  );
}

body::after{
  content:
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV\n"
  "LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV LU9ABV";
  position: fixed;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  display: block;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 140px;
  color: rgba(255,255,255,0.07);
  white-space: pre-wrap;
  transform: rotate(-45deg);
  transform-origin: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* TOOL NAVBAR */
.tool-nav {
  background: #0e1117;
  border-bottom: 1px solid #262c36;
  padding: .65rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: block;
}

.tool-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tool-brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: #eab308;
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tool-menu a {
  margin-left: 1rem;
  color: #e2e8f0;
  text-decoration: none;
  font-size: .85rem;
  padding: .25rem .4rem;
  border-radius: 4px;
}

.tool-menu a:hover {
  background: rgba(255,255,255,.06);
  color: #f1c93b;
}

/* MÓVIL */
@media (max-width: 600px) {
  .tool-container {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
  .tool-menu a {
    margin-left: 0;
    margin-right: .6rem;
  }
}