:root{
  --bg:#0b1530; --panel:#122540; --muted:#a8bdd3; --line:#1a3557;
  --btn:#c0c0c0; --btn-dark:#808080; --btn-light:#ffffff;
}
*{box-sizing:border-box}
body.dark{margin:0; font-family:Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:#e8f2ff}

/* TOP BAR */
.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}
.brand{display:flex;gap:10px;align-items:center}
.logo{height:34px} /* +20% */
.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)}

.tabs{display:flex;gap:8px}
.tab{color:#e6eef8;text-decoration:none;background:#0b223a;border:1px solid #12365c;border-radius:6px;padding:6px 10px}
.tab.active{background:#122540}

/* LAYOUT */
.grid2{display:grid;gap:14px;padding:14px;grid-template-columns:1fr 1.2fr}
@media (max-width:980px){.grid2{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px}
.panel h2{margin:0 0 10px}
label{display:block;margin:8px 0 6px}
input[type=file]{width:100%;padding:8px;background:#0b223a;border:1px solid #12365c;border-radius:6px;color:#eaf2ff}
.cap{display:flex;gap:10px;align-items:center;margin:10px 0}
.cap .q{padding:8px 10px;background:#0b223a;border:1px solid #12365c;border-radius:6px;font-weight:700}
.cap input{flex:1;padding:8px 10px;border:1px solid #12365c;border-radius:6px;background:#081a2e;color:#eaf2ff}
.btn{background:#124b80;border:1px solid #1660a6;color:#e8f2ff;padding:8px 14px;border-radius:8px;cursor:pointer}
.flash{margin-top:10px;background:#0b223a;border:1px solid #12365c;border-radius:6px;padding:8px 10px;color:#bcd0e6}

/* TOOLBAR (Win98-look) */
.toolbar.win98{background:#203a60;border:1px solid #1a3557;border-radius:6px;padding:8px;margin-bottom:8px}
.group{display:inline-flex;gap:0;position:relative}
.btn98{font-family:Tahoma, sans-serif;font-size:13px;background:var(--btn);border:2px outset #d0d0d0;color:#000;padding:6px 10px;cursor:pointer}
.btn98.left{border-top-right-radius:0;border-bottom-right-radius:0}
.btn98.right{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-2px}
.btn98.mini{padding:4px 8px}
.btn98:active{border-style:inset}

/* Menu ▾ kotwiczone pod przyciskiem */
.ctx-menu{display:none;position:absolute;left:0;top:calc(100% + 4px);min-width:240px;background:#0b223a;border:1px solid #2a4e80;border-radius:8px;z-index:10000;padding:6px;list-style:none;margin:0}
.ctx-menu.open{display:block}
.ctx-menu li{padding:6px 8px;cursor:pointer;color:#d7e4f5}
.ctx-menu li:hover{background:#122540}
.ctx-menu .row{display:flex;gap:8px;align-items:center}
.ctx-menu .sep{border-top:1px solid #2a4e80;margin:6px 0}

/* Tip + rzutnia */
.tip{background:#0b223a;border:1px solid #12365c;border-radius:6px;padding:8px 10px;color:#a6bed7;margin-bottom:8px}
.viewport{position:relative;border:1px solid #12365c;border-radius:8px;overflow:hidden;background:#0a1530}
#cv{display:block;width:100%;height:520px}

/* Overlay wymiarów */
.dim-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.dim-label{position:absolute;transform:translate(-50%,-50%);background:rgba(12,34,58,.9);border:1px solid #2a4e80;padding:2px 6px;border-radius:4px;font-size:12px;color:#d6e7ff;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}