:root{
  --bg:#0b1530; --panel:#122540; --muted:#a8bdd3; --line:#1a3459; --text:#eaf2ff;
  --accent:#1f64ff; --accent-2:#2a8bff; --accent-3:#8fc3ff; --brand:#eaf2ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
  line-height:1.5
}

a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.title-3d{margin:0;color:#e6eef8;font-weight:700;letter-spacing:.5px;font-size:18px} /* -50% */
.title-3d.anaglyph{position:relative;text-shadow:-1px 0 0 #ff2b2b, 1px 0 0 #00d6ff}
.title-3d.anaglyph::before,.title-3d.anaglyph::after{content:attr(data-text);position:absolute;inset:0;opacity:.75}
.title-3d.anaglyph::before{color:#ff2b2b;transform:translateX(-1.6px)}
.title-3d.anaglyph::after{color:#00d6ff;transform:translateX(1.6px)}
/* Topbar z logo i nazwą */
.topbar{
position:sticky;top:0;z-index:1000;background:#0e1d36;border-bottom:1px solid #0a1a2c;padding:8px 12px;display:flex;align-items:center;justify-content:space-between
  
}
.topbar .brand{display:flex;align-items:center;gap:14px}
.topbar .logo{
  height:34px;
}
.topbar .title-3d{
margin:0;color:#e6eef8;font-weight:700;letter-spacing:.5px;font-size:18px
	
}



.anaglyph{
  position:relative;display:inline-block;
  margin:0;color:#e6eef8;font-weight:700;letter-spacing:.5px;font-size:18px
}

.anaglyph::before{color:#ff2b2b;transform:translateX(-1.6px)}
.anaglyph::after{color:#00d6ff;transform:translateX(1.6px)}

.anaglyph::before,.anaglyph::after{content:attr(data-text);position:absolute;inset:0;opacity:.75}

}

/* Zakładki */
.tabs{display:flex;align-items:center;gap:10px}
.tab{
  padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:#0e1d38;color:#cfe2ff;display:inline-flex;align-items:center;gap:8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset, 0 0 0 1px rgba(255,255,255,.02) inset;

}
.tab:hover{filter:brightness(1.08)}
.tab.active{background:#102344;color:#fff;border-color:#284a7d}

/* Panel / karta */
.panel{
  background: linear-gradient(180deg,#0f1d39,#0d1a33);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.03) inset;
  margin:12px 0;
}
.panel h2{margin:0 0 10px 0}

/* Narzędziówka „win98” */
.toolbar.win98{
  background: linear-gradient(180deg,#0e1d38,#0d1a33);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

/* Przycisk */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #2a4f86;
  background: linear-gradient(180deg,#1a3d74,#153664);
  color:#eaf2ff; font-weight:600;
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 8px 20px rgba(0,0,0,.25);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

/* Mała pastylka „98” */
.btn98{
  display:inline-block;padding:4px 8px;border-radius:6px;
  border:1px solid #2a4f86;background:#11315c;color:#cfe2ff;
  font-size:12px
}
.btn98.mini{padding:2px 6px;font-size:11px}

/* Tabela */
.table thead th{font-weight:600;color:#a8bdd3}
.table th,.table td{border-bottom:1px solid var(--line);padding:10px 12px}
.table{width:100%;border-collapse:separate;border-spacing:0}

/* Formularze */
label{display:block;margin:8px 0;color:#cfe2ff}
input,textarea,select{
  width:100%;padding:10px 12px;border-radius:8px;
  background:#081a2e;color:#eaf2ff;border:1px solid #12365c;
  outline:none
}
input:focus,textarea:focus,select:focus{border-color:#2a8bff;box-shadow:0 0 0 2px rgba(42,139,255,.15)}
textarea{min-height:120px;resize:vertical}

/* Flash/alert */
.flash{
  margin:10px 0;padding:10px 12px;border-radius:8px;
  border:1px solid #2a4f86;background:#0e1d38;color:#cfe2ff
}

/* Siatka */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr} }

/* Utilities */
.dark{background:var(--bg);color:var(--text)}
.muted{color:var(--muted)}
.center{display:flex;align-items:center;justify-content:center}
.right{margin-left:auto}
.nowrap{white-space:nowrap}

/* ===== MENU KATEGORII ===== */

.categories-dropdown {
  position: relative;
  display: inline-block;
  margin: 15px 0;
}

.menu-toggle {
  background: #0b223a;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 5px;
  border-color: #1a3557; 
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.menu-toggle:hover {
  background: #122540;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 12px;
}

.categories-dropdown:hover .arrow {
  transform: rotate(180deg);
}

.categories-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: transparent;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 1000;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  padding: 0;
  padding-left: 50px;
  
}

.categories-dropdown:hover .categories-menu {
  max-height: 350px;
  opacity: 1;
  padding: 10px 0;
}

.categories-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-menu li {
  margin: 0;
  border-bottom: 0px solid #f0f0f0;
}

.categories-menu li:last-child {
  border-bottom: none;
}

.categories-menu a {
  display: block;
  padding: 12px 20px;
  color: #d7e4f5;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  border-color: #122540;
}

.categories-menu a:hover {
  background: #122540;
  color: white;
  border-left-color: #1a3557;
  padding-right: 20px;
  
}

@media (max-width: 600px) {
  .menu-toggle {
    width: 100%;
    justify-content: space-between;
  }
  
.categories-menu {
  transform: translateY(-100%);  /* Menu przesuwane od góry */
  opacity: 0;
  transition: all 0.3s ease;
}

.categories-dropdown:hover .categories-menu {
  transform: translateY(0);      /* Pojawia się płynnie */
  opacity: 1;
}
}


/* Download / Export */
.dl{margin-top:8px}