/* =========================================
   Solution Systems – osTicket Panel (Light)
   Clean, Enterprise, No Duplicates (FINAL)
========================================= */

/* ========== TOKENS ========== */
:root{
  --ss-primary:#39C6FF;
  --ss-primary-dark:#1E5AFF;

  --ss-bg1:#ffffff;
  --ss-bg2:#f3f6fb;

  --ss-text:#0b1220;
  --ss-body:rgba(26,31,54,.78);
  --ss-muted:rgba(26,31,54,.70);

  --ss-line:rgba(15,23,42,.10);
  --ss-card:rgba(255,255,255,.94);

  --ss-shadow:
    0 28px 90px rgba(15,23,42,.12),
    0 2px 6px rgba(15,23,42,.04);
}

/* ========== GLOBAL ========== */
html, body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: var(--ss-text) !important;

  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(57,198,255,.16), transparent 58%),
    radial-gradient(900px 650px at 85% 12%, rgba(30,90,255,.12), transparent 60%),
    linear-gradient(180deg, var(--ss-bg1), var(--ss-bg2)) !important;
}

a{
  color: var(--ss-primary) !important;
  transition: opacity .2s ease;
}
a:hover{ opacity: .86; }

/* wszystko ma być nad tłem */
#container,
#header,
#content,
#footer,
body > *{
  position: relative;
  z-index: 2;
}

/* ========== PARTICLES BACKGROUND ========== */
.ss-hero{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#tsparticles,
.ss-hero__particles{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#tsparticles canvas,
.ss-hero__particles canvas{
  width: 100% !important;
  height: 100% !important;
  opacity: .60 !important;
  filter: blur(.3px);
}

/* overlay jak na WWW: lekki premium fade + delikatne glowy */
.ss-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(44,111,255,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(44,111,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.99)) !important;
}

/* ========== MAIN CARD ========== */
#container{
  max-width: 1180px !important;
  margin: 60px auto 40px auto;
  padding: 40px 44px 28px !important;

  background: var(--ss-card) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 26px !important;
  box-shadow: var(--ss-shadow) !important;
}

/* ========== HEADER (GLASS) ========== */
#header{
  position: sticky !important;
  top: 0;
  z-index: 60 !important;

  /* dopasowane do paddingów kontenera */
  margin: -40px -44px 12px !important;
  padding: 18px 44px 16px !important;

  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;

  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 8px 30px rgba(15,23,42,.08) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

/* cienka linia „neon” */
#header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(57,198,255,.45), rgba(30,90,255,.35), transparent);
  opacity:.55;
}

#logo img{
  height: 56px !important;
  width: auto !important;
  transition: transform .25s ease, opacity .25s ease;
  filter: drop-shadow(0 4px 12px rgba(15,23,42,.14));
}
#logo img:hover{ transform: scale(1.04); opacity:.92; }

#header .pull-right{
  font-size: 14px !important;
  color: var(--ss-muted) !important;
}
#header .pull-right a{
  font-weight: 800 !important;
  color: rgba(26,31,54,.85) !important;
}
#header .pull-right a:hover{ color:#0b2a4a !important; }

/* mobilka: żeby header nie wychodził */
@media (max-width: 980px){
  #container{ padding: 34px 24px 22px !important; }
  #header{
    margin: -34px -24px 12px !important;
    padding: 14px 24px 12px !important;
  }
}

/* ========== NAV (WWW: text links + underline) ========== */
/* czyścimy wszystkie stare „piguły” */
#nav, #nav ul, #nav li, #nav li a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#nav{
  display: flex !important;
  align-items: center;
  gap: 42px !important;
  flex-wrap: wrap;

  margin: 10px 0 30px 0 !important;
  padding: 0 0 18px 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

#nav li{ list-style: none !important; margin:0 !important; padding:0 !important; }

#nav li a{
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;

  color: rgba(26,31,54,.72) !important;
  padding: 0 !important;

  position: relative;
  transition: color .25s ease;
  text-decoration: none !important;
}

#nav li a:hover{ color: #0b2a4a !important; }

#nav li a.active{
  color: #0b2a4a !important;
}
#nav li a.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--ss-primary), var(--ss-primary-dark));
  border-radius: 2px;
}

/* ========== TYPOGRAPHY ========== */
#content, #content p{
  color: var(--ss-body) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

h1,h2,h3{
  color: var(--ss-text) !important;
  letter-spacing: -0.02em;
}

/* ========== FORMS ========== */
input,
select,
textarea{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: var(--ss-text) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

input::placeholder,
textarea::placeholder{
  color: rgba(26,31,54,.45) !important;
}

/* ========== BUTTONS ========== */
button,
.btn,
input[type="submit"],
input[type="button"],
a.button{
  background: linear-gradient(135deg, var(--ss-primary), var(--ss-primary-dark)) !important;
  border: 0 !important;
  color: #fff !important;

  border-radius: 18px !important;
  padding: 14px 20px !important;

  font-weight: 800 !important;
  letter-spacing:.3px;

  box-shadow: 0 16px 42px rgba(57,198,255,.22) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
button:hover,
.btn:hover,
input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(57,198,255,.28) !important;
}

/* ========== LANDING (opcjonalnie, jeśli używasz swoich kart) ========== */
#landing_page.ss-landing{ margin-top: 10px; }

.ss-landing__top{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 980px){
  .ss-landing__top{ grid-template-columns: 1fr; }
}

.ss-landing__title{
  font-size: 42px;
  line-height: 1.1;
  margin: 6px 0 12px;
  letter-spacing: -0.02em;
  color: var(--ss-text);
  font-weight: 900;
}

.ss-landing__subtitle{
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ss-body);
  max-width: 720px;
}

.ss-landing__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ss-btn{ text-decoration:none !important; display:inline-flex; align-items:center; }

.ss-btn--ghost{
  background: rgba(255,255,255,.75) !important;
  color: #0b2a4a !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
}
.ss-btn--ghost:hover{
  border-color: rgba(57,198,255,.35) !important;
  background: rgba(57,198,255,.10) !important;
}

.ss-btn--small{
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

.ss-landing__cards{
  display: grid;
  gap: 18px;
}

.ss-card{
  display:block;
  text-decoration:none !important;

  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 22px;

  padding: 18px 18px;

  box-shadow:
      0 18px 50px rgba(15,23,42,.10),
      0 2px 6px rgba(15,23,42,.04);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ss-card:hover{
  transform: translateY(-3px);
  box-shadow:
      0 28px 80px rgba(15,23,42,.16),
      0 4px 10px rgba(15,23,42,.05);
  border-color: rgba(57,198,255,.35) !important;
}

.ss-card__title{
  font-weight: 900;
  color: #0b2a4a;
  font-size: 16px;
  margin-bottom: 6px;
}
.ss-card__desc{
  color: rgba(26,31,54,.74);
  font-size: 14px;
  line-height: 1.6;
}

/* osTicket landing layout */
#landing_page .sidebar{ display:none !important; }
#landing_page .main-content{ width:100% !important; float:none !important; }

/* ========== FOOTER ========== */
#footer{
  margin-top: 26px !important;
  background: transparent !important;
  border: 0 !important;
}

#footer::before{
  content:"";
  display:block;
  width:120px;
  height:2px;
  margin:0 auto 18px auto;
  background: linear-gradient(90deg, transparent, var(--ss-primary), transparent);
  opacity:.35;
}

.ss-footer{
  text-align:center;
  padding:18px 10px;
  color: rgba(26,31,54,.70);
}
.ss-footer__logo{ margin-bottom:12px; }
.ss-footer__logo img{
  height:32px;
  width:auto;
  opacity:.85;
  transition: transform .3s ease, opacity .3s ease;
}
.ss-footer__logo img:hover{ transform: scale(1.05); opacity:1; }
.ss-footer__line1{ margin:0; font-size:14px; }
.ss-footer__line2{ margin:6px 0 0 0; font-size:13px; opacity:.6; }
#logo{ order: 0 !important; }
#header .pull-right{ order: 1 !important; }
/* HEADER – logo left, info right */
#header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
}

#logo{
  order: 0 !important;
}

#info{
  order: 1 !important;
  margin-left: auto !important;
}
/* ===== PARTICLES FORCE FIX (paste at VERY END) ===== */

/* tło z particles ma być widoczne */
.ss-hero{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* canvas wyraźniejszy */
#tsparticles,
.ss-hero__particles{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#tsparticles canvas,
.ss-hero__particles canvas{
  opacity: .95 !important;      /* było za nisko */
  filter: none !important;       /* blur potrafi “zabić” linie */
}

/* overlay MUSI BYĆ LEKKI (a nie biały 95-99%) */
.ss-hero__overlay{
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(57,198,255,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(30,90,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.22)) !important;
}

/* wszystko nad tłem */
#container, #header, #content, #footer{
  position: relative !important;
  z-index: 2 !important;
}
/* ========== SS osTicket header PRO (dopisz na koniec ss-panel.css) ========== */
/* =========================================================
   SS PANEL – ALIASY + KOLORY 1:1 jak solution-systems.pl
   Wklej na sam koniec ss-panel.css
========================================================= */

/* 1) TOKENS – jeśli masz stare (jasne) niebieskie, to te je przykryją */
:root{
  --ss-primary:#091A4B;
  --ss-primary-dark:#040E29;

  --ss-line: rgba(15,23,42,.12);
  --ss-text: #0f172a;
  --ss-muted: rgba(15,23,42,.68);

  /* opcjonalnie tła */
  --ss-bg1:#ffffff;
  --ss-bg2:#f7f9fc;
}

/* 2) ALIASY klas – Twoje CSS = ss-*, PHP = ss-os-*  */
.ss-os-topbar, .ss-topbar{
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
.ss-os-topbar__in, .ss-topbar__in{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.ss-os-topbar__left, .ss-topbar__left,
.ss-os-topbar__right, .ss-topbar__right{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.ss-os-topbar__item, .ss-topbar__item,
.ss-os-topbar__link, .ss-topbar__link{
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  font-weight:700; font-size:13px;
}
.ss-os-topbar__item:hover, .ss-topbar__item:hover,
.ss-os-topbar__link:hover, .ss-topbar__link:hover{
  text-decoration:underline !important;
}

/* Head / brand bar */
.ss-os-head, .ss-head{
  background: rgba(255,255,255,.92);
  border-bottom:1px solid var(--ss-line);
  backdrop-filter:saturate(140%) blur(10px);
}
.ss-os-head__in, .ss-head__in{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ss-os-brand img, .ss-head__logo img{
  height:46px; width:auto; display:block;
}
.ss-os-auth, .ss-head__right{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;
}

/* Auth */
.ss-os-auth__muted{ color: rgba(15,23,42,.70); font-weight:700; }
.ss-os-dot{ opacity:.6; margin:0 2px; }

.ss-os-auth__link, .ss-auth__link{
  color:var(--ss-primary) !important;
  text-decoration:none !important;
  font-weight:700;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.ss-os-auth__link:hover, .ss-auth__link:hover{
  border-color: var(--ss-line);
  background: rgba(255,255,255,.75);
}

/* Buttons used in PHP */
.ss-os-btn, .ss-auth__link--btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
  color:#fff !important;
}
.ss-os-btn--ghost{
  background: rgba(255,255,255,.70) !important;
  color: var(--ss-primary) !important;
  border:1px solid var(--ss-line) !important;
}
.ss-os-btn--ghost:hover{ background:#fff !important; }

/* Pills used in PHP */
.ss-os-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  text-decoration:none !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.ss-os-pill:hover{ background: rgba(255,255,255,.14); }
.ss-os-pill--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.22);
}

/* Footer – już masz OK, tylko alias na wypadek różnic */
.ss-os-footer .ss-footer{
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Responsive */
@media (max-width:820px){
  .ss-os-topbar__in, .ss-topbar__in{flex-direction:column; align-items:flex-start;}
  .ss-os-head__in, .ss-head__in{flex-direction:column; align-items:flex-start;}
  .ss-os-auth, .ss-head__right{justify-content:flex-start;}
}
/* =========================
   LOGO – panel PRO
========================= */

.ss-os-brand img{
  height: 54px !important;   /* było 46 */
  width: auto;
  display:block;
}

.ss-os-head{
  padding-top: 6px;
  padding-bottom: 6px;
}

.ss-os-brand{
  display:flex;
  align-items:center;
}

.ss-os-head{
  background:#ffffff; /* czyste białe */
}
.ss-os-head{
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
/* ==========================================
   FOOTER – ENTERPRISE VERSION
========================================== */

.ss-os-footer .ss-footer{
  background: linear-gradient(180deg,#091A4B 0%, #040E29 100%);
  color: rgba(255,255,255,.92);
  padding-top: 36px;
  padding-bottom: 36px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ss-footer__in{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap:40px;
  align-items:start;
}

/* logo */
.ss-footer__logo img{
  height:56px;
  width:auto;
  display:block;
  opacity:1;
}

/* tekst */
.ss-footer__line1{
  font-size:15px;
  font-weight:800;
  margin-top:16px;
}

.ss-footer__line2{
  font-size:13px;
  opacity:.75;
  margin-top:8px;
}

/* kolumny */
.ss-footer__title{
  font-size:14px;
  font-weight:800;
  margin-bottom:14px;
  letter-spacing:.5px;
  text-transform:uppercase;
  opacity:.8;
}

.ss-footer__link{
  display:block;
  color: rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  padding:7px 0;
  font-weight:600;
  font-size:14px;
  transition: all .2s ease;
}

.ss-footer__link:hover{
  opacity:1;
  transform: translateX(4px);
}

/* znak SS */
.ss-footer__mark{
  width:38px;
  height:38px;
  border-radius:12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  font-weight:900;
}

/* responsive */
@media (max-width:900px){
  .ss-footer__in{
    grid-template-columns:1fr;
    gap:28px;
  }
}
/* ================================
   FIX: logo header + footer (PRO)
   ================================ */

/* HEADER: daj oddech po bokach i nie pozwól logo "uciekać" */
#header{
  padding: 14px 18px !important;     /* było praktycznie 0 */
  overflow: visible !important;
}

/* osTicket często ma float/negatywne marginesy na #logo */
#header #logo{
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

/* sam obrazek logo – bez przycinania */
#header #logo img{
  height: 52px !important;           /* dopasuj 48–56 */
  width: auto !important;
  max-width: 240px;
  display: block;
}

/* jeśli masz wrappery SS (topbar/head) – wyrównaj do tej samej siatki */
.ss-topbar__in,
.ss-head__in{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* FOOTER: logo i cała siatka mniej "w lewo" */
.ss-os-footer .ss-footer__in{
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* logo w footerze też dostaje lekki odsuw */
.ss-os-footer .ss-footer__logo{
  margin-left: 6px;
}

/* responsywnie – żeby nie było za szerokich marginesów */
@media (max-width: 900px){
  #header{ padding: 12px 14px !important; }
  .ss-os-footer .ss-footer__in{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
#container{ overflow: visible !important; }
/* =========================================
   FIX: logo header/ footer – HARD OVERRIDES
   (wklej na sam KONIEC ss-panel.css)
========================================= */

/* HEADER – usuń uciekanie w lewo / przycinanie */
html body #container #header{
  padding-left: 22px !important;
  padding-right: 22px !important;
  box-sizing: border-box !important;
}

html body #container #header a#logo{
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  margin-left: 0 !important;
  left: 0 !important;
  transform: none !important;

  position: relative !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html body #container #header a#logo img{
  display: block !important;
  height: 52px !important;
  width: auto !important;

  max-width: 260px !important;
  margin: 0 !important;

  clip-path: none !important;
  object-fit: contain !important;
}

/* jeśli gdzieś przycina cały header/kartę */
html body #container{
  overflow: visible !important;
}

/* FOOTER – logo i siatka mniej w lewo */
html body #footer.ss-os-footer .ss-footer{
  padding-left: 22px !important;
  padding-right: 22px !important;
  box-sizing: border-box !important;
}

html body #footer.ss-os-footer .ss-footer__in{
  max-width: 1100px !important;
  margin: 0 auto !important;
}

html body #footer.ss-os-footer .ss-footer__brand{
  padding-left: 6px !important;
}

html body #footer.ss-os-footer .ss-footer__logo{
  margin-left: 0 !important;
}

/* =========================================================
   SS PANEL – ALIGN FIX (header + footer) – FINAL
   (wklej na sam KONIEC ss-panel.css)
========================================================= */

/* 1) Upewnij się, że container nie ucina i ma oddech */
html body #container{
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* 2) TOPBAR – centrowanie i padding jak na stronie głównej */
html body .ss-os-topbar{
  position: relative;
  z-index: 10;
  width: 100%;
}

html body .ss-os-topbar__in{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 10px 18px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* 3) HEADER (brand bar) – to tu logo “ucieka” */
html body .ss-os-head{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;

  /* jeśli tło ma być jak “glass” */
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
  backdrop-filter: saturate(140%) blur(10px);
}

/* LOGO – przestaje być przycinane i nie “wchodzi” w lewo */
html body .ss-os-head .ss-os-brand{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 0 !important;

  max-width: 100% !important;
  overflow: visible !important;
}

html body .ss-os-head .ss-os-brand img{
  display: block !important;
  height: 52px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
}

/* 4) AUTH – żeby nie wypychało logo */
html body .ss-os-auth{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 260px;
}

/* 5) FOOTER – centrowanie + logo nie “w lewo” */
html body #footer.ss-os-footer{
  position: relative;
  z-index: 10;
}

html body #footer.ss-os-footer .ss-footer{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body #footer.ss-os-footer .ss-footer__in{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 24px 18px !important;
  box-sizing: border-box !important;
}

html body #footer.ss-os-footer .ss-footer__logo{
  margin-left: 0 !important;
}

html body #footer.ss-os-footer .ss-footer__logo img{
  display: block !important;
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* 6) Mobile */
@media (max-width: 900px){
  html body .ss-os-topbar__in,
  html body .ss-os-head{
    padding-left: 14px !important;
    padding-right: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  html body .ss-os-auth{
    justify-content: flex-start !important;
    min-width: 0;
  }
}
/* =========================================================
   FOOTER – LOGO ALIGN + PROJECT MARK LOGO (FINAL)
========================================================= */

/* wyrównanie całej siatki w pionie */
#footer.ss-os-footer .ss-footer__in{
  align-items: center !important;
}

/* LEWA kolumna: logo + tekst w jednej osi */
#footer.ss-os-footer .ss-footer__brand{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

#footer.ss-os-footer .ss-footer__logo{
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#footer.ss-os-footer .ss-footer__logo img{
  height: 52px !important;   /* możesz zmienić 48–56 */
  width: auto !important;
  display: block !important;
}

/* tekst obok logo */
#footer.ss-os-footer .ss-footer__meta{
  margin-top: 0 !important;
}

/* “Projekt i realizacja” jako ładny badge z logo */
#footer.ss-os-footer .ss-footer__mark{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#footer.ss-os-footer .ss-footer__mark img{
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  display: block !important;
}

/* mobile – niech się ładnie układa w kolumnie */
@media (max-width: 900px){
  #footer.ss-os-footer .ss-footer__brand{
    align-items: flex-start !important;
  }
  #footer.ss-os-footer .ss-footer__logo img{
    height: 46px !important;
  }
}
/* FOOTER – logo sizes tune */
#footer.ss-os-footer .ss-footer__logo img{
  height: 36px !important;   /* było 52 */
}

#footer.ss-os-footer .ss-footer__mark{
  width: 30px !important;    /* było 44 */
  height: 30px !important;
  border-radius: 12px !important;
}
#footer.ss-os-footer .ss-footer__mark img{
  width: 16px !important;    /* było 28 */
  height: 16px !important;
}
/* ===== Minimal footer (jak na stronie głównej) ===== */

.ss-footer--minimal{
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
  padding: 22px 0;
}

.ss-footer--minimal .ss-footer__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.ss-footer--minimal img{
  height:24px;
  width:auto;
  opacity:.95;
}

.ss-footer__left,
.ss-footer__right{
  align-items:center;
  gap:16px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
.ss-footer__left,
.ss-footer__right{
  align-items:center;
  gap:16px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
/* ===============================
   STICKY FOOTER (pełna wysokość)
================================ */

/* całe body jako kolumna */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* główny kontener rośnie */
#container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* content zajmuje przestrzeń */
#content {
  flex: 1 0 auto;
}

/* footer zawsze na dole */
#footer {
  flex-shrink: 0;
}
/* ===============================
   STICKY FOOTER (SAFE for osTicket)
   – bez flex na #container
================================ */

html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* #container nie ruszamy flexem – osTicket tego nie lubi */
#container{
  flex: 1 0 auto;
}

/* footer dociśnięty do dołu */
#footer{
  margin-top: auto;
  flex-shrink: 0;
}
/* ===============================
   FIX: SS header full width
================================ */
.ss-os-topbar,
.ss-os-head{
  width: 100%;
  box-sizing: border-box;
}

.ss-os-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15,23,42,.12);
  border-radius: 0;          /* żeby nie robiło “pudełka” */
  box-shadow: none;          /* jw */
  margin: 0;
}

.ss-os-brand{ display:flex; align-items:center; }
.ss-os-brand img{ height:46px; width:auto; display:block; }

.ss-os-auth{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
/* ===============================
   FIX: SS header full width
================================ */
.ss-os-topbar,
.ss-os-head{
  width: 100%;
  box-sizing: border-box;
}

.ss-os-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15,23,42,.12);
  border-radius: 0;          /* żeby nie robiło “pudełka” */
  box-shadow: none;          /* jw */
  margin: 0;
}

.ss-os-brand{ display:flex; align-items:center; }
.ss-os-brand img{ height:46px; width:auto; display:block; }

.ss-os-auth{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#container{
  background: #ffffff !important;
}
/* ===================================
   PANEL – tło 100% białe + particles
   (bez niebieskiej poświaty)
=================================== */

html, body{
  background:#fff !important;
}

/* warstwa particles ma zostać, ale bez overlay/gradientów */
.ss-hero{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: transparent !important; /* usuwa glow */
}

/* usuń wszystko co robi poświatę */
.ss-hero__overlay{
  display:block !important;            /* zostaje jako warstwa, ale pusta */
  background: transparent !important;  /* KLUCZ: brak gradientu */
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* canvas particles */
#tsparticles,
.ss-hero__particles{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: .75 !important;            /* widoczne, ale subtelne */
}

/* treść ma być nad particles */
#container{
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* jeśli gdzieś masz “mgłę” z box-shadow na kartach/sekcjach – zostaw, ale nie tło */
/* =========================================
   osTicket Tickets – PATCH v3 (PRO polish)
========================================= */

/* ---------- Search / Filters row ---------- */
#content form[name="search"],
#content form[action*="tickets.php"]{
  max-width: 980px !important;
  margin: 0 auto 14px !important;
}

/* kontener wyszukiwarki (ten jasny pasek) */
#content .search,
#content .filter{
  background: rgba(9,26,75,.04) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 10px 28px rgba(2,8,23,.06) !important;
}

/* input szukaj */
#content form input[type="text"],
#content form input[type="search"]{
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 20px rgba(2,8,23,.06) !important;
  max-width: 620px !important;
  width: min(620px, 100%) !important;
  outline: none !important;
}

#content form input[type="text"]:focus,
#content form input[type="search"]:focus{
  border-color: rgba(9,26,75,.40) !important;
  box-shadow: 0 10px 26px rgba(9,26,75,.14) !important;
}

/* przycisk Szukaj */
#content form button,
#content form input[type="submit"],
#content form input[type="button"]{
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(9,26,75,.18) !important;
  margin-left: 12px !important;
}
#content form button:hover,
#content form input[type="submit"]:hover{
  filter: brightness(1.04);
}

/* select “Temat pomocy” – niech wygląda jak element UI, a nie systemowy */
#content select{
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.92) !important;
  padding: 0 12px !important;
}

/* jeśli select jest po prawej – zbijamy go pod input przy węższym układzie */
@media (max-width: 980px){
  #content form input[type="text"],
  #content form input[type="search"]{
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  #content form button,
  #content form input[type="submit"]{
    margin-left: 0 !important;
    width: 100% !important;
  }
  #content select{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
  }
}

/* ---------- Tickets table (force PRO look) ---------- */
/* 1) zdejmujemy stare tła */
#content table,
#content table *{
  background-image: none !important;
}

/* 2) łapiemy praktycznie każdą tabelę listy */
#content table.list,
#content table[class*="list"],
#content table[class*="List"],
#content table[border],
#content table[summary]{
  width: 100% !important;
  margin: 14px auto 0 !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 40px rgba(2,8,23,.08) !important;
}

/* nagłówki tabeli */
#content table.list thead th,
#content table[class*="list"] thead th,
#content table[class*="List"] thead th,
#content table[border] thead th{
  background: rgba(9,26,75,.06) !important;
  color: rgba(15,23,42,.88) !important;
  font-weight: 950 !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  border-right: 1px solid rgba(15,23,42,.06) !important;
}
#content table.list thead th:last-child,
#content table[class*="list"] thead th:last-child{ border-right: 0 !important; }

/* komórki */
#content table.list tbody td,
#content table[class*="list"] tbody td,
#content table[class*="List"] tbody td,
#content table[border] tbody td{
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  border-right: 1px solid rgba(15,23,42,.06) !important;
  font-size: 14px !important;
  color: rgba(15,23,42,.86) !important;
  background: rgba(255,255,255,.92) !important;
}
#content table.list tbody td:last-child,
#content table[class*="list"] tbody td:last-child{ border-right: 0 !important; }

/* hover */
#content table.list tbody tr:hover td,
#content table[class*="list"] tbody tr:hover td{
  background: rgba(9,26,75,.04) !important;
}

/* linki w tabeli */
#content table a{
  color: var(--ss-primary) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
#content table a:hover{ text-decoration: underline !important; }

/* małe rzeczy: opis “Wyświetlono…” i paginacja */
#content .pagination,
#content .sort-options,
#content .small,
#content .faded{
  color: rgba(15,23,42,.66) !important;
}
/* =========================================
   TICKETS TABLE – CLEAN FINAL (ID BASED)
========================================= */

#ticketTable{
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 16px auto 0 !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 16px 44px rgba(2,8,23,.08) !important;
}

/* nagłówek */
#ticketTable thead th{
  background: rgba(9,26,75,.06) !important;
  color: rgba(15,23,42,.88) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}

/* komórki */
#ticketTable tbody td{
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  font-size: 14px !important;
  color: rgba(15,23,42,.86) !important;
  background: rgba(255,255,255,.96) !important;
}

/* hover */
#ticketTable tbody tr:hover td{
  background: rgba(9,26,75,.04) !important;
}

/* link numeru zgłoszenia */
#ticketTable a{
  color: var(--ss-primary) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

#ticketTable a:hover{
  text-decoration: underline !important;
}
#ticketTable[width]{
  width: 100% !important;
}
/* =========================================
   SEARCH BAR – CLEAN FLEX VERSION
========================================= */

/* kontener formularza */
#content form[action*="tickets.php"]{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;      /* ODSTĘP między input a button */
  flex-wrap: wrap !important;
}

/* pole wyszukiwania */
#content form input[type="text"],
#content form input[type="search"]{
  flex: 1 !important;
  min-width: 260px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(2,8,23,.06) !important;
  transition: all .2s ease;
}

#content form input[type="text"]:focus,
#content form input[type="search"]:focus{
  border-color: rgba(9,26,75,.40) !important;
  box-shadow: 0 12px 30px rgba(9,26,75,.14) !important;
  outline: none !important;
}

/* przycisk Szukaj */
#content form button,
#content form input[type="submit"]{
  height: 48px !important;
  padding: 0 24px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg,var(--ss-primary),var(--ss-primary-dark)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 26px rgba(9,26,75,.18) !important;
  transition: all .2s ease;
}

#content form button:hover,
#content form input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(9,26,75,.22) !important;
}/* =========================================
   SEARCH BAR – CLEAN FLEX VERSION
========================================= */

/* kontener formularza */
#content form[action*="tickets.php"]{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;      /* ODSTĘP między input a button */
  flex-wrap: wrap !important;
}

/* pole wyszukiwania */
#content form input[type="text"],
#content form input[type="search"]{
  flex: 1 !important;
  min-width: 260px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(2,8,23,.06) !important;
  transition: all .2s ease;
}

#content form input[type="text"]:focus,
#content form input[type="search"]:focus{
  border-color: rgba(9,26,75,.40) !important;
  box-shadow: 0 12px 30px rgba(9,26,75,.14) !important;
  outline: none !important;
}

/* przycisk Szukaj */
#content form button,
#content form input[type="submit"]{
  height: 48px !important;
  padding: 0 24px !important;
  border-radius: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg,var(--ss-primary),var(--ss-primary-dark)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 26px rgba(9,26,75,.18) !important;
  transition: all .2s ease;
}

#content form button:hover,
#content form input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(9,26,75,.22) !important;
}
/* =========================================
   STATUS BADGES
========================================= */

#ticketTable tbody td{
  position: relative;
}

/* domyślny badge */
#ticketTable tbody td{
  font-weight: 700;
}

/* OTWARTE / W TRAKCIE (niebieskie) */
#ticketTable tbody td:has(span),
#ticketTable tbody td:has(a){
  font-weight: 700;
}

/* W TRAKCIE / OTWARTE */
#ticketTable tbody td:contains("Otwarte"),
#ticketTable tbody td:contains("W trakcie"){
  background: transparent !important;
}
/* =========================================
   SLA info bar (under header)
========================================= */
.ss-sla{
  position: relative;
  z-index: 6;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--ss-line);
}

.ss-sla__in{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ss-sla__left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ss-primary);
  font-size: 13px;
  font-weight: 700;
}

.ss-sla__muted{
  color: rgba(15,23,42,.72);
  font-weight: 700;
}

.ss-sla__sep{
  opacity: .35;
}

.ss-sla__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22,163,74,.12);
  flex: 0 0 auto;
}

.ss-sla__right{
  flex: 0 0 auto;
}

.ss-sla__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ss-line);
  background: rgba(255,255,255,.7);
  color: var(--ss-primary) !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 12px;
}

.ss-sla__link:hover{
  background: #fff;
}

@media (max-width: 820px){
  .ss-sla__in{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =========================================
   MOBILE FIX PACK (header / search / footer)
========================================= */

/* 1) Container na mobile ma być “responsywny” */
#container{
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
}

/* 2) Header / topbar / auth – układ kolumnowy na mobile */
@media (max-width: 820px){
  .ss-os-topbar__in{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ss-os-topbar__right{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ss-os-pill{ padding: 8px 10px; }

  .ss-os-head{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px;
  }
  .ss-os-brand{
    display: inline-flex;
    align-items: center;
  }
  .ss-os-brand img{
    max-width: 220px;
    height: auto;
  }

  .ss-os-auth{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ss-os-btn, .ss-os-btn--ghost{
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* SLA bar – żeby nie robił “bałaganu” */
  .ss-sla__in{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ss-sla__right{
    width: 100%;
  }
  .ss-sla__link{
    width: 100%;
    justify-content: center;
  }
}

/* 3) Wyszukiwarka / filtr – pełna szerokość i sensowny układ */
@media (max-width: 820px){
  .search.well{
    padding: 12px !important;
  }

  /* input wyszukiwania */
  .search.well input[type="text"]{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* przycisk Szukaj */
  .search.well input[type="submit"],
  .search.well button,
  .search.well .button{
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  /* select “Temat pomocy” */
  .search.well select{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }
}

/* 4) Footer ma być na pełną szerokość ekranu (a nie w #container) */
#footer.ss-os-footer{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* 5) “Sticky footer” – usuwa biały blok pod stopką */
html, body{ height: 100%; }
body{
  display: flex;
  flex-direction: column;
}
#container{ flex: 1 0 auto; }
#footer{ flex-shrink: 0; }
/* =========================
   SS PANEL — FIX PACK (DESKTOP+MOBILE)
   ========================= */

/* 1) TŁO: czysto białe (bez niebieskiej poświaty) */
html, body { background:#fff !important; }
.ss-hero{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #fff;            /* <- czyste białe */
}
.ss-hero__overlay{
  position:absolute; inset:0;
  background: transparent !important;  /* usuń glow */
}

/* 2) Sticky footer: zawsze na dole, brak białego bloku */
body{ min-height:100vh; display:flex; flex-direction:column; }
#container{ flex:1 0 auto; position:relative; z-index:2; }
#footer{ flex:0 0 auto; position:relative; z-index:2; }

/* 3) Header/Topbar – szerokości i responsywność */
.ss-os-header{ position:relative; z-index:5; }

.ss-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.ss-pill--ghost{ background: transparent; }

@media (max-width: 820px){
  .ss-topbar__in{flex-direction:column; align-items:flex-start;}
  .ss-topbar__right{gap:10px;}
  .ss-topbar__right .ss-pill{padding:7px 10px; font-size:12px;}
  .ss-head__in{flex-direction:column; align-items:flex-start;}
  .ss-head__right{justify-content:flex-start; width:100%;}
  .ss-auth{gap:8px; width:100%; flex-wrap:wrap;}
  .ss-head__logo img{height:44px;}
}

/* 4) SLA bar (ładnie na mobile) */
.ss-sla{
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.ss-sla__in{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ss-sla__left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ss-sla__dot{width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.12);}
.ss-sla__sep{opacity:.5;}
.ss-sla__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  text-decoration:none !important;
  font-weight:800;
}
@media (max-width: 820px){
  .ss-sla__in{flex-direction:column; align-items:flex-start;}
  .ss-sla__right{width:100%;}
  .ss-sla__btn{width:100%; justify-content:center;}
}

/* 5) Search: input + przycisk obok (desktop), na mobile układ sensowny */
.search.well form,
#content .search.well form{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.search.well input[type="text"],
.search.well input[type="search"]{
  flex:1 1 360px;
  min-width: 220px;
}
.search.well input[type="submit"],
.search.well button,
.search.well .button{
  flex:0 0 auto;
  min-width: 120px;
}
@media (max-width: 520px){
  .search.well form{ flex-direction:column; align-items:stretch; }
  .search.well input[type="submit"],
  .search.well button{ width:100%; min-width:0; }
}

/* 6) Tabela: mniej “starego OS look” */
#ticketTable, table.list, table.data{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
#ticketTable th, #ticketTable td,
table.list th, table.list td{
  border-color: rgba(15,23,42,.10) !important;
}
#ticketTable th, table.list th{
  background: rgba(15,23,42,.05) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}

/* 7) Badge status */
.ss-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}
.ss-badge--blue{ background: rgba(59,130,246,.14); color:#1d4ed8; }
.ss-badge--green{ background: rgba(34,197,94,.14); color:#166534; }
.ss-badge--red{ background: rgba(239,68,68,.14); color:#991b1b; }

/* 8) Footer minimal (jak na www) */
.ss-os-footer--minimal .ss-footer{
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.10);
}
.ss-footer__in--minimal{
  max-width:1100px; margin:0 auto; padding:18px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ss-footer__left{display:flex; align-items:center; gap:12px;}
.ss-footer__logoW{height:28px; width:auto; display:block; opacity:.98;}
.ss-footer__copy{font-weight:800;}
.ss-footer__sub{opacity:.85; font-size:12px; margin-top:4px; font-weight:700;}
.ss-footer__right{display:flex; align-items:center; gap:10px; font-weight:900;}
.ss-footer__markW{height:22px; width:auto; display:block; opacity:.98;}

@media (max-width: 640px){
  .ss-footer__in--minimal{flex-direction:column; align-items:flex-start;}
}
/* =========================
   SS PANEL — FIX PACK (DESKTOP+MOBILE)
   ========================= */

/* 1) TŁO: czysto białe (bez niebieskiej poświaty) */
html, body { background:#fff !important; }
.ss-hero{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #fff;            /* <- czyste białe */
}
.ss-hero__overlay{
  position:absolute; inset:0;
  background: transparent !important;  /* usuń glow */
}

/* 2) Sticky footer: zawsze na dole, brak białego bloku */
body{ min-height:100vh; display:flex; flex-direction:column; }
#container{ flex:1 0 auto; position:relative; z-index:2; }
#footer{ flex:0 0 auto; position:relative; z-index:2; }

/* 3) Header/Topbar – szerokości i responsywność */
.ss-os-header{ position:relative; z-index:5; }

.ss-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.ss-pill--ghost{ background: transparent; }

@media (max-width: 820px){
  .ss-topbar__in{flex-direction:column; align-items:flex-start;}
  .ss-topbar__right{gap:10px;}
  .ss-topbar__right .ss-pill{padding:7px 10px; font-size:12px;}
  .ss-head__in{flex-direction:column; align-items:flex-start;}
  .ss-head__right{justify-content:flex-start; width:100%;}
  .ss-auth{gap:8px; width:100%; flex-wrap:wrap;}
  .ss-head__logo img{height:44px;}
}

/* 4) SLA bar (ładnie na mobile) */
.ss-sla{
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.ss-sla__in{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ss-sla__left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ss-sla__dot{width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.12);}
.ss-sla__sep{opacity:.5;}
.ss-sla__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  text-decoration:none !important;
  font-weight:800;
}
@media (max-width: 820px){
  .ss-sla__in{flex-direction:column; align-items:flex-start;}
  .ss-sla__right{width:100%;}
  .ss-sla__btn{width:100%; justify-content:center;}
}

/* 5) Search: input + przycisk obok (desktop), na mobile układ sensowny */
.search.well form,
#content .search.well form{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.search.well input[type="text"],
.search.well input[type="search"]{
  flex:1 1 360px;
  min-width: 220px;
}
.search.well input[type="submit"],
.search.well button,
.search.well .button{
  flex:0 0 auto;
  min-width: 120px;
}
@media (max-width: 520px){
  .search.well form{ flex-direction:column; align-items:stretch; }
  .search.well input[type="submit"],
  .search.well button{ width:100%; min-width:0; }
}

/* 6) Tabela: mniej “starego OS look” */
#ticketTable, table.list, table.data{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
#ticketTable th, #ticketTable td,
table.list th, table.list td{
  border-color: rgba(15,23,42,.10) !important;
}
#ticketTable th, table.list th{
  background: rgba(15,23,42,.05) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}

/* 7) Badge status */
.ss-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}
.ss-badge--blue{ background: rgba(59,130,246,.14); color:#1d4ed8; }
.ss-badge--green{ background: rgba(34,197,94,.14); color:#166534; }
.ss-badge--red{ background: rgba(239,68,68,.14); color:#991b1b; }

/* 8) Footer minimal (jak na www) */
.ss-os-footer--minimal .ss-footer{
  background: linear-gradient(180deg,var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.10);
}
.ss-footer__in--minimal{
  max-width:1100px; margin:0 auto; padding:18px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ss-footer__left{display:flex; align-items:center; gap:12px;}
.ss-footer__logoW{height:28px; width:auto; display:block; opacity:.98;}
.ss-footer__copy{font-weight:800;}
.ss-footer__sub{opacity:.85; font-size:12px; margin-top:4px; font-weight:700;}
.ss-footer__right{display:flex; align-items:center; gap:10px; font-weight:900;}
.ss-footer__markW{height:22px; width:auto; display:block; opacity:.98;}

@media (max-width: 640px){
  .ss-footer__in--minimal{flex-direction:column; align-items:flex-start;}
}/* =========================
   MOBILE FIX: nagłówki nie nachodzą (HOME + ogólnie)
   ========================= */

@media (max-width: 560px){

  /* trochę ciaśniej i czytelniej */
  #content{
    padding: 16px 14px !important;
  }

  /* reset “dziwnych” marginesów z theme.css */
  #content h1,
  #content h2,
  #content h3{
    clear: both !important;
    float: none !important;
    position: relative !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* małe, szare “nagłówki sekcji” (to co widać pod spodem jako szary tekst) */
  #content h2{
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    opacity: .65 !important;
    margin: 12px 0 10px !important;
  }

  /* główny H1 (Witamy w Centrum...) – mniejszy + większy odstęp od góry */
  #content h1{
    font-size: 44px !important;     /* było za duże */
    line-height: 1.06 !important;   /* kluczowe */
    letter-spacing: -.02em !important;
    margin: 18px 0 10px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* jeśli pod H1 jest lead/akapit – daj oddech */
  #content h1 + p{
    margin-top: 10px !important;
  }

  /* przyciski na mobile – pełna szerokość, nie “uciekają” */
  #content .button,
  #content input[type="submit"],
  #content button{
    width: 100% !important;
    max-width: 100% !important;
  }
}/* =========================
   MOBILE FIX: nagłówki nie nachodzą (HOME + ogólnie)
   ========================= */

@media (max-width: 560px){

  /* trochę ciaśniej i czytelniej */
  #content{
    padding: 16px 14px !important;
  }

  /* reset “dziwnych” marginesów z theme.css */
  #content h1,
  #content h2,
  #content h3{
    clear: both !important;
    float: none !important;
    position: relative !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* małe, szare “nagłówki sekcji” (to co widać pod spodem jako szary tekst) */
  #content h2{
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    opacity: .65 !important;
    margin: 12px 0 10px !important;
  }

  /* główny H1 (Witamy w Centrum...) – mniejszy + większy odstęp od góry */
  #content h1{
    font-size: 44px !important;     /* było za duże */
    line-height: 1.06 !important;   /* kluczowe */
    letter-spacing: -.02em !important;
    margin: 18px 0 10px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* jeśli pod H1 jest lead/akapit – daj oddech */
  #content h1 + p{
    margin-top: 10px !important;
  }

  /* przyciski na mobile – pełna szerokość, nie “uciekają” */
  #content .button,
  #content input[type="submit"],
  #content button{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================
   FIX: landing page mobile width
   ========================= */

@media (max-width: 768px){

  #landing_page,
  .ss-landing{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  .ss-landing_top{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* naprawa siatki jeśli jest grid */
  .ss-landing{
    display: block !important;
  }

  /* nagłówek hero */
  .ss-landing h1{
    font-size: 44px !important;
    line-height: 1.05 !important;
    margin-top: 16px !important;
  }

}
/* =========================
   OS TICKET – RESPONSIVE FIX (MUST HAVE)
   ========================= */

/* wyłącz poziomy scroll i skale-quirks */
html, body { width:100% !important; overflow-x:hidden !important; }

/* KILL: stałe szerokości z theme.css */
#container{
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
}

#content{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* tło MA BYĆ białe (żeby było widać particles) */
body{
  background: #fff !important;
  background-image: none !important;
}

/* jeśli overlay robi poświatę – wyciszamy */
.ss-hero__overlay{
  background: transparent !important;
  opacity: 0 !important;
}

/* =========================
   Landing – mobile układ (żeby nic się nie nakładało)
   ========================= */
@media (max-width: 820px){

  #landing_page,
  .ss-landing{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding: 0 !important;
  }

  .ss-landing_top{
    display:block !important;      /* zabija grid/kolumny */
    width:100% !important;
    max-width:100% !important;
  }

  .ss-landing_copy,
  .ss-landing_actions,
  .ss-landing_cards{
    width:100% !important;
    max-width:100% !important;
  }

  .ss-landing h1{
    font-size: 42px !important;
    line-height: 1.06 !important;
    margin: 14px 0 10px !important;
    word-break: normal !important;
  }
}

/* =========================
   Stopka zawsze na dole (bez białego bloku pod spodem)
   ========================= */
body{ min-height:100vh !important; display:flex !important; flex-direction:column !important; }
#container{ flex:1 0 auto !important; }
#footer{ margin-top:auto !important; }
/* ===== FIX: odstęp między menu (nav) a content ===== */

#nav.flush-left{
  margin-bottom: 28px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

/* żeby treść nigdy nie podjechała pod nav */
#content{
  margin-top: 10px !important;
}

/* mobile – jeszcze większy odstęp */
@media (max-width: 820px){
  #nav.flush-left{
    margin-bottom: 36px !important;
  }
}
/* ===== MOBILE FIX: menu nie może nachodzić na H1 ===== */
@media (max-width: 820px){

  /* menu zawsze nad treścią */
  #nav.flush-left{
    position: relative !important;
    z-index: 20 !important;
    background: rgba(255,255,255,.98) !important;
    padding-bottom: 16px !important;
    margin-bottom: 28px !important;  /* KLUCZ: większy odstęp od H1 */
  }

  /* treść startuje niżej */
  #content{
    position: relative !important;
    z-index: 5 !important;
    padding-top: 10px !important;
  }

  /* jeśli startowa sekcja ma swoje marginesy – wyzeruj na mobile */
  #landing_page.ss-landing,
  .ss-landing{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* dodatkowo: tytuł nie może “podjechać” pod menu */
  .ss-landing_title{
    margin-top: 0 !important;
  }
}
/* ===========================
   FIX MOBILE: nav nie może nachodzić na H1
   (osTicket często ma #nav height:20px)
=========================== */

@media (max-width: 820px){

  /* NAV musi mieć realną wysokość gdy linki się zawijają */
  #nav,
  #nav.flush-left{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 14px !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 12px 16px 18px !important;
    margin: 0 0 22px !important;

    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid rgba(15,23,42,.10) !important;

    overflow: visible !important;
    white-space: normal !important;

    position: relative !important;
    z-index: 50 !important;
  }

  #nav > li{
    float: none !important;           /* osTicket czasem floatuje li */
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #nav > li > a{
    display: inline-flex !important;
    padding: 10px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* CONTENT zawsze pod nav */
  #content{
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 6px !important;
    clear: both !important;
  }

  /* “Hero”/landing tytuł nie może mieć ujemnych marginesów */
  .ss-landing_title,
  .ss-landing__title,
  h1{
    margin-top: 0 !important;
  }
}
/* =========================
   PREMIUM MOBILE NAV
========================= */

@media (max-width: 820px){

  #nav.flush-left{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:12px 16px 18px !important;
    margin-bottom:26px !important;
    border-bottom:none !important;
  }

  #nav.flush-left li{
    margin:0 !important;
  }

  #nav.flush-left li a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:10px 16px !important;
    border-radius:999px !important;

    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:.02em !important;

    border:1px solid rgba(15,23,42,.12) !important;
    background:#fff !important;
  }

  /* aktywna zakładka */
  #nav.flush-left li.active a,
  #nav.flush-left li a:hover{
    background: linear-gradient(135deg,#091A4B,#040E29) !important;
    color:#fff !important;
    border-color:transparent !important;
  }
}
/* =========================
   PREMIUM MOBILE NAV
========================= */

@media (max-width: 820px){

  #nav.flush-left{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding:12px 16px 18px !important;
    margin-bottom:26px !important;
    border-bottom:none !important;
  }

  #nav.flush-left li{
    margin:0 !important;
  }

  #nav.flush-left li a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:10px 16px !important;
    border-radius:999px !important;

    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:.02em !important;

    border:1px solid rgba(15,23,42,.12) !important;
    background:#fff !important;
  }

  /* aktywna zakładka */
  #nav.flush-left li.active a,
  #nav.flush-left li a:hover{
    background: linear-gradient(135deg,#091A4B,#040E29) !important;
    color:#fff !important;
    border-color:transparent !important;
  }
}
/* ===== SCP: ZRÓB MIEJSCE POD STICKY HEADER (TYLKO TREŚĆ) ===== */

/* wysokość headera */
:root{ --scp-header-h: 58px; } /* zmień na 60/80 jeśli trzeba */

/* NIE ruszamy body/html */

/* przesuwamy tylko główny obszar z treścią (pod header) */
#pjax-container{
  padding-top: var(--scp-header-h) !important;
}

/* a header zostaje na wierzchu */
#header{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
/* ===== CLEAN USER BAR ===== */

#header{
  background: #ffffff !important;
  border-bottom: 1px solid #e6eaf0 !important;
  padding: 14px 24px !important;
}

/* usuń "klocek" wokół Witaj, Marcin */
#header #info{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 13px;
  color: #6b7280;
}

/* linki spokojniejsze */
#header #info a{
  color: #1f2937 !important;
  font-weight: 500;
}

#header #info a:hover{
  text-decoration: underline;
}
/* ===== HEADER WIDTH = CONTENT WIDTH (SCP) ===== */

:root{
  --scp-wrap: 1100px; /* dopasuj 1000/1050/1100 */
}

/* kontener treści – żeby było konsekwentnie */
#content{
  max-width: var(--scp-wrap) !important;
  margin: 0 auto !important;
}

/* header też ma trzymać tę samą szerokość */
#header{
  max-width: var(--scp-wrap) !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
/* ===== HEADER MA MIEĆ TAKĄ SAMĄ SZEROKOŚĆ JAK CONTENT ===== */

/* usuń max-width jeśli wcześniej był */
#header{
  max-width: none !important;
  width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* wyrównanie do tego samego marginesu co tabela */
#content{
  padding-left: 40px !important;
  padding-right: 40px !important;
}
/* ===== osTicket SCP: FIX MODALI (dialog) + SELECT ===== */

/* overlay i dialog zawsze nad wszystkim */
#overlay{
  z-index: 99998 !important;
}
.dialog{
  z-index: 99999 !important;
  position: fixed !important;
}

/* nic nie może przykrywać modala */
.ss-hero,
#tsparticles,
.ss-hero__particles,
.ss-hero__overlay{
  z-index: 0 !important;
  pointer-events: none !important;
}

/* rodzice nie mogą mieć transform (psuje fixed i kliki) */
html, body, #container, #pjax-container{
  transform: none !important;
}

/* select w modalu */
.dialog select{
  pointer-events: auto !important;
}
/* ===== SCP: SELECT W MODALU – TEKST MUSI BYĆ WIDOCZNY ===== */

.dialog select,
.dialog option{
  color: #111827 !important;      /* ciemny tekst */
  background: #ffffff !important; /* białe tło */
}

/* kiedy select jest fokusowany */
.dialog select:focus{
  outline: 2px solid rgba(31,128,255,.35) !important;
  outline-offset: 2px !important;
}
/* ===== FIX: tekst w SELECT w modalu (#popup) ===== */

/* sam SELECT (to on jest "pusty") */
#popup.dialog select[name="status_id"],
.dialog#popup select[name="status_id"],
#popup select[name="status_id"]{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important; /* klucz w Chrome */
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;

  text-shadow: none !important;
  opacity: 1 !important;

  appearance: auto !important;
  -webkit-appearance: menulist !important;

  /* żeby tekst nie był "wypchnięty" */
  text-indent: 0 !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* opcje (żeby dropdown też był czytelny) */
#popup select[name="status_id"] option{
  color: #111827 !important;
  background: #ffffff !important;
}
/* ===== VIEW.PHP / SPRAWDŹ STATUSY – SKRÓĆ POLA ===== */

#content form#clientLogin input[type="text"],
#content form#clientLogin input[type="email"]{
  flex: 0 0 auto !important;
  width: 300px !important;        /* ustaw długość */
  max-width: 100% !important;
  min-width: 0 !important;
}

/* opcjonalnie: żeby lewa kolumna nie była “rozciągnięta” */
#content form#clientLogin .login-box{
  max-width: 920px !important;    /* całe pudełko (lewa+prawa) */
}

#content form#clientLogin .login-box label{
  display: block !important;
}
/* spójna szerokość + mobile */
:root{ --ss-form-input: 300px; }

#content form#clientLogin input[type="text"],
#content form#clientLogin input[type="email"]{
  width: var(--ss-form-input) !important;
}

@media (max-width: 520px){
  #content form#clientLogin input[type="text"],
  #content form#clientLogin input[type="email"]{
    width: 100% !important;
  }
}
#content form#clientLogin input[type="text"],
#content form#clientLogin input[type="email"]{
  height: 48px !important;
}
.ss-card--highlight {
  border: 1px solid rgba(9,26,75,.25) !important;
  box-shadow: 0 20px 50px rgba(9,26,75,.10);
  background: linear-gradient(180deg, #ffffff, #f9fbff) !important;
}

.ss-card--highlight:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 60px rgba(9,26,75,.15);
}
/* =========================================
   Remote support card - icon + micro motion
========================================= */

.ss-card--highlight{
  border: 1px solid rgba(9,26,75,.18) !important;
  box-shadow: 0 18px 44px rgba(9,26,75,.08);
  background: linear-gradient(180deg, #ffffff, #f9fbff) !important;
}

.ss-card--highlight .ss-card__title,
.ss-card--highlight .ss-card__desc,
.ss-card--highlight .ss-card__desc small{
  color: inherit;
}

.ss-card--highlight:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(9,26,75,.12);
}

/* tylko kafel Pomoc zdalna */
.ss-card--remote{
  position: relative;
  overflow: hidden;
}

.ss-card--remote::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(57,198,255,.06), rgba(30,90,255,.03));
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.ss-card--remote:hover::before{
  opacity:1;
}

.ss-card__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}

.ss-card__icon{
  position: relative;
  width:60px;
  height:60px;
  min-width:60px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0b2a4a;
  background: linear-gradient(180deg, rgba(9,26,75,.12), rgba(9,26,75,.06));
  border: 1px solid rgba(9,26,75,.10);
  box-shadow:
    0 10px 22px rgba(9,26,75,.10),
    0 0 0 1px rgba(9,26,75,.08);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.ss-card__icon svg{
  width:34px;
  height:34px;
  display:block;
}

.ss-card--remote:hover .ss-card__icon{
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 14px 28px rgba(9,26,75,.14),
    0 0 0 4px rgba(30,90,255,.06);
  background: linear-gradient(180deg, rgba(57,198,255,.14), rgba(30,90,255,.08));
  color:#1E5AFF;
}

.ss-card__headtext{
  min-width:0;
}

.ss-card--remote .ss-card__title{
  margin-bottom:4px;
}

.ss-card__badge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  color:#0b2a4a;
  background: rgba(9,26,75,.05);
  border:1px solid rgba(9,26,75,.07);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.ss-card--remote:hover .ss-card__badge{
  transform: translateX(2px);
  background: rgba(57,198,255,.12);
  border-color: rgba(57,198,255,.18);
}

.ss-card--remote .ss-card__desc{
  line-height:1.7;
}

.ss-card--remote .ss-card__desc small{
  display:block;
  margin-top:8px;
  color: rgba(15,23,42,.52);
  font-size:12px;
}

.ss-card--remote:hover .ss-card__icon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(57,198,255,.25);
  animation:ss-pulse 1.2s ease-out;
}

.ss-card--remote:hover .ss-card__icon svg *{
  stroke:#1E5AFF;
}

@keyframes ss-pulse{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1.4); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .ss-card--remote,
  .ss-card--remote::before,
  .ss-card__icon,
  .ss-card__badge{
    transition:none !important;
  }

  .ss-card--remote:hover .ss-card__icon::after{
    animation:none !important;
  }
}
.ss-card--feature{
  position: relative;
  overflow: hidden;
}

.ss-card--feature:hover .ss-card__icon{
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 14px 28px rgba(9,26,75,.12),
    0 0 0 4px rgba(30,90,255,.04);
  background: linear-gradient(180deg, rgba(9,26,75,.14), rgba(9,26,75,.08));
}

.ss-card--feature:hover .ss-card__badge{
  transform: translateX(2px);
}

.ss-card--feature:hover .ss-card__icon svg *{
  stroke:#0b2a4a;
}
.ss-card--feature .ss-card__icon svg{
  stroke-width:2.2;
}
.ss-card--remote{
  border: 1px solid rgba(30,90,255,.18);
}
.ss-card--remote .ss-card__icon::before{
  content:"";
  position:absolute;
  bottom:6px;
  right:6px;
  width:8px;
  height:8px;
  background:#22c55e;
  border-radius:50%;
  box-shadow:0 0 0 2px #fff;
}