body, html {
  background: #181a20;
  color: #e1e4ea;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0; padding: 0;
  min-height: 100vh;
}
body.dark { background: #1b1d23; color: #e1e4ea; }
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 36px 22px 36px;
  background: #242531;
  box-shadow: 0 4px 24px #000d;
  min-height: 78px;
  z-index: 100;
  position: relative;
}
.header-banner {
  width: 100%; height: 90px; object-fit: cover; border-radius: 18px;
  box-shadow: 0 3px 16px #0a0b12b0;
  margin-bottom: 12px;
}
.header-info {
  display: flex; align-items: center;
  position: absolute; left: 30px; top: 32px;
}
.avatar {
  width: 54px; height: 54px; border-radius: 18px; margin-right: 20px; box-shadow: 0 2px 10px #000a;
}
.avatar-sm { width: 33px; height: 33px; border-radius: 12px; box-shadow: 0 1px 5px #0006; }
.header-right {
  display: flex; align-items: center; gap: 22px; position: absolute; right: 42px; top: 38px;
}
.header-right a { color: #d0e3ff; font-weight: bold; font-size: 0.8em; text-decoration: none; margin-left: 18px;}
.header-right a:hover { text-shadow: 0 0 10px #97e4fa99; }



.sticky-widgets {
  position: fixed;
  top: 90px; 
  right: 28px;
  width: 430px;
  z-index: 2000;
  display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 6px 30px #001, 0 2px 12px #1e213155;
  border-radius: 19px;
  background: rgba(27,29,37,0.98);
  padding: 5px 11px 15px 13px;
}
.sticky-widget-box {
  background: linear-gradient(135deg, #232531 60%, #181923 100%);
  border-radius: 15px;
  margin: 6px 0 6px 0;
  box-shadow: 0 2px 18px #0007;
  padding: 15px 18px 14px 18px;
}
.sticky-widgets .podsumowanie {
  font-size: 0.8em;
  font-weight: 600;
  margin-bottom: 7px;
  color: #91c8fa;
  letter-spacing: 0.03em;
}
.news-item {
  border-bottom: 1px solid #23262d;
  padding: 3px 0 3px 0;
  font-size: 0.8em;
}
.news-item:last-child { border-bottom: none; }

@media (max-width: 900px) {
  .sticky-widgets { position: static; width: 97vw; max-width: 100vw; border-radius: 0; box-shadow: none; }
}

main {
  display: flex; flex-direction: column; gap: 44px; max-width: 1380px; margin: 24px auto 0; padding: 0 2vw 80px 2vw;
}
.materials { width: 100%; }
.materials h1 { font-size: 2.0em; font-weight: 500; letter-spacing: 0.01em; margin-bottom: 22px;}
.materials-list { margin-top: 20px; }

.material {
  background: #21222b;
  border-radius: 15px;
  box-shadow: 0 2px 18px #0f162f36;
  padding: 19px 28px 19px 20px;
  margin-bottom: 24px;

  position: relative;
  font-size: 1.02em;
}
.material.admin-to-user { border: 2.5px solid #4ee481 !important; }
.material.unread { border: 2.5px solid #5e7fff; }
.material .mat-header {
  display: flex; align-items: center; font-size: 1.02em; margin-bottom: 12px;
  justify-content: space-between;
}
.material .mat-status {
  color: #fff; background: #3972cf;
  border-radius: 11px; font-size: 0.94em;
  padding: 2px 13px; margin-left: 10px;
  font-weight: 600; box-shadow: 0 1px 8px #1c223a99;
}
.mat-note {
  background: #21283c; border-radius: 10px; margin-top: 10px;
  padding: 8px 13px; font-size: 1.01em; color: #a7bad6;
  font-style: italic; box-shadow: 0 1px 7px #1e2331;
}

.mat-content img { cursor:pointer; transition: box-shadow .2s;}
.mat-content img:hover { box-shadow: 0 0 20px #34e1e666; }

.mat-img { max-width: 160px; border-radius: 12px; box-shadow: 0 1px 14px #10101344; margin-bottom: 8px; display: block;}
.mat-vid, .mat-aud { width: 100%; margin-bottom: 8px; }
.mat-video-embed { margin: 10px 0; }
.mat-video-embed iframe, .mat-video-embed video {
  border: 0; border-radius: 11px; box-shadow: 0 1px 10px #1117;
  width: 300px; max-width: 96vw; height: 180px; background: #191a1d;
}
.material a, .mat-note a { color: #6e8dfd; text-decoration: underline; }

.users-table { width: 100%; border-collapse: collapse; margin-bottom: 36px;}
.users-table th, .users-table td { padding: 10px 11px; font-size: 1.01em;}
.users-table tr { border-bottom: 1px solid #313a44; }
.users-table th { background: #222631; color: #7db7ff; font-weight: 600; font-size: 1.09em; letter-spacing: 0.03em; }
.users-table td { background: #23242a; }
.user-dot {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 3px;
  margin-left: 3px;
}
.user-dot.online {
  color: #46e076 !important;
  text-shadow: 0 0 8px #0f64,0 0 2px #fff;
}
.user-dot.offline {
  color: #e02c2c !important;
  text-shadow: 0 0 8px #800,0 0 2px #fff;
}

input[type="file"], input[type="text"], textarea, select {
  background: #232534;
  border: 1.1px solid #35395a;
  color: #e0e3e8;
  border-radius: 8px;
  padding: 8px 12px; font-size: 1em; margin-bottom: 3px;
  outline: none; box-shadow: 0 0 0 1.3px #3145b755;
}
input[type="file"] { background: none; color: #ccc; padding: 0;}
input[type="text"]:focus, textarea:focus, select:focus { border: 1.5px solid #6096fa; }
textarea { min-height: 64px; resize: vertical; }
button {
  background: #4563ea;
  color: #fff; border: none; border-radius: 10px;
  font-size: 1.08em; font-weight: 600; letter-spacing: 0.03em;
  padding: 10px 24px; margin-top: 8px;
  box-shadow: 0 1px 10px #1115; cursor: pointer;
  transition: background .16s;
}
button:hover { background: #3141a8;}
.download-btn { background:#374fe7; color:#fff; font-size:0.95em; margin:4px 0 0 0; border-radius:8px; padding:7px 18px; }
.download-btn:hover { background:#2330a9;}
.edit-btn, .del-btn { background:none; border:none; cursor:pointer; font-size:1.11em;}
.edit-btn:hover { color: #66b1ff;}
.del-btn:hover { color: #ff6161;}

.alert {
  background: #df4b4b; color: #fff; border-radius: 10px;
  padding: 7px 15px; font-size: 1.06em; margin: 10px 0 18px 0;
  box-shadow: 0 1px 6px #430a0a33;
}
footer {
  margin-top: 60px; text-align: center;
  color: #6a7db7; font-size: 1.13em; padding: 22px 0 22px 0;
  background: none;
}