/* ════════════════════════════════════════════════════════════════════


   sensodesk.css — motyw SensoDesk 1.0.3


   @author Wojciech Modzelewski


   @date 2026-05-13





   Paleta z motywu instytutsi.pl (instytut-si-themeWM v24.29):


   - Tła kremowo-niebieskawe (#F0F6FF / #E8F1FB)


   - Akcent dusty rose #C4788A, hover #8B4A5E


   - Navy #1a2e4a / #0D2038, tekst #0D2E6B


   - Niebieski #1B5FAA / #2E86DE


   - Fonty: Playfair Display (display) + Nunito Sans (body)


   ════════════════════════════════════════════════════════════════════ */





:root {


  --bg-main:    #F0F6FF;


  --bg-section: #E8F1FB;


  --bg-card:    #FFFFFF;


  --text:       #0D2E6B;


  --text-head:  #1a2e4a;


  --text-muted: #4a6080;


  --navy:       #1a2e4a;


  --navy-deep:  #0D2038;


  --rose:       #C4788A;


  --rose-deep:  #8B4A5E;


  --rose-soft:  #FAF0F2;


  --blue:       #1B5FAA;


  --blue-light: #2E86DE;


  --logo-pink:   #C4788A;


  --logo-purple: #8B4A5E;


  --logo-blue:   #2d4a6e;


  --border:     rgba(13,46,107,0.10);


  --shadow-soft:0 4px 20px rgba(13,46,107,0.06);


  --font-display: 'Playfair Display', Georgia, serif;


  --font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;


  --radius:     8px;


}





*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


html { scroll-behavior: smooth; }


body {


  background: var(--bg-main);


  color: var(--text);


  font-family: var(--font-body);


  font-size: 15px;


  line-height: 1.7;


  -webkit-font-smoothing: antialiased;


}


a { color: var(--blue); text-decoration: none; transition: color 0.2s; }


a:hover { color: var(--rose); }


img { max-width: 100%; height: auto; }





/* TOPBAR */


.sd-topbar {


  background: var(--navy);


  color: #fff;


  padding: 8px 32px;


  font-size: 0.78rem;


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


  gap: 16px; flex-wrap: wrap;


}


.sd-topbar a { color: var(--rose); }


.sd-topbar a:hover { color: #fff; }


.sd-topbar-info { color: rgba(255,255,255,0.75); }





/* HEADER NIEZALOGOWANY */


.sd-header-public {


  background: #fff;


  border-bottom: 1px solid var(--border);


  padding: 18px 48px;


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


  box-shadow: 0 2px 8px rgba(13,46,107,0.04);


}


.sd-logo-public {


  display: flex; align-items: center; gap: 14px;


  text-decoration: none;


}


.sd-logo-bars-public {


  display: flex; align-items: flex-end; gap: 4px; height: 40px;


}


.sd-logo-bar-public {


  border-radius: 20px 20px 4px 4px;


  box-shadow: 0 1px 2px rgba(0,0,0,0.08);


}


.sd-logo-bar-public:nth-child(1) { width: 19px; height: 32px; background: var(--logo-pink); }


.sd-logo-bar-public:nth-child(2) { width: 13px; height: 21px; background: var(--logo-purple); margin-bottom: 2px; }


.sd-logo-bar-public:nth-child(3) { width: 19px; height: 32px; background: var(--logo-blue); }


.sd-logo-text-public {


  display: flex; flex-direction: column; line-height: 1.1;


}


.sd-logo-name-public {


  font-family: var(--font-display);


  font-size: 1.15rem; font-weight: 700;


  color: var(--text-head);


}


.sd-logo-name-public em {


  font-style: italic; color: var(--rose); font-weight: 700;


}


.sd-logo-sub-public {


  font-size: 0.66rem; color: var(--text-muted);


  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px;


}


.sd-header-actions { display: flex; gap: 16px; align-items: center; }


.sd-nav-link {


  color: var(--text); font-size: 0.85rem;


  font-weight: 600; transition: color 0.2s;


}


.sd-nav-link:hover { color: var(--blue); }


.sd-nav-cta {


  background: linear-gradient(90deg, var(--rose), var(--rose-deep));


  color: #fff !important;


  padding: 11px 26px;


  font-size: 0.85rem; font-weight: 700;


  border: none; cursor: pointer; text-decoration: none;


  border-radius: var(--radius);


  transition: all 0.2s;


  box-shadow: 0 4px 12px rgba(196,120,138,0.25);


  display: inline-block;


}


.sd-nav-cta:hover {


  transform: translateY(-1px);


  box-shadow: 0 8px 20px rgba(196,120,138,0.35);


}





/* HEADER ZALOGOWANY */


.sd-header {


  background: var(--navy);


  padding: 14px 32px;


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


}


.sd-logo {


  display: flex; align-items: center; gap: 12px;


  color: #fff;


}


.sd-logo-mark {


  display: flex; align-items: flex-end; gap: 3px;


}


.sd-logo-bar {


  width: 6px; border-radius: 2px;


}


.sd-logo-bar:nth-child(1) { height: 16px; background: var(--rose); }


.sd-logo-bar:nth-child(2) { height: 22px; background: var(--rose); opacity: .7; }


.sd-logo-bar:nth-child(3) { height: 18px; background: var(--blue-light); }


.sd-logo-text {


  font-family: var(--font-display);


  font-weight: 700; font-size: 0.95rem;


  line-height: 1.2;


}


.sd-logo-text span {


  display: block;


  font-family: var(--font-body);


  color: var(--blue-light);


  font-size: 9px; letter-spacing: .12em;


  text-transform: uppercase; opacity: .8;


}


.sd-header-user {


  font-size: 13px; color: rgba(255,255,255,.7);


  display: flex; align-items: center; gap: 14px;


}


.sd-header-user strong { color: #fff; font-weight: 700; }


.sd-header-user a {


  color: rgba(255,255,255,0.7);


}


.sd-header-user a:hover { color: var(--rose); }





/* HERO */


.sd-hero {


  position: relative;


  padding: 100px 48px 80px;


  overflow: hidden;


  text-align: center;


  background:


    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(196,120,138,0.08) 0%, transparent 60%),


    radial-gradient(ellipse 50% 50% at 75% 80%, rgba(27,95,170,0.06) 0%, transparent 60%),


    var(--bg-main);


}


.sd-hero-inner {


  max-width: 900px; margin: 0 auto;


  position: relative; z-index: 1;


}


.sd-hero-eyebrow {


  display: inline-block;


  font-size: 0.72rem; color: var(--rose-deep);


  letter-spacing: 0.18em; text-transform: uppercase;


  font-weight: 700;


  padding: 8px 20px;


  border: 1px solid var(--rose);


  background: var(--rose-soft);


  border-radius: 100px;


  margin-bottom: 32px;


}


.sd-hero h1 {


  font-family: var(--font-display);


  font-size: clamp(2.2rem, 5vw, 3.8rem);


  font-weight: 900; line-height: 1.12;


  color: var(--text-head);


  letter-spacing: -0.015em;


  margin-bottom: 24px;


}


.sd-hero h1 em {


  font-style: italic;


  color: var(--rose);


  font-weight: 700;


}


.sd-hero-sub {


  font-size: 1.05rem;


  color: var(--text-muted);


  max-width: 620px;


  margin: 0 auto 36px;


  line-height: 1.7;


}


.sd-hero-ctas {


  display: flex; gap: 14px;


  justify-content: center; flex-wrap: wrap;


  margin-bottom: 48px;


}


.sd-btn-primary {


  background: linear-gradient(90deg, var(--rose), var(--rose-deep));


  color: #fff !important;


  padding: 15px 34px;


  font-size: 0.92rem; font-weight: 700;


  text-decoration: none;


  border: none; cursor: pointer;


  border-radius: var(--radius);


  transition: all 0.2s;


  display: inline-flex; align-items: center; gap: 8px;


  box-shadow: 0 4px 14px rgba(196,120,138,0.25);


}


.sd-btn-primary:hover {


  transform: translateY(-2px);


  box-shadow: 0 10px 28px rgba(196,120,138,0.35);


}


.sd-btn-outline {


  background: #fff; color: var(--blue) !important;


  padding: 15px 34px;


  font-size: 0.92rem; font-weight: 700;


  border: 2px solid var(--blue); text-decoration: none;


  border-radius: var(--radius);


  transition: all 0.2s;


  display: inline-flex; align-items: center; gap: 8px;


}


.sd-btn-outline:hover {


  background: var(--blue); color: #fff !important;


  transform: translateY(-2px);


}





/* TAGI */


.sd-hero-tags {


  display: flex; gap: 10px;


  justify-content: center; flex-wrap: wrap;


}


.sd-hero-tag {


  background: #fff;


  border: 1px solid var(--border);


  padding: 9px 18px;


  font-size: 0.82rem;


  color: var(--text);


  border-radius: 100px;


  font-weight: 600;


}


.sd-hero-tag::before {


  content: '';


  display: inline-block; width: 7px; height: 7px;


  background: var(--rose); border-radius: 50%;


  margin-right: 10px; vertical-align: middle;


}





/* KARTA LOGOWANIA */


.sd-login-section {


  padding: 80px 48px;


  background: var(--bg-section);


  border-top: 1px solid var(--border);


  border-bottom: 1px solid var(--border);


}


.sd-login-card {


  max-width: 720px; margin: 0 auto;


  background: #fff;


  border: 1px solid var(--border);


  padding: 48px 40px;


  position: relative;


  text-align: center;


  border-radius: 12px;


  box-shadow: var(--shadow-soft);


}


.sd-login-card::before {


  content: '';


  position: absolute; top: 0; left: 32px; right: 32px;


  height: 4px;


  background: linear-gradient(90deg, var(--rose), var(--blue));


  border-radius: 0 0 4px 4px;


}


.sd-login-eyebrow {


  font-size: 0.72rem; color: var(--rose-deep);


  letter-spacing: 0.18em; text-transform: uppercase;


  font-weight: 700; margin-bottom: 14px;


}


.sd-login-card h2 {


  font-family: var(--font-display);


  font-size: 2rem; font-weight: 900;


  color: var(--text-head);


  margin-bottom: 14px;


}


.sd-login-card h2 em { color: var(--rose); font-style: italic; }


.sd-login-card p {


  color: var(--text-muted); font-size: 0.98rem;


  max-width: 480px; margin: 0 auto 28px;


  line-height: 1.7;


}





/* CTA PRZED STOPKĄ */


.sd-pre-footer {


  padding: 90px 48px;


  background: var(--navy);


  color: #fff;


  text-align: center;


  position: relative; overflow: hidden;


}


.sd-pre-footer::before {


  content: '';


  position: absolute; inset: 0;


  background:


    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(196,120,138,0.15) 0%, transparent 60%),


    radial-gradient(ellipse 40% 50% at 80% 10%, rgba(46,134,222,0.1) 0%, transparent 60%);


}


.sd-pre-footer-inner {


  max-width: 680px; margin: 0 auto;


  position: relative; z-index: 1;


}


.sd-pre-footer h2 {


  font-family: var(--font-display);


  font-size: clamp(1.8rem, 3.5vw, 2.4rem);


  font-weight: 900; line-height: 1.15;


  color: #fff; margin-bottom: 18px;


}


.sd-pre-footer h2 em { color: var(--rose); font-style: italic; }


.sd-pre-footer p {


  color: rgba(255,255,255,0.75); font-size: 1rem;


  margin-bottom: 32px; line-height: 1.7;


}





/* BREADCRUMBS */


.sd-breadcrumbs {


  padding: 18px 48px;


  background: #fff;


  border-bottom: 1px solid var(--border);


  font-size: 0.85rem;


}


.sd-breadcrumbs-inner {


  max-width: 900px; margin: 0 auto;


  color: var(--text-muted);


}


.sd-breadcrumbs a { color: var(--blue); font-weight: 600; }


.sd-breadcrumbs a:hover { color: var(--rose); text-decoration: underline; }


.sd-breadcrumbs .sep {


  margin: 0 12px; color: var(--text-muted); opacity: 0.5;


}


.sd-breadcrumbs strong { color: var(--text-head); font-weight: 700; }





/* PAGE.PHP - strony statyczne */


.sd-page-wrap {


  max-width: 820px;


  margin: 0 auto;


  padding: 60px 48px 80px;


  background: var(--bg-main);


}


.sd-page-eyebrow {


  font-size: 0.72rem; color: var(--rose-deep);


  letter-spacing: 0.2em; text-transform: uppercase;


  font-weight: 700;


  margin-bottom: 14px; text-align: center;


}


.sd-page-wrap > h1 {


  font-family: var(--font-display);


  font-size: clamp(1.9rem, 4vw, 2.6rem);


  font-weight: 900;


  color: var(--text-head);


  text-align: center;


  margin-bottom: 12px;


}


.sd-page-meta {


  text-align: center;


  font-size: 0.85rem;


  color: var(--text-muted);


  margin-bottom: 50px;


  padding-bottom: 28px;


  border-bottom: 1px solid var(--border);


}


.sd-page-content h2 {


  font-family: var(--font-display);


  font-size: 1.55rem; font-weight: 700;


  color: var(--blue);


  margin: 40px 0 16px;


}


.sd-page-content h3 {


  font-size: 1.05rem; font-weight: 700;


  color: var(--text-head);


  margin: 28px 0 10px;


}


.sd-page-content p,


.sd-page-content li {


  font-size: 0.95rem; line-height: 1.8;


  color: var(--text); margin-bottom: 12px;


}


.sd-page-content ul,


.sd-page-content ol {


  padding-left: 26px; margin-bottom: 16px;


}


.sd-page-content strong { color: var(--text-head); font-weight: 700; }


.sd-back-link {


  display: inline-flex; align-items: center; gap: 10px;


  margin-top: 40px; padding: 13px 26px;


  background: #fff;


  color: var(--blue);


  border: 2px solid var(--blue);


  text-decoration: none;


  font-size: 0.9rem; font-weight: 700;


  border-radius: var(--radius);


  transition: all 0.2s;


}


.sd-back-link:hover {


  background: var(--blue); color: #fff;


  transform: translateX(-4px);


}





/* STOPKA */


.sd-footer {


  background: var(--navy-deep);


  color: rgba(255,255,255,0.75);


  padding: 30px 48px 18px;


}


.sd-footer-row1 {


  max-width: 1200px; margin: 0 auto;


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


  gap: 24px; flex-wrap: wrap;


  padding-bottom: 20px;


  border-bottom: 1px solid rgba(255,255,255,0.1);


}


.sd-footer-brand {


  display: flex; align-items: center; gap: 14px;


}


.sd-footer-logo-bars {


  display: flex; align-items: flex-end; gap: 3px; height: 28px;


}


.sd-footer-logo-bars div {


  border-radius: 14px 14px 3px 3px;


}


.sd-footer-logo-bars div:nth-child(1) { width: 13px; height: 22px; background: var(--logo-pink); }


.sd-footer-logo-bars div:nth-child(2) { width: 9px;  height: 14px; background: var(--logo-purple); margin-bottom: 2px; }


.sd-footer-logo-bars div:nth-child(3) { width: 13px; height: 22px; background: var(--logo-blue); }


.sd-footer-name {


  font-family: var(--font-display);


  font-size: 1rem; font-weight: 700;


  color: #fff;


}


.sd-footer-name em { color: var(--rose); font-style: italic; }


.sd-footer-tag {


  font-size: 0.72rem; color: rgba(255,255,255,0.55);


}


.sd-footer-links-inline {


  display: flex; gap: 22px; list-style: none;


  flex-wrap: wrap;


}


.sd-footer-links-inline a {


  color: rgba(255,255,255,0.7);


  font-size: 0.78rem;


}


.sd-footer-links-inline a:hover { color: var(--rose); }


.sd-footer-row2 {


  max-width: 1200px; margin: 0 auto;


  padding-top: 16px;


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


  gap: 16px; flex-wrap: wrap;


  font-size: 0.72rem;


  color: rgba(255,255,255,0.45);


}


.sd-author-link {


  color: rgba(255,255,255,0.6) !important;


  text-decoration: none;


  border-bottom: 1px dotted rgba(255,255,255,0.3);


  transition: all 0.2s;


  display: inline-flex; align-items: center; gap: 5px;


}


.sd-author-link:hover {


  color: var(--rose) !important;


  border-bottom-color: var(--rose);


}


.sd-li-icon {


  width: 12px; height: 12px;


  vertical-align: -2px; fill: currentColor;


}





/* PANEL UCZESTNIKA (oryginalny layout 1.0.2 - z nowymi kolorami) */


.sd-sidebar {


  background: var(--navy); padding: 24px 0;


  border-right: 1px solid rgba(255,255,255,.05);


}


.sd-avatar {


  width: 44px; height: 44px; border-radius: 50%;


  background: linear-gradient(135deg, var(--rose), var(--blue-light));


  display: flex; align-items: center; justify-content: center;


  color: #fff; font-weight: 700;


}


.sd-user-role {


  font-size: 10px; color: var(--blue-light); font-weight: 700;


  letter-spacing: .08em; text-transform: uppercase;


}


.sd-nav a {


  display: block; padding: 10px 24px;


  color: rgba(255,255,255,0.7); text-decoration: none;


  border-left: 3px solid transparent;


  transition: all 0.2s;


  font-size: 14px;


}


.sd-nav a:hover {


  color: #fff; background: rgba(255,255,255,0.05);


}


.sd-nav a.active {


  color: #fff;


  border-left-color: var(--rose);


  background: rgba(196,120,138,.15);


}


.sd-main {


  padding: 32px 36px;


  background: var(--bg-main);


}


.sd-page-title {


  font-size: 22px; font-weight: 800;


  color: var(--navy); margin-bottom: 4px;


  font-family: var(--font-display);


}


.sd-page-sub {


  font-size: 13px; color: var(--text-muted);


  margin-bottom: 28px;


}





/* RESPONSYWNOŚĆ */


@media (max-width: 800px) {


  .sd-hero { padding: 60px 24px 50px; }


  .sd-hero h1 { font-size: 2rem; }


  .sd-login-card { padding: 32px 20px; }


  .sd-footer-row1 { flex-direction: column; align-items: flex-start; }


  .sd-header-public { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }


  .sd-topbar { padding: 6px 20px; font-size: 0.72rem; }


  .sd-breadcrumbs { padding: 14px 24px; }


  .sd-page-wrap { padding: 36px 24px 60px; }


  .sd-pre-footer { padding: 60px 24px; }


  .sd-login-section { padding: 50px 24px; }


}