:root{
  --bg:#fbf7f0;          /* ciepły biały */
  --card:#ffffff;
  --ink:#111111;
  --muted:#5c5c5c;
  --line:rgba(17,17,17,.10);
  --shadow:0 10px 30px rgba(17,17,17,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 20% -10%, rgba(17,17,17,.06), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(17,17,17,.04), transparent 50%),
             var(--bg);
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(100%, 980px); margin:0 auto; padding:0 max(16px, env(safe-area-inset-left, 16px))}
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,240,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; min-width:0}
.brand{font-weight:800; letter-spacing:.2px; flex-shrink:0}
/* Jedna linia linków + przewijanie poziome zamiast zawijania i nachodzenia */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  min-width:0;
  flex:1 1 auto;
  scrollbar-width:thin;
}
.nav::-webkit-scrollbar{height:4px}
.nav::-webkit-scrollbar-thumb{background:rgba(17,17,17,.2); border-radius:99px}
.nav a{white-space:nowrap; flex-shrink:0}
.nav .btn{flex-shrink:0}
.badge{
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.6); box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.content{padding:18px max(16px, env(safe-area-inset-left, 16px)) 28px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.grid{display:grid; gap:14px}
.grid > *{min-width:0}
.grid--2{grid-template-columns: 1fr}
.grid--3{grid-template-columns: 1fr}
@media (min-width: 860px){
  .grid--2{grid-template-columns: 1.2fr .8fr}
  .grid--3{grid-template-columns: 1fr 1fr 1fr}
}
h1{font-size:28px; margin:0 0 10px}
h2{font-size:18px; margin:0 0 10px}
p{color:var(--muted); line-height:1.55; margin:10px 0}
.hero{display:flex; flex-direction:column; gap:12px}
.pillrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.7)
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(17,17,17,.35);
  background:#111;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{filter:brightness(1.03)}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn--small{padding:9px 10px; border-radius:10px}
.btn--wide{width:100%}
label{display:block; font-weight:700; margin:10px 0 6px}
label.slot-option{display:flex; align-items:center; gap:8px; margin-top:10px; cursor:pointer}
label.slot-option input[type="radio"]{width:auto; margin:0; flex-shrink:0; accent-color:#111}
label.slot-option span{display:inline-block}
input,textarea,select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
}
input:focus,textarea:focus,select:focus{border-color:rgba(17,17,17,.35)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1 1 220px}
.muted{color:var(--muted)}
.alert{
  border-radius:14px;
  padding:12px 12px;
  margin:0 0 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
}
.alert--error{border-color:rgba(180,40,40,.35); color:#6d1414; background:rgba(255,240,240,.8)}
.alert--ok{border-color:rgba(30,140,70,.35); color:#0f4d28; background:rgba(240,255,246,.85)}
.alert--info{border-color:rgba(30,100,180,.35); color:#1a4d7a; background:rgba(230,245,255,.85)}
.hr{height:1px; background:var(--line); margin:14px 0}
.kpi{display:flex; gap:12px; flex-wrap:wrap}
.kpi .box{
  flex:1 1 0;
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.7);
}
.kpi .num{font-size:22px; font-weight:900}
.dots{display:flex; gap:8px; flex-wrap:wrap}
.dot{
  width:16px; height:16px; border-radius:999px;
  border:1px solid rgba(17,17,17,.35);
  background:transparent;
}
.dot--on{background:#111}
.barcodeWrap{
  display:grid; gap:10px;
  padding:14px;
  border-radius:14px;
  border:1px dashed rgba(17,17,17,.35);
  background:rgba(255,255,255,.6);
  max-width:100%;
  overflow:hidden;
}
.barcodeCanvas{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.barcodeCanvas svg{
  display:block;
  width:100% !important;
  max-width:100%;
  height:auto !important;
}
.footer{border-top:1px solid var(--line); padding:18px 0; background:rgba(255,255,255,.35)}
.footer__row{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.table{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:14px; background:#fff}
.table th,.table td{padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.table th{background:rgba(17,17,17,.04)}
.table tr:last-child td{border-bottom:none}
.tag{display:inline-flex; padding:4px 8px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.7)}
.tag--blue{border-color:#8ab4f8; background:#e8f0fe; color:#1a73e8}
.tag--green{border-color:#81c995; background:#e6f4ea; color:#137333}
.tag--gold{border-color:#fdd663; background:#fef7e0; color:#e37400}
.adminGrid{display:grid; gap:12px}
.adminActions{display:flex; gap:10px; flex-wrap:wrap; width:100%}
.center{text-align:center}

.calendar{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap:8px;
}
.cal-head{
  font-weight:800;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  padding:6px 0 0;
}
.date-cell, .date-cell:visited{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 8px;
  background:rgba(255,255,255,.7);
  min-height:54px;
  text-decoration:none;
  color:inherit;
}
.date-cell--empty{border:none; background:transparent; min-height:54px}
.date-cell__num{font-weight:900}
.date-cell--open{background:rgba(255,255,255,.7) !important}
.date-cell--partial{
  background:rgba(255,240,190,.7) !important;
  background:#ffe066 !important;
}
.date-cell--full{
  background:rgba(255,210,210,.85) !important;
  background:#ff9999 !important;
  border-color:rgba(180,40,40,.25) !important;
}
.date-cell--past{
  background:rgba(0,0,0,.04) !important;
  background:#e8e8e8 !important;
  color:rgba(0,0,0,.35) !important;
  border-color:rgba(0,0,0,.06) !important;
}
.date-cell--discount{
  background:rgba(30,140,70,.2) !important;
  background:#c8f0d0 !important;
  color:var(--ink) !important;
  border-color:rgba(30,140,70,.35) !important;
  cursor:pointer;
}
.date-cell--blocked{
  background:rgba(180,180,180,.3) !important;
  background:#cccccc !important;
  color:rgba(0,0,0,.25) !important;
  border-color:rgba(0,0,0,.08) !important;
  cursor:not-allowed;
  position:relative;
}
.date-cell--blocked::after{
  content:'✕';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:24px;
  color:rgba(180,40,40,.3);
  pointer-events:none;
}
.calendar-legend{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top:16px !important;
  padding:10px 0 !important;
}
.legend-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:13px !important;
  color:var(--muted) !important;
}
.legend-color{
  display:inline-block !important;
  width:16px !important;
  height:16px !important;
  border-radius:4px !important;
  border:1px solid var(--line) !important;
  flex-shrink:0 !important;
}
.legend-color--open{background:rgba(255,255,255,.7) !important; background:#ffffff !important}
.legend-color--partial{background:rgba(255,240,190,.7) !important; background:#ffe066 !important}
.legend-color--full{background:rgba(255,210,210,.85) !important; background:#ff9999 !important}
.legend-color--discount{background:rgba(30,140,70,.2) !important; background:#c8f0d0 !important}
.legend-color--blocked{background:rgba(180,180,180,.3) !important; background:#cccccc !important}

@media (max-width: 760px){
  .container{padding:0 max(12px, env(safe-area-inset-left, 12px))}
  .content{padding:12px max(12px, env(safe-area-inset-left, 12px)) 24px}
  .card{padding:12px}
  .topbar__row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .brand{
    display:block;
    text-align:center;
  }
  .nav{
    justify-content:center;
    padding-bottom:4px;
  }
  .content{
    padding-top:14px;
  }
  .adminActions{gap:8px}
  .adminActions .btn{font-size:13px; padding:10px 12px}
  .table{font-size:13px}
  .table th,.table td{padding:8px 6px}
  .kpi{gap:8px}
  .kpi .box{padding:10px}
  .kpi .num{font-size:18px}
  .pillrow{gap:8px}
  .pill{padding:8px 10px; font-size:13px}
  h1{font-size:24px}
  .btn{padding:11px 12px}
  .calendar{gap:4px}
  .date-cell{padding:8px 4px; min-height:44px; font-size:13px; border-radius:10px}
  .cal-head{font-size:10px}
  .topbar__row{padding:10px 0}
}
@media (max-width: 480px){
  .container{padding:0 max(8px, env(safe-area-inset-left, 8px))}
  .content{padding:10px max(8px, env(safe-area-inset-left, 8px)) 20px}
  .card{padding:10px}
  .btn{padding:10px 10px; font-size:13px}
  .btn--small{padding:8px 8px}
  .adminActions{gap:6px}
  .adminActions .btn{font-size:12px; padding:8px 10px}
  .kpi{gap:6px}
  .kpi .box{padding:8px}
  .calendar{gap:3px}
  .date-cell{padding:6px 2px; min-height:38px; font-size:12px}
  .date-cell__num{font-size:14px}
  .table{font-size:12px}
  .table th,.table td{padding:6px 4px}
  .footer__row{flex-direction:column; text-align:center; gap:4px}
  input,textarea,select{padding:10px 10px; font-size:15px}
  .nav{gap:6px}
  .nav a{font-size:13px}
  .brand{font-size:14px}
}
.home-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:14px;
}
.home-img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  border:1px solid var(--line);
  object-fit:cover;
}
.home-img--hidden{display:none}

/* Toggle switch (ochrona multi-konta) */
.switch-label{
  display:inline-flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  font-size:15px;
  user-select:none;
}
.switch-label input[type="checkbox"]{
  display:none;
}
.switch-slider{
  position:relative;
  width:48px;
  height:26px;
  background:var(--line);
  border-radius:999px;
  transition:background .2s;
  flex-shrink:0;
}
.switch-slider::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:#fff;
  border-radius:999px;
  transition:transform .2s;
}
.switch-label input:checked + .switch-slider{
  background:var(--ink);
}
.switch-label input:checked + .switch-slider::after{
  transform:translateX(22px);
}

/* Utility: hidden */
.hidden{display:none !important}

/* Discount badge on calendar dates */
.date-cell__discount{
  font-size:10px;
  color:#fff;
  background:#1a8c4a;
  border-radius:999px;
  padding:2px 7px;
  margin-top:4px;
  font-weight:800;
  white-space:nowrap;
  display:inline-block;
  line-height:1.4;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.3);
}