/* Start 2.0 – dashboard (bez ruszania logiki) */

.start{
  position:relative;
  min-height: calc(100vh - var(--navH));
  overflow:hidden;
}

.start__bg{
  position:absolute; inset:0;
  background-image: url("/static/img/hero-bg.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.06);
  transform: scale(1.02);
}

.start__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(125,211,252,0.18), transparent 60%),
    radial-gradient(900px 600px at 80% 15%, rgba(251,191,36,0.14), transparent 60%),
    linear-gradient(180deg, rgba(5,8,14,0.30), rgba(5,8,14,0.78));
}

/* watermark logo */
.start__overlay::after{
  content:"";
  position:absolute;
  right:-6%;
  bottom:-18%;
  width:min(820px, 70vw);
  height:min(820px, 70vw);
  background: url("/static/img/logo.png") no-repeat center / contain;
  opacity: 0.10;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.35));
  transform: rotate(-8deg);
  pointer-events:none;
}

.start__wrap{
  position:relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 16px 22px;
}

.start__top{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  align-items:start;
  margin-top: 10px;
}

@media (max-width: 980px){
  .start__top{ grid-template-columns: 1fr; }
  .start__overlay::after{ right:-22%; bottom:-28%; opacity: 0.08; }
}

.start__title{
  margin: 10px 0 10px;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: .2px;
  text-shadow: 0 16px 44px rgba(0,0,0,0.45);
}
.start__subtitle{
  margin: 0 0 14px;
  max-width: 860px;
  color: rgba(232,238,252,0.92);
  line-height: 1.6;
  font-size: 16px;
}

.start__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,16,28,0.45);
  color: rgba(240,246,255,0.96);
  text-decoration:none;
  font-weight: 700;
  letter-spacing:.2px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.22); background: rgba(10,16,28,0.62); }
.btn:active{ transform: translateY(0px); }

.btn--primary{
  border-color: rgba(125,211,252,0.35);
  background: linear-gradient(180deg, rgba(125,211,252,0.18), rgba(10,16,28,0.55));
  box-shadow: 0 14px 32px rgba(56,189,248,0.10), 0 10px 26px rgba(0,0,0,0.28);
}
.btn--primary:hover{ border-color: rgba(125,211,252,0.55); }

.btn--ghost{
  background: rgba(10,16,28,0.35);
}

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

.chip{
  display:inline-flex;
  align-items:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,16,28,0.34);
  color: rgba(236,244,255,0.9);
  text-decoration:none;
  font-weight: 650;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.chip:hover{ background: rgba(10,16,28,0.55); border-color: rgba(255,255,255,0.20); transform: translateY(-1px); }

.start__panel .panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(7,12,22,0.48);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
  overflow:hidden;
}

.panel__head{
  padding: 14px 14px 10px;
}
.panel__title{
  margin:0;
  font-size: 16px;
  letter-spacing: .2px;
}
.panel__hint{
  margin: 6px 0 0;
  color: rgba(222,232,252,0.78);
  font-size: 13px;
  line-height: 1.45;
}

.quick{
  padding: 0 14px 12px;
}
.quick__label{
  display:block;
  margin: 10px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(226,236,255,0.78);
  letter-spacing: .18px;
}
.quick__row{
  display:flex;
  gap: 10px;
}
.quick__input{
  flex: 1 1 auto;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,16,28,0.46);
  color: rgba(240,246,255,0.95);
  padding: 0 14px;
  outline: none;
}
.quick__input:focus{
  border-color: rgba(125,211,252,0.45);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.12);
}
.quick__btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(125,211,252,0.14);
  color: rgba(240,246,255,0.95);
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.quick__btn:hover{ transform: translateY(-1px); background: rgba(125,211,252,0.22); border-color: rgba(125,211,252,0.35); }
.quick__btn:active{ transform: translateY(0px); }

.quick__result{
  margin-top: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,16,28,0.34);
  color: rgba(234,242,255,0.88);
  line-height: 1.45;
  font-size: 13px;
}


.quick__note{ display:block; color: rgba(234,242,255,0.88); }
.quick__loading{ display:inline-flex; align-items:center; gap:8px; font-weight:800; }
.quick__loading:before{
  content:"";
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(125,211,252,0.95);
  animation: spin .9s linear infinite;
}
.quick__error{ display:block; color: rgba(255,210,210,0.92); font-weight: 800; }
@keyframes spin{ to{ transform: rotate(360deg);} }

/* Mini v2 (quick city) – PRO */
.mini2{ display:flex; flex-direction:column; gap:10px; }
.mini2__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mini2__left{ min-width: 0; }
.mini2__loc{
  font-weight: 950;
  color: rgba(243,248,255,0.98);
  letter-spacing: .2px;
  font-size: 14px;
  line-height: 1.2;
}
.mini2__meta{
  margin-top: 6px;
  display:flex; flex-wrap:wrap;
  align-items:center;
  gap: 8px;
  color: rgba(230,240,255,0.86);
  font-size: 12.5px;
}
.mini2__wicon{
  width: 24px; height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.26);
}
.mini2__cond{ font-weight: 800; }
.mini2__time{ opacity: .85; }
.mini2__tag{
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5,10,18,0.20);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .15px;
}

.mini2__temp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 30px rgba(0,0,0,0.30);
  white-space: nowrap;
}
.mini2__t{ font-weight: 1000; letter-spacing: .2px; font-size: 14px; }

/* temperature tones (reuse palette) */
.mini2__temp.t--ice   { background: linear-gradient(135deg, rgba(14,165,233,0.28), rgba(59,130,246,0.20)); }
.mini2__temp.t--frost { background: linear-gradient(135deg, rgba(56,189,248,0.26), rgba(99,102,241,0.20)); }
.mini2__temp.t--cold  { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(14,165,233,0.18)); }
.mini2__temp.t--mild  { background: linear-gradient(135deg, rgba(16,185,129,0.26), rgba(34,197,94,0.18)); }
.mini2__temp.t--warm  { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(251,146,60,0.22)); }
.mini2__temp.t--hot   { background: linear-gradient(135deg, rgba(251,146,60,0.24), rgba(239,68,68,0.24)); }
.mini2__temp.t--heat  { background: linear-gradient(135deg, rgba(239,68,68,0.30), rgba(220,38,38,0.22)); }
.mini2__temp.t--na    { background: rgba(255,255,255,0.10); }

.mini2__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.mini2__item{
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,10,18,0.18);
  line-height: 1.15;
  min-width: 0;
}

.mini2__sub{ font-weight: 700; opacity: .8; font-size: 12px; }

.mini2__item span{
  display:block;
  font-size: 11px;
  opacity: .85;
  margin-bottom: 4px;
}
.mini2__item b{
  display:block;
  font-size: 13px;
  font-weight: 950;
  color: rgba(240,246,255,0.96);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px){
  .mini2__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mini2__tag{ margin-left: 0; }
}

/* Mini (quick city) – PRO */
.mini{ display:flex; flex-direction:column; gap:8px; }
.mini__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mini__loc{ font-weight: 800; color: rgba(243,248,255,0.96); letter-spacing: .2px; }
.mini__temp{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  white-space: nowrap;
}
.mini__ico{ filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
.mini__t{ font-weight: 900; letter-spacing: .2px; }

.mini__sub{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  color: rgba(230,240,255,0.90);
  line-height: 1.35;
}
.mini__pill{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(5,10,18,0.20);
}
.mini__sep{ opacity:.55; }

/* temperature tones */
.mini__temp.t--ice   { background: linear-gradient(135deg, rgba(14,165,233,0.25), rgba(59,130,246,0.18)); }
.mini__temp.t--frost { background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(99,102,241,0.18)); }
.mini__temp.t--cold  { background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(16,185,129,0.12)); }
.mini__temp.t--mild  { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(250,204,21,0.10)); }
.mini__temp.t--warm  { background: linear-gradient(135deg, rgba(250,204,21,0.18), rgba(251,146,60,0.14)); }
.mini__temp.t--hot   { background: linear-gradient(135deg, rgba(251,146,60,0.20), rgba(239,68,68,0.14)); }
.mini__temp.t--heat  { background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(168,85,247,0.14)); }
.mini__temp.t--na    { background: rgba(255,255,255,0.10); }

/* mobile tightening */
@media (max-width: 520px){
  .mini__top{ align-items:flex-start; }
  .mini__loc{ font-size: 13px; }
  .mini__temp{ padding: 6px 9px; }
  .mini__sub{ gap:6px 8px; }
  .mini__pill{ padding: 3px 7px; font-size: 12px; }
}

.panel__foot{
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,16,28,0.20);
}

.kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.kpi{
  display:flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,16,28,0.34);
  text-decoration:none;
  color: rgba(240,246,255,0.94);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.kpi:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.18); background: rgba(10,16,28,0.52); }
.kpi__k{ font-weight: 850; font-size: 13px; }
.kpi__v{ font-size: 12px; color: rgba(224,234,255,0.75); }

@media (max-width: 520px){
  .kpis{ grid-template-columns: 1fr; }
  .quick__row{ flex-direction: column; }
  .quick__btn{ width: 100%; }
}

/* Tiles grid */
.start__grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .start__grid{ grid-template-columns: 1fr; }
}

.tile{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(7,12,22,0.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.38);
  padding: 14px 14px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.tile--highlight{
  border-color: rgba(251,191,36,0.22);
  background: linear-gradient(180deg, rgba(251,191,36,0.08), rgba(7,12,22,0.46));
}
.tile__title{
  margin:0;
  font-size: 16px;
  letter-spacing: .2px;
}
.tile__text{
  margin:0;
  color: rgba(226,236,255,0.86);
  line-height: 1.55;
  font-size: 13.5px;
}
.tile__link{
  margin-top: 4px;
  align-self: flex-start;
  color: rgba(125,211,252,0.95);
  text-decoration: none;
  font-weight: 800;
}
.tile__link:hover{ text-decoration: underline; }

.start__note{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(7,12,22,0.35);
  padding: 12px 14px;
  color: rgba(222,232,252,0.78);
  font-size: 12.5px;
  line-height: 1.55;
}


/* PRO: make "Opinie" visible on Start */
.chip--pulse{
  position: relative;
  animation: chipPulse 1.6s ease-in-out infinite;
}
.chip--pulse::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,.35);
  opacity: .0;
  animation: chipRing 1.6s ease-out infinite;
}

/* new: stronger, always readable "Opinie" chip */
.chip--opinie{
  position: relative;
  font-weight: 900;
  letter-spacing: .15px;
  color: rgba(255,246,214,0.98);
  border-color: rgba(251,191,36,0.30);
  background:
    radial-gradient(140px 80px at 20% 40%, rgba(251,191,36,0.30), transparent 60%),
    linear-gradient(180deg, rgba(251,191,36,0.18), rgba(10,16,28,0.24));
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  animation: chipPulse 1.6s ease-in-out infinite;
}
.chip--opinie:hover{
  border-color: rgba(251,191,36,0.42);
  background:
    radial-gradient(140px 80px at 20% 40%, rgba(251,191,36,0.36), transparent 62%),
    linear-gradient(180deg, rgba(251,191,36,0.22), rgba(10,16,28,0.28));
}
.chip--opinie::after{
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.38);
  opacity: .0;
  animation: chipRing 1.6s ease-out infinite;
}
@keyframes chipPulse{
  0%,100%{ transform: translateY(0); box-shadow: 0 0 0 rgba(255,215,0,0); }
  50%{ transform: translateY(-1px); box-shadow: 0 0 18px rgba(255,215,0,.22); }
}
@keyframes chipRing{
  0%{ opacity: .0; transform: scale(.9); }
  35%{ opacity: .7; }
  100%{ opacity: 0; transform: scale(1.25); }
}



/* --- Wsparcie + Sala Chwały (PRO) --- */
.support{
  margin-top: 18px;
}
.support__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 980px){
  .support__grid{ grid-template-columns: 1fr 1fr; }
}

.support__card{
  position:relative;
  border-radius: 18px;
  padding: 16px;
  background: rgba(10,14,22,0.68);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  overflow:hidden;
  backdrop-filter: blur(8px);
}
.support__card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,255,180,0.18), rgba(120,80,255,0.16), rgba(255,210,80,0.14));
  filter: blur(8px);
  opacity: .55;
  pointer-events:none;
}
.support__card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.24));
  pointer-events:none;
}
.support__card > *{ position:relative; z-index:1; }

.support__kicker{
  font-weight: 800;
  letter-spacing: .3px;
  opacity: .95;
}
.support__title{
  margin: 4px 0 0 0;
  font-size: 20px;
  line-height: 1.15;
}
.support__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.support__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(110,200,255,0.35);
  background: rgba(20,40,65,0.55);
  color: #e9f7ff;
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 0 0 rgba(80,220,255,0);
  animation: supportPulse 1.6s ease-in-out infinite;
  white-space: nowrap;
}
.support__btn:hover{ transform: translateY(-1px); }
@keyframes supportPulse{
  0%{ box-shadow: 0 0 0 0 rgba(80,220,255,0.0); }
  50%{ box-shadow: 0 0 22px 4px rgba(80,220,255,0.18); }
  100%{ box-shadow: 0 0 0 0 rgba(80,220,255,0.0); }
}

.support__text{
  margin: 10px 0 0 0;
  opacity: .92;
  max-width: 75ch;
}
.support__thanks{
  display:inline-block;
  margin-left: 6px;
  font-weight: 800;
  opacity: 1;
}

.support__badges{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.support__badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 800;
  font-size: 12px;
  opacity: .95;
}

.support__features{
  margin: 12px 0 0 0;
  padding-left: 18px;
  opacity: .95;
  line-height: 1.55;
  font-size: 13.5px;
}
.support__features li{ margin: 6px 0; }

/* Hall */
.support__hallHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.support__hallTitle{
  margin: 4px 0 0 0;
  font-size: 18px;
  line-height: 1.15;
}
.support__hallSub{
  margin: 6px 0 0 0;
  opacity: .88;
  font-size: 13px;
}
.support__count{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 18px;
  background: rgba(255,215,120,0.14);
  border: 1px solid rgba(255,215,120,0.22);
}

.support__list{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}
.support__row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
}
.support__row:hover{
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.09);
}


/* 🏆 Champion highlight (Sala Chwały) */
.support__row--champion{
  background: radial-gradient(circle at 20% 20%, rgba(255,215,120,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,215,120,0.45);
  box-shadow: 0 0 0 1px rgba(255,215,120,0.14), 0 14px 40px rgba(0,0,0,0.35);
  padding: 14px 12px;
}
.support__row--champion:hover{
  background: radial-gradient(circle at 20% 20%, rgba(255,215,120,0.28), rgba(255,255,255,0.07));
  border-color: rgba(255,215,120,0.60);
}
.support__avatar--champion{
  background: radial-gradient(circle at 30% 30%, rgba(255,215,120,0.55), rgba(255,140,60,0.22));
  border-color: rgba(255,215,120,0.55);
  color: #fff7df;
}
.support__rank--champion{
  background: rgba(255,215,120,0.26);
  border-color: rgba(255,215,120,0.55);
}
.support__highlight{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .95;
}
.support__crown{
  margin-left: 6px;
  filter: drop-shadow(0 6px 14px rgba(255,215,120,0.20));
}
.support__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .5px;
  background: radial-gradient(circle at 30% 30%, rgba(120,255,220,0.34), rgba(60,120,255,0.18));
  border: 1px solid rgba(255,255,255,0.12);
  color: #eaffff;
  flex: 0 0 auto;
}
.support__who{ min-width: 0; }
.support__name{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.1;
}
.support__mail{
  opacity: .85;
  font-size: 13px;
  margin-top: 2px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48vw;
}
@media (min-width: 980px){
  .support__mail{ max-width: 360px; }
}

.support__rank{
  margin-left: auto;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,215,120,0.14);
  border: 1px solid rgba(255,215,120,0.22);
  opacity: .95;
}

.support__note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  opacity: .92;
  display:flex;
  gap: 8px;
  align-items:flex-start;
}
.support__noteStar{ margin-top: 1px; }

/* scrollbars (WebKit) */
.support__list::-webkit-scrollbar{ width: 10px; }
.support__list::-webkit-scrollbar-track{ background: rgba(255,255,255,0.03); border-radius: 999px; }
.support__list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.16); border-radius: 999px; }
.support__list::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.22); }

/* mobile tweaks */
@media (max-width: 520px){
  .support__card{ padding: 14px; }
  .support__btn{ width: 100%; }
  .support__mail{ max-width: 52vw; }
  .support__list{ max-height: 320px; }
}


/* EXTRA mobile polish (audit 2026-02) */
.start__wrap{
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}

/* smoother scroll on iOS */
.support__list{
  -webkit-overflow-scrolling: touch;
}

/* ultra-small screens */
@media (max-width: 420px){
  .support__title{ font-size: 18px; }
  .support__hallTitle{ font-size: 16px; }
  .support__row{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .support__who{ flex: 1 1 100%; }
  .support__mail{
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
  .support__rank{
    margin-left: 0;
    margin-top: 2px;
  }
}


/* Support PRO polish */
.support__card{
  background: rgba(10,14,22,0.68);
}
.support__card--cta{
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(34,211,238,0.16), transparent 55%),
    radial-gradient(820px 420px at 90% 0%, rgba(251,191,36,0.12), transparent 55%),
    rgba(10,14,22,0.68);
}
.support__card--hall{
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(99,102,241,0.14), transparent 55%),
    radial-gradient(820px 420px at 90% 20%, rgba(16,185,129,0.10), transparent 55%),
    rgba(10,14,22,0.68);
}

.support__btn{
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(125,211,252,0.28);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.support__btn::after{
  content:"";
  position:absolute; top:-40%; left:-30%;
  width: 60%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  transform: rotate(18deg);
  opacity:.65;
  transition: transform .9s ease;
}
.support__btn:hover::after{ transform: translateX(220%) rotate(18deg); }

.support__row{
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.support__row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}

/* Top 3 highlight + medals */
.support__row:nth-child(1){
  border-color: rgba(251,191,36,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}
.support__row:nth-child(2){ border-color: rgba(226,232,240,0.28); }
.support__row:nth-child(3){ border-color: rgba(251,146,60,0.22); }

.support__row:nth-child(1) .support__rank{ border-color: rgba(251,191,36,0.45); }
.support__row:nth-child(2) .support__rank{ border-color: rgba(226,232,240,0.35); }
.support__row:nth-child(3) .support__rank{ border-color: rgba(251,146,60,0.32); }

.support__rank{ position:relative; }
.support__row:nth-child(1) .support__rank::before{ content:"🥇"; margin-right:6px; }
.support__row:nth-child(2) .support__rank::before{ content:"🥈"; margin-right:6px; }
.support__row:nth-child(3) .support__rank::before{ content:"🥉"; margin-right:6px; }

/* Mobile: tighten support typography + safer mail */
@media (max-width: 520px){
  .support__card{ padding: 14px; border-radius: 16px; }
  .support__hallTitle{ font-size: 16px; }
  .support__title{ font-size: 18px; }
  .support__mail{
    opacity: .85;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .support__rank{ padding: 6px 10px; }
}
@media (max-width: 420px){
  .support__hallHead{ gap: 10px; }
  .support__count{ min-width: 40px; }
  .support__avatar{ width: 40px; height: 40px; }
  .support__name{ font-size: 14px; }
}

/* =========================
   START: NAV TILES (PRO)
   ========================= */
.start__navgrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-width: 980px;
}

@media (max-width: 980px){
  .start__navgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .start__navgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
}
@media (max-width: 440px){
  .start__navgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.navtile{
  --a1: 125,211,252;
  --a2: 59,130,246;
  position:relative;
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,16,28,0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  color: rgba(240,246,255,0.96);
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .15px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.navtile:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(10,16,28,0.58);
  box-shadow: 0 16px 36px rgba(0,0,0,0.34);
}

.navtile:active{ transform: translateY(0px); }

.navtile__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(var(--a1),0.32), rgba(var(--a2),0.18));
  border: 1px solid rgba(var(--a1),0.28);
  color: rgba(240,246,255,0.98);
  flex: 0 0 auto;
}

.navtile__icon svg{
  width: 20px;
  height: 20px;
}

.navtile__label{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  font-size: 14px;
  line-height: 1.15;
  max-height: 2.4em;
}

/* wyróżnienie: Opinie */
.navtile--opinia{
  border-color: rgba(251,191,36,0.42);
  background: linear-gradient(180deg, rgba(251,191,36,0.18), rgba(10,16,28,0.50));
  box-shadow: 0 16px 36px rgba(251,191,36,0.12), 0 14px 34px rgba(0,0,0,0.30);
  animation: opiniaPulse 2.2s ease-in-out infinite;
}

.navtile--opinia .navtile__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(var(--a1),0.32), rgba(var(--a2),0.18));
  border: 1px solid rgba(var(--a1),0.28);
  color: rgba(240,246,255,0.98);
  flex: 0 0 auto;
  color: rgba(255,248,220,0.98);
}

.navtile__badge{
  position:absolute;
  right: 10px;
  top: 10px;
  display:inline-grid;
  place-items:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(251,191,36,0.18);
  border: 1px solid rgba(251,191,36,0.35);
  color: rgba(255,236,180,0.95);
  font-size: 12px;
  box-shadow: 0 12px 26px rgba(251,191,36,0.10);
}

@keyframes opiniaPulse{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
}

@media (max-width: 720px){
  .navtile{ min-height: 52px; padding: 10px 11px; }
  .navtile__label{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  font-size: 14px;
  line-height: 1.15;
  max-height: 2.4em;
}
}


/* Kolorowe akcenty ikon (per kafelek) */
.navtile--prognoza{ --a1: 56,189,248; --a2: 99,102,241; }    /* cyan -> indigo */
.navtile--ostrzezenia{ --a1: 251,146,60; --a2: 239,68,68; }  /* orange -> red */
.navtile--opady{ --a1: 59,130,246; --a2: 14,165,233; }       /* blue -> sky */
.navtile--radar{ --a1: 168,85,247; --a2: 59,130,246; }       /* purple -> blue */
.navtile--wir{ --a1: 20,184,166; --a2: 34,197,94; }          /* teal -> green */
.navtile--zorza{ --a1: 34,197,94; --a2: 16,185,129; }

.navtile--satelita{background:linear-gradient(135deg, rgba(120,180,255,.25), rgba(120,255,220,.12)); border-color: rgba(120,180,255,.35)}
.navtile--satelita .navtile__icon{color:#8fd3ff}
        /* green -> emerald */
.navtile--baryczna{ --a1: 148,163,184; --a2: 59,130,246; }   /* slate -> blue */
.navtile--europa{ --a1: 99,102,241; --a2: 59,130,246; }      /* indigo -> blue */
.navtile--sztorm{ --a1: 244,63,94; --a2: 251,146,60; }       /* rose -> orange */


/* AQ (PM2.5) – kolor zgodny z legendą */
.mini2__aqv{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 54px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
  letter-spacing: .2px;
}

.mini2__aqv.aq--good{
  background: rgba(34,197,94,0.16);
  border-color: rgba(34,197,94,0.32);
}
.mini2__aqv.aq--moderate{
  background: rgba(250,204,21,0.16);
  border-color: rgba(250,204,21,0.32);
}
.mini2__aqv.aq--usg{
  background: rgba(249,115,22,0.16);
  border-color: rgba(249,115,22,0.32);
}
.mini2__aqv.aq--unhealthy{
  background: rgba(239,68,68,0.16);
  border-color: rgba(239,68,68,0.34);
}
.mini2__aqv.aq--very{
  background: rgba(168,85,247,0.16);
  border-color: rgba(168,85,247,0.34);
}
.mini2__aqv.aq--hazard{
  background: rgba(147,51,234,0.20);
  border-color: rgba(147,51,234,0.40);
}
.mini2__aqv.aq--na{
  opacity: .75;
}

/* ==============================
   QUICK PODGLĄD – UI PRO (FIX)
   - mniejsza ikonka
   - parametry w małych kafelkach
   - animowana ikonka pogody
   ============================== */

.qcard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.qcard__meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.qicon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  position:relative;
  overflow:hidden;
}

.qicon::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: conic-gradient(from 180deg, rgba(125,211,252,0.0), rgba(125,211,252,0.35), rgba(34,197,94,0.25), rgba(251,146,60,0.25), rgba(125,211,252,0.0));
  animation: qspin 4.5s linear infinite;
  opacity:0.55;
  filter: blur(10px);
}

.qcard__icon{
  width:36px !important;
  height:36px !important;
  object-fit:contain;
  position:relative;
  z-index:1;
  animation: qfloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}

@keyframes qfloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

@keyframes qspin{
  to{ transform: rotate(360deg); }
}

.qgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:10px;
  margin-top:12px;
}

.qbox{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:10px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.qbox__k{
  font-size:12px;
  opacity:0.78;
  margin-bottom:4px;
}

.qbox__v{
  font-size:15px;
  font-weight:800;
  letter-spacing:0.1px;
}

.qsub{
  display:inline-block;
  margin-left:6px;
  font-size:12px;
  font-weight:800;
  opacity:0.85;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  vertical-align:middle;
}

/* Mobile: jeszcze ciaśniej i mniejsza ikonka */
@media (max-width: 520px){
  .qicon{ width:46px; height:46px; border-radius:14px; }
  .qcard__icon{ width:32px !important; height:32px !important; }
  .qgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qbox{ padding:9px; }
  .qbox__v{ font-size:14px; }
}


/* Tornado tile (PRO) */
.navtile--tornado{
  --tile-accent: 255 102 0;
}
.navtile--tornado .navtile__icon{
  background: rgba(255,102,0,.10);
}
.navtile--tornado:hover{
  box-shadow: 0 12px 30px rgba(255,102,0,.18);
}


/* Blog CTA (PRO) */
.start__ctaBlog{
  border-color: rgba(246,198,75,0.35) !important;
  background: linear-gradient(135deg, rgba(246,198,75,0.28), rgba(140,0,255,0.16)) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.40);
}
.start__ctaBlog:hover{ filter: brightness(1.06); }

.navtile--blog{ border-color: rgba(246,198,75,0.18); }
.navtile--blog:hover{ border-color: rgba(246,198,75,0.34); }