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

@font-face {
  font-family: "FEFont";
  src: url("FE-FONT.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{
  text-align:center;
  padding: 2px 2px 2px;
}

header h1{
  font-size:4em;
  font-weight:800;
  letter-spacing:0.06em;
  color:#e6edf3;
  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:1em;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#8b949e;
}


.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);
}

.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.row > *{flex:1 1 200px}

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

input{
  width:100%;
  padding:12px;
  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);
}
button{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  color:#d6d6d6;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
button:hover{filter:brightness(1.05)}


 button.btn.primary{
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
  }
  button.btn.info{
    background: linear-gradient(180deg, #38bdf8, #4f8cff);
  }
  button.btn.success{
    background: linear-gradient(180deg, #2ecc71, #1ea85a);
  }
  button.btn.warning{
    background: linear-gradient(180deg, #ffb020, #ff8a1a);
    color:#201300;
  }
  button.btn.danger{
    background: linear-gradient(180deg, #ff5d5d, #e63946);
  }
  button.btn.neutral{
    background: #1b2233;
    border: 1px solid #2a3550;
    color: var(--fg);
  }
  button.btn.secondary{
    background: #1b2233;
    border: 1px solid #2a3550;
    color: var(--fg);
  }

#models{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
#models label{
  cursor:pointer;
}
#models input{display:none}
#models img{
  height:90px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.15);
  transition:.15s;
}
#models input:checked + img{
  border-color:var(--ok);
  box-shadow:0 0 0 2px rgba(46,204,113,.4);
  transform:scale(1.05);
}

.preview{
  text-align:center;
  margin-top:14px;
}
.preview canvas{
  max-width:100%;
  background:#000;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.actions button{flex:1}

@media(max-width:600px){
  .row{flex-direction:column}
  .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);
}

.model-title{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.model-sub{
  font-size: 0.8em;
  color: var(--muted);
  font-weight: 400;
}



@media (max-width: 600px){

  .row{
    flex: none !important;
    margin-bottom: 8px !important;
  }

  .row > *{
    flex: none !important;
  }

  h3{
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }

  
  header h1{
    font-size: 2.4em;
  }

  header .subtitle{
    font-size: 0.8em;
    letter-spacing: 0.12em;
  }

  #models{
    margin-bottom: 32px !important;
  }

    #models img{
    height: auto;
    width: 100%;
    max-width: 160px;
  }

  .preview{
    margin-top: 12px !important; 
  }

  h3{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

.row{
    margin-bottom: 8px !important;
  }

}


/* 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;
  }
}