:root{
  --bg:#07070a;
  --card:#0f1720;
  --muted:#98a0b3;
  --accent:#00f0ff;
  --accent-2:#8a2be2;
  --glass: rgba(255,255,255,0.04);
  --neon: 0 6px 30px rgba(0,240,255,0.06), 0 0 10px rgba(138,43,226,0.06);
  --radius:12px;
  --shadow: 0 6px 20px rgba(0,0,0,0.6);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
}

*{box-sizing:border-box}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    padding: 28px;
    display: flex;
    justify-content: center;
}


body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 10% 80%, rgba(0,240,255,0.15), transparent 50%),
      radial-gradient(circle at 90% 20%, rgba(138,43,226,0.12), transparent 50%);
    pointer-events: none;
}

.app{
  width:100%;
  color: #f3f7fc;
  max-width:1100px;
  max-height:1100px;
  background: rgba(10,10,15,0.55);
  backdrop-filter: blur(12px);
  border-radius:18px;
  padding:22px;
  box-shadow:0 8px 25px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.08);

    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
}


.topbar h1{
  margin:0 0 6px;
  font-size:20px;
}
.tagline{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.controls{
  display:grid;
  grid-template-columns: 1fr 220px auto;
  gap:12px;
  margin-top:18px;
}

.label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:13px;
}

.label input,
.label select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 10px 36px 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: #f3f7fc;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(4px);

    background-image: url("data:image/svg+xml;utf8,<svg fill='%23aafaff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.label input:focus,
.label select:focus{
    outline: none;
    border-color: rgba(0,240,255,0.5);
    box-shadow: 0 0 12px rgba(0,240,255,0.35);
}

.label select option {
    background: #0b0e13;
    color: #e6eef8;
    padding: 10px;
}

.actions{
  display:flex;
  align-items:end;
}

.btn{
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  border:none;
  box-shadow:var(--neon);
}

.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(0,240,255,0.12);
}

.link-output{
  grid-column:1 / -1;
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--glass);
  font-size:13px;
  color:var(--muted);
  word-break:break-all;
}

.grid-wrap{
  margin-top:24px;
}
.grid-title{
  margin:0 0 10px;
  font-size:14px;
  color:var(--muted);
}

.blueprint-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  gap:14px;
}

.blueprint{
  width: 140px;         /* stała szerokość */
  height: 140px;        /* stała wysokość całego kafelka */
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
  transition:.15s;
  opacity:.3;
}

.blueprint img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blueprint.selected{
  opacity:1;
  transform:translateY(-6px) scale(1.03);
  border:1px solid rgba(0,240,255,0.14);
  box-shadow:0 12px 34px rgba(0,240,255,0.06);
}
.blueprint .meta{
  padding:8px;
  font-size:13px;
  color:var(--muted);
}
.blueprint .tick{
  position:absolute;
  top:8px;
  right:8px;
  background:rgba(0,240,255,0.2);
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:black;
  font-weight:700;
  opacity:0;
  transition:.15s;
}
.blueprint.selected .tick{
  opacity:1;
}

.footer{
  margin-top:22px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

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