/* malý reset – ať padding nevystrkuje inputy ven */
*,*::before,*::after{ box-sizing: border-box; }

.page{
  min-height:100svh;
  position:relative;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
  display:grid;            /* vycentruje kartu */
  place-items:center;
  padding:clamp(16px,3vw,32px);
}

/* pozadí: nejdřív overlaye, pak OBRÁZEK (mobile PNG) */
.bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(255,180,0,.05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.42)),
    url('/img/bg-workbench-mobile.png') center 45% / 100% auto no-repeat;
  filter:saturate(1.05) brightness(.9) blur(1px);
}

.page::after{
  content:""; position:absolute; inset:-50%; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity=".06"><filter id="n"><feTurbulence baseFrequency=".8" numOctaves="2" seed="3"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  mix-blend-mode:overlay;
}

.card{
  width:min(480px,100%);
  margin:0;
  padding:28px;
  backdrop-filter:blur(14px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden; /* jistota, že nic nečouhá */
}

/* stacking pořadí */
.page{ position: relative; }          /* rodič = nový stacking context */
.bg{ z-index: 0; }                    /* už ne -1 → bude NAD pozadím .page */
.page::after{ z-index: 1; }           /* overlay nad fotkou */
.card{ position: relative; z-index: 2; } /* karta nad vším */


.input{
  display:block;
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:var(--accent)}

.btn{
  width:100%;
  margin-top:12px;
  padding:14px 18px;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#111;
  font-weight:700;
  cursor:pointer;
  transition:transform .06s ease, filter .2s;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}

.small{color:var(--muted);font-size:.9rem}
.row{display:flex;justify-content:space-between;margin-top:10px}

@media (max-width: 768px){
  .bg{
    background:
      radial-gradient(800px 400px at 50% 15%, rgba(255,180,0,.05), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.42)),
      url('/img/bg-workbench-mobile.png') center/cover no-repeat;
  }
  .card{ margin:0 16px; }
}