/* panel-zarobkow.css */
:root{
  --bg:#0b0d10;
  --text:#ffffff;
  --muted:#9aa3b2;

  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.18);

  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --shadow2: 0 12px 40px rgba(0,0,0,.22);

  --r2:24px;

  --accent:#06b6d4;
  --accent2:#7c3aed;

  --wolt:#1ea7fd;
  --glovo:#ffd300;
  --uber:#1df34b;
  --bolt:#22c55e;
  --stuart:#3b82f6;

  --safeB: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1100px 700px at 120% 20%, rgba(6,182,212,.10), transparent 60%),
    var(--bg);
  min-height:100svh;
  overflow-x:hidden;
}

a{ color: rgba(255,255,255,.92); text-underline-offset:3px; }
a:hover{ opacity:.9; }

.page{ padding:18px; }
@media (max-width:700px){ .page{ padding:0; } }

.wrap{
  width:100%;
  max-width: 1180px;
  margin:0 auto;
  padding:0 18px;
}
@media (max-width:700px){ .wrap{ padding:0; } }

/* HERO */
.hero{
  position:relative;
  border-radius: var(--r2);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.02);
  min-height:250px;
}
@media (max-width:700px){
  .hero{ border-radius:0; border-left:0; border-right:0; min-height:155px; }
}
.heroImg{
  position:absolute; inset:0;
  background: url("/img/index-bg.avif") center / cover no-repeat;
  filter: saturate(1.05);
  transform: scale(1.03);
}
.heroImg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(0,0,0,.18), rgba(0,0,0,.86));
}
@media (max-width:700px){
  .heroImg{ background-size:115% auto; background-position:1% 1%; transform:none; }
  .heroImg::after{ background: radial-gradient(900px 600px at 30% 20%, rgba(0,0,0,.14), rgba(0,0,0,.78)); }
}

.backLink{
  position:absolute;
  right:14px;
  top:14px;
  z-index:3;
  font-size:12px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.backLink:hover{ border-color: var(--line2); }

.heroInner{
  position:relative; z-index:2;
  padding:18px 18px 16px;
  text-align:center;
}
@media (max-width:700px){ .heroInner{ padding:14px 14px 12px; } }

.mark{ display:flex; justify-content:center; margin-top:4px; margin-bottom:12px; }
@media (max-width:700px){ .mark{ display:none; } }

.markDot{
  width:58px;height:58px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:1000;
  color:#0b0d10;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.title{
  font-size:28px; font-weight:1000; letter-spacing:-0.03em;
  text-shadow:0 3px 22px rgba(0,0,0,.65);
}
.sub{
  margin-top:8px;
  color:rgba(210,216,226,.92);
  font-size:13px;
  text-shadow:0 3px 22px rgba(0,0,0,.65);
}
@media (max-width:700px){
  .title{ font-size:22px; }
  .sub{ margin-top:6px; font-size:12px; }
}

.metaRow{
  display:inline-flex;
  width:fit-content;
  max-width:calc(100% - 16px);
  padding:10px 12px;
  border-radius:18px;
  background: rgba(0,0,0,.60);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-top:12px;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.72);
  color:#fff;
  font-size:12px;
  font-weight:950;
  text-shadow:0 2px 14px rgba(0,0,0,.70);
}
.chip strong{ color:#fff; font-weight:1000; }
.chipBtn{ cursor:pointer; }
.chipBtn:hover{ filter: brightness(1.06); border-color: rgba(255,255,255,.32); }

/* CARD */
.card{
  margin-top:16px;
  border-radius: var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow2);
  padding:16px;
  position: relative;
}
@media (max-width:700px){
  .card{ border-radius:0; border-left:0; border-right:0; margin-top:0; padding-bottom: calc(84px + var(--safeB)); }
}

.topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.topLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 260px;
}

/* hamburger */
.hamBtn{
  width:46px;height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.08), transparent 55%),
    rgba(0,0,0,.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.hamBtn:hover{ filter: brightness(1.06); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.hamBtn:active{ transform: translateY(0px) scale(.99); }
.hamBtn span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.92);
  border-radius:99px;
  margin:1.5px 0;
}
@media (max-width:700px){
  .hamBtn{ width:42px; height:42px; border-radius:14px; }
  .hamBtn span{ width:18px; margin:1.2px 0; }
}

.topInfo{ min-width:0; }
.topTitle{ font-weight:1000; }
.topSub{
  margin-top:4px;
  color: rgba(190,198,214,.95);
  font-size:12px;
  line-height:1.3;
  font-weight:900;
}

.quickActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.92);
  font-weight:1000;
  font-size:12px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.btn:hover{ border-color: rgba(255,255,255,.18); filter: brightness(1.05); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.primary{
  border:0;
  color:#0b0d10;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.btn.ghost{ background: rgba(0,0,0,.12); }

/* MAIN LAYOUT */
.layout{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 980px){
  .layout{
    grid-template-columns: 1.15fr .85fr;
    gap:14px;
    align-items:stretch;
  }
}

.pane{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding:12px;
}

/* ✅ (1) paneSummary ma stałą stopkę na dole */
.paneSummary{
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.sumGrid{ flex: 1; }
.footerMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top: 12px;
}

/* calendar top */
.paneTop{ display:flex; flex-direction:column; gap:10px; }
.calNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.navBtn{
  width:44px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.92);
  font-weight:1000;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.navBtn:hover{ border-color: rgba(255,255,255,.18); filter: brightness(1.06); transform: translateY(-1px); }
.navBtn:active{ transform: translateY(0px) scale(.99); }

.calTitle{ text-align:center; min-width:0; }
.calMain{ font-weight:1000; letter-spacing:-.01em; font-size:15px; }
.calSub{ margin-top:4px; color: rgba(170,178,194,.95); font-size:12px; font-weight:900; }

/* app filter bar */
.appFilterBar{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding:10px;
}
.afbTitle{ font-weight:1000; font-size:12px; }
.afbPills{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.afbHint{
  margin-top:8px;
  color: rgba(170,178,194,.95);
  font-size:11.5px;
  font-weight:900;
}

.afPill{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(238,242,255,.95);
  padding:8px 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
.afPill:hover{ border-color: rgba(255,255,255,.22); filter: brightness(1.06); transform: translateY(-1px); }
.afPill:active{ transform: translateY(0px) scale(.99); }
.afDot{
  width:10px;height:10px;border-radius:99px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  background: rgba(255,255,255,.35);
}
.afPill.on{ border-color: rgba(255,255,255,.0); color:#0b0d10; }
.afPill.on.wolt{ background: linear-gradient(135deg, rgba(30,167,253,.95), rgba(30,167,253,.55)); }
.afPill.on.glovo{ background: linear-gradient(135deg, rgba(255,211,0,.95), rgba(255,211,0,.55)); }
.afPill.on.uber{ background: linear-gradient(135deg, rgba(29,243,75,.92), rgba(29,243,75,.52)); }
.afPill.on.bolt{ background: linear-gradient(135deg, rgba(34,197,94,.92), rgba(34,197,94,.52)); }
.afPill.on.stuart{ background: linear-gradient(135deg, rgba(59,130,246,.92), rgba(59,130,246,.52)); }
.afPill.wolt .afDot{ background: var(--wolt); }
.afPill.glovo .afDot{ background: var(--glovo); }
.afPill.uber .afDot{ background: var(--uber); }
.afPill.bolt .afDot{ background: var(--bolt); }
.afPill.stuart .afDot{ background: var(--stuart); }

/* calendar grid */
.calGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}
.dow{
  text-align:center;
  font-size:11px;
  font-weight:1000;
  color: rgba(170,178,194,.95);
  padding:4px 0;
}

.day{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding:10px;
  cursor:pointer;
  color: rgba(238,242,255,.95);
  text-align:left;
  min-height:70px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease, box-shadow .12s ease;
  overflow:hidden;
  position:relative;
}
.day:hover{
  border-color: rgba(255,255,255,.20);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.day:active{ transform: translateY(0px) scale(.99); }
.day[disabled]{ opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }

.dayTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.dayNum{ font-weight:1000; font-size:13px; }
.dayLock{
  font-size:10px;
  font-weight:1000;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(226,232,240,.92);
}

.dayBars{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.bar{
  width:18px;height:6px;
  border-radius:99px;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}
.bar.wolt{ background: var(--wolt); }
.bar.glovo{ background: var(--glovo); }
.bar.uber{ background: var(--uber); }
.bar.bolt{ background: var(--bolt); }
.bar.stuart{ background: var(--stuart); }

.day.today{
  box-shadow: 0 0 0 2px rgba(6,182,212,.28), 0 0 0 6px rgba(6,182,212,.10);
  border-color: rgba(6,182,212,.35);
}

/* summary */
.sumTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.sumTitle{ font-weight:1000; }
.sumHint{ margin-top:6px; font-size:12px; color: rgba(170,178,194,.95); font-weight:900; }

.sumGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media (min-width: 560px){ .sumGrid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px){ .sumGrid{ grid-template-columns: 1fr; } }
@media (min-width: 1180px){ .sumGrid{ grid-template-columns: 1fr 1fr; } }

.sumCard{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding:12px;
}
.sumCard.total{
  border:0;
  color:#0b0d10;
  background: linear-gradient(135deg, rgba(6,182,212,.95), rgba(124,58,237,.95));
}
.sumCard.total .k,
.sumCard.total .s{ color: rgba(0,0,0,.75); }
.sumCard.total .v{ color:#06070a; }

.sumCard .k{ font-weight:1000; color: rgba(226,232,240,.96); }
.sumCard .v{ margin-top:6px; font-size:22px; font-weight:1000; }
.sumCard .s{ margin-top:6px; font-size:12px; color: rgba(170,178,194,.95); font-weight:900; }

.sumCard.wolt{ border-color: rgba(30,167,253,.28); background: linear-gradient(180deg, rgba(30,167,253,.14), rgba(255,255,255,.02)); }
.sumCard.glovo{ border-color: rgba(255,211,0,.28); background: linear-gradient(180deg, rgba(255,211,0,.12), rgba(255,255,255,.02)); }
.sumCard.uber{ border-color: rgba(29,243,75,.28); background: linear-gradient(180deg, rgba(29,243,75,.10), rgba(255,255,255,.02)); }
.sumCard.bolt{ border-color: rgba(34,197,94,.28); background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(255,255,255,.02)); }
.sumCard.stuart{ border-color: rgba(59,130,246,.28); background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(255,255,255,.02)); }

/* ✅ (3) PRO teaser mały */
.srProTeaserSmall{ margin-top: 12px; }
.srProTeaserSmall.hidden{ display:none !important; }
.srProMiniTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.srProMiniTitle{ font-weight:1000; }
.srProMiniSub{
  margin-top:6px;
  font-size:12px;
  color: rgba(190,198,214,.95);
  font-weight:900;
  line-height:1.35;
}
.srProMiniBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.srMiniBtn{
  border-radius:14px;
  padding:10px 12px;
  font-weight:1000;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,242,255,.95);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.srMiniBtn.buy{
  border:none;
  color:#0b0d10;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.srMiniBtn.ghost{ background: rgba(0,0,0,.12); }

.srProMiniStats{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.miniStat{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.miniStat span{
  font-size:12px;
  font-weight:900;
  color: rgba(190,198,214,.95);
}
.miniStat b{ font-weight:1000; }

.srProMiniDetails{
  margin-top:10px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding:10px 12px;
}
.srProMiniDetails summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.srProMiniDetails summary::-webkit-details-marker{ display:none; }

.srProMiniExample{
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:12px;
}
.exRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.exRow:last-child{ border-bottom:0; }
.exMonth{ font-weight:1000; color: rgba(238,242,255,.95); }
.exVals{ font-weight:900; color: rgba(190,198,214,.95); }
.exDiff{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.diffItem{
  border-radius:999px;
  padding:8px 10px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.diffItem.plus{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
  color: rgba(200,255,226,.95);
}
.diffItem.minus{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.10);
  color: rgba(255,210,210,.95);
}

/* MODAL */
.hidden{ display:none !important; }
html.srLock{ overflow:hidden; }

.pzModal{ position:fixed; inset:0; z-index:20000; }
.pzBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pzCard{
  position:relative;
  width: min(980px, calc(100vw - 24px));
  height: min(780px, calc(100vh - 24px));
  margin: 12px auto;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(6,182,212,.14), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(124,58,237,.14), transparent 55%),
    rgba(10,14,22,.94);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
@media (max-width:700px){
  .pzCard{
    width:100vw; height:100vh;
    margin:0; border-radius:0;
    border-left:0; border-right:0; border-top:0;
  }
}

.pzHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.pzTitle{ font-weight:1000; letter-spacing:-.02em; }
.pzSub{ margin-top:4px; color:rgba(190,198,214,.95); font-size:12px; line-height:1.4; }

.pzClose{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(238,242,255,.95);
  width:38px;height:38px;
  border-radius:14px;
  cursor:pointer;
}
.pzClose:hover{ filter: brightness(1.08); }

.pzBody{
  padding:12px 14px 14px;
  overflow:auto;
  padding-bottom: calc(110px + var(--safeB));
}

/* steps */
.srSteps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom: 10px;
}
.srStep{
  width:34px;height:34px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  display:grid;
  place-items:center;
  font-weight:1000;
  color: rgba(238,242,255,.95);
}
.srStep.active{
  border:0;
  color:#0b0d10;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.srStepLine{
  height:2px;
  width: 54px;
  background: rgba(255,255,255,.12);
  border-radius: 99px;
}

.srStepPane{ margin-top: 8px; }
.srPaneTitle{ font-weight:1000; font-size:14px; }
.srPaneHint{
  margin-top:6px;
  color: rgba(170,178,194,.95);
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}

/* app picker */
.srAppGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
@media (max-width:900px){ .srAppGrid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:520px){ .srAppGrid{ grid-template-columns: repeat(2, 1fr);} }

.srAppTile{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:12px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.srAppTile:hover{ border-color: rgba(255,255,255,.18); filter: brightness(1.06); transform: translateY(-1px); }
.srAppTile:active{ transform: translateY(0px) scale(.99); }
.srAppTile.on{ border:0; color:#0b0d10; }

.srAppTileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.srAppLogo{
  width:48px;height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:22px;
  color:#0b0d10;
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.srAppName{ font-weight:1000; margin-top:10px; }

.srTick{
  width:22px;height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  font-size:12px;
  color: rgba(238,242,255,.95);
}
.srAppTile.on .srTick{
  border:0;
  background: rgba(0,0,0,.35);
  color:#fff;
}

/* colors */
.srAppTile.wolt.on{ background: linear-gradient(135deg, rgba(30,167,253,.95), rgba(30,167,253,.55)); }
.srAppTile.glovo.on{ background: linear-gradient(135deg, rgba(255,211,0,.95), rgba(255,211,0,.55)); }
.srAppTile.uber.on{ background: linear-gradient(135deg, rgba(29,243,75,.92), rgba(29,243,75,.52)); }
.srAppTile.bolt.on{ background: linear-gradient(135deg, rgba(34,197,94,.92), rgba(34,197,94,.52)); }
.srAppTile.stuart.on{ background: linear-gradient(135deg, rgba(59,130,246,.92), rgba(59,130,246,.52)); }

.srAppTile.wolt .srAppLogo{ background: var(--wolt); }
.srAppTile.glovo .srAppLogo{ background: var(--glovo); }
.srAppTile.uber .srAppLogo{ background: var(--uber); }
.srAppTile.bolt .srAppLogo{ background: var(--bolt); }
.srAppTile.stuart .srAppLogo{ background: var(--stuart); }

.srTinyRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* time mode */
.srModeStack{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.srModeCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:14px;
  cursor:pointer;
  text-align:left;
  color: rgba(238,242,255,.95);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.srModeCard:hover{ border-color: rgba(255,255,255,.18); filter: brightness(1.06); transform: translateY(-1px); }
.srModeCard:active{ transform: translateY(0px) scale(.99); }
.srModeCard.active{
  border:0;
  color:#0b0d10;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 40px rgba(0,0,0,.20);
}
.srModeTop{ font-weight:1000; }
.srModeDesc{ margin-top:6px; font-size:12px; font-weight:900; opacity:.92; }

/* inputs */
.lbl{
  display:block;
  font-size:12px;
  font-weight:1000;
  color: rgba(226,232,240,.92);
  margin-bottom:6px;
}
.inp{
  width:100%;
  border-radius:16px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  color:rgba(238,242,255,.95);
  font-weight:900;
  outline:none;
}
.inp:focus{
  border-color:rgba(6,182,212,.55);
  box-shadow:0 0 0 3px rgba(6,182,212,.18);
}
.inp[type="number"]::-webkit-outer-spin-button,
.inp[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.inp[type="number"]{ -moz-appearance: textfield; appearance: textfield; }

/* mobile time input */
.inp.srTPInput{ cursor: pointer; user-select:none; }

/* rows */
.srRowsNew{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }

.srRowNew{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:12px;
  display:grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap:10px;
  align-items:end;
}
@media (max-width:700px){
  .srRowNew{ grid-template-columns: 1fr; }
}

.srRowHead{ display:flex; align-items:center; gap:10px; }
.srRowBadge{
  width:40px;height:40px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:1000;
  color:#0b0d10;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.srRowName{ font-weight:1000; }

.srCombinedBox{
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding:12px;
}
.timeGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

.srMiniNote{
  margin-top: 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding:12px;
  color: rgba(226,232,240,.90);
  font-size:12px;
  line-height:1.45;
  font-weight:900;
}
.srMiniNote .srMiniActions{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* footer sticky in modal */
.pzFoot{
  position: sticky;
  bottom: 0;
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  padding:12px 0 calc(8px + var(--safeB));
  background: linear-gradient(180deg, rgba(10,14,22,0) 0%, rgba(10,14,22,.92) 40%, rgba(10,14,22,.96) 100%);
  border-top:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pzLeft{ min-width: 180px; }
.pzTiny{ font-size:12px; color: rgba(170,178,194,.95); font-weight:900; }
.pzRight{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.pzBtn{
  border-radius:14px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(238,242,255,.95);
}
.pzBtn.primary{
  border:none;
  color:#0b0d10;
  background:linear-gradient(135deg,var(--accent), var(--accent2));
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.pzBtn:disabled{ opacity:.45; cursor:not-allowed; }

/* TOAST */
.srToast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(238,242,255,.95);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 950;
  font-size: 12px;
  max-width: min(560px, calc(100vw - 24px));
  text-align: center;
  z-index: 999999;
}
.srToast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ✅ bottom nav: zawsze na dole */
.srBottomNav{ display:none; }
@media (max-width:700px){
  .srBottomNav{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safeB));
    z-index: 12000;
    display:flex;
    gap:10px;
    padding:10px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
  }
  .bnBtn{
    flex:1;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(238,242,255,.95);
    padding:10px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    font-weight:1000;
  }
  .bnBtn.active{
    border:0;
    color:#0b0d10;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
  }
  .bnIco{ font-size:16px; }
  .bnTxt{ font-size:12px; }
}

/* view switch */
@media (max-width:700px){
  body.srViewCalendar .paneSummary{ display:none; }
  body.srViewSummary .paneCalendar{ display:none; }
}

/* drawer */
.srDrawer{ position:fixed; inset:0; z-index: 22000; }
.srDrawerBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.srDrawerPanel{
  position:absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: min(360px, calc(100vw - 24px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(6,182,212,.16), transparent 55%),
    radial-gradient(700px 420px at 110% 10%, rgba(124,58,237,.16), transparent 55%),
    rgba(10,14,22,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.srDrawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.srDrawerTitle{ font-weight:1000; }
.srDrawerX{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(238,242,255,.95);
  width:38px;height:38px;
  border-radius:14px;
  cursor:pointer;
}
.srDrawerX:hover{ filter: brightness(1.08); }
.srDrawerLinks{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.srDrawerLink{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(238,242,255,.95);
  padding:12px 12px;
  font-weight:1000;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
}
.srDrawerLink:hover{ filter: brightness(1.06); border-color: rgba(255,255,255,.18); }
.srDrawerNote{
  margin-top:auto;
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(190,198,214,.95);
  font-size:12px;
  line-height:1.45;
  font-weight:900;
}

/* PRO overlay */
.card.srProLocked .layout{
  filter: blur(7px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.srProOverlay{
  position:absolute;
  inset:0;
  z-index: 50;
  display:grid;
  place-items:center;
  padding:16px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.srProOverlay.hidden{ display:none !important; }

.srProOverlayInner{
  width: min(520px, calc(100% - 24px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(6,182,212,.16), transparent 55%),
    radial-gradient(700px 420px at 110% 10%, rgba(124,58,237,.16), transparent 55%),
    rgba(10,14,22,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  padding: 16px;
  text-align:center;
  text-decoration:none;
  color: rgba(238,242,255,.95);
}
.srProIcon{
  width:56px; height:56px;
  margin: 0 auto 10px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#0b0d10;
  font-size: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.srProTitle{ font-weight: 1000; font-size: 16px; letter-spacing: -.01em; }
.srProDesc{ margin-top: 8px; color: rgba(190,198,214,.95); font-size: 12.5px; line-height: 1.4; }
.srProActions{ margin-top: 14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.srProBtn{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 1000;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,242,255,.95);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 160px;
}
.srProBtn.primary{
  border:none;
  color:#0b0d10;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* mobile density */
@media (max-width: 700px){
  .pane{ padding:10px; border-radius:20px; }
  .calGrid{ gap:6px; }
  .dow{ font-size:10px; padding:3px 0; }

  .day{
    padding:8px;
    min-height:0;
    border-radius:14px;
    aspect-ratio: 1 / 1.05;
    gap:8px;
  }
  .bar{ width:16px; height:6px; }
}

/* SHARE MODAL */
.srShareModal{ position:fixed; inset:0; z-index: 21000; }
.srShareBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.srShareCard{
  position:relative;
  width: min(560px, calc(100vw - 24px));
  margin: 12px auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(6,182,212,.16), transparent 55%),
    radial-gradient(700px 420px at 110% 10%, rgba(124,58,237,.16), transparent 55%),
    rgba(10,14,22,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  overflow:hidden;
}
.srShareHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.srShareTitle{ font-weight:1000; }
.srShareSub{ margin-top:6px; font-size:12px; color: rgba(190,198,214,.95); font-weight:900; line-height:1.4; }
.srShareX{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(238,242,255,.95);
  width:38px;height:38px;
  border-radius:14px;
  cursor:pointer;
}
.srShareBody{ padding: 14px; }

.srHiddenInp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.srShareCalBox{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding:12px;
}
.srShareCalNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.srShareCalTitle{ text-align:center; min-width:0; }

.srShareCalGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:8px;
}
.scDow{
  text-align:center;
  font-size:11px;
  font-weight:1000;
  color: rgba(170,178,194,.95);
  padding:4px 0;
}
.scDay{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding:10px;
  cursor:pointer;
  color: rgba(238,242,255,.95);
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}
.scDay:hover{ border-color: rgba(255,255,255,.20); filter: brightness(1.06); transform: translateY(-1px); }
.scDay:active{ transform: translateY(0px) scale(.99); }
.scDay[disabled]{ opacity:.35; cursor:not-allowed; transform:none; }

.scNum{ font-weight:1000; font-size:13px; }

.scDay.sel{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 3px rgba(6,182,212,.16);
}
.scDay.inRange{
  border-color: rgba(255,255,255,.18);
  background: rgba(6,182,212,.08);
}

.srShareMiniRow{ margin-top:10px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

.srShareHint{
  margin-top:10px;
  font-size:12px;
  color: rgba(190,198,214,.95);
  font-weight:900;
}
.srShareActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* TIME PICKER */
.srTP{ position:fixed; inset:0; z-index: 23000; }
.srTPBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.srTPCard{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safeB));
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(6,182,212,.16), transparent 55%),
    radial-gradient(700px 420px at 110% 10%, rgba(124,58,237,.16), transparent 55%),
    rgba(10,14,22,.98);
  box-shadow: 0 30px 90px rgba(0,0,0,.78);
  overflow:hidden;
}
@media (min-width: 720px){
  .srTPCard{
    width: 520px;
    left: 50%;
    right:auto;
    transform: translateX(-50%);
  }
}
.srTPHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.srTPTitle{ font-weight:1000; }
.srTPX{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(238,242,255,.95);
  width:38px;height:38px;
  border-radius:14px;
  cursor:pointer;
}
.srTPBody{ position:relative; padding: 14px; }
.srTPWheels{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.srTPCol{ width: 140px; }
.srTPColLab{
  font-size:12px;
  font-weight:1000;
  color: rgba(190,198,214,.95);
  margin-bottom:8px;
}
.srTPColon{
  font-weight:1000;
  font-size:34px;
  color: rgba(238,242,255,.85);
  margin-top: 18px;
}
.srTPWheel{
  height: 220px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 74px 0;
}
.srTPItem{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:28px;
  color: rgba(238,242,255,.92);
  scroll-snap-align: center;
}
.srTPWheel::-webkit-scrollbar{ width:0; height:0; }
.srTPShadow{
  pointer-events:none;
  position:absolute;
  left: 14px;
  right: 14px;
  top: 74px;
  height: 44px;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px rgba(6,182,212,.18),
    0 0 0 6px rgba(6,182,212,.08);
}
.srTPFoot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding: 14px;
  border-top:1px solid rgba(255,255,255,.08);
}