/**
 * Arkusz stylów platformy egzamin.info.pl
 * @author Karol Kowalski
 */

:root {
  --bg: #f8fafc;
  --bg-subtle: #f1f5f9;
  --card: #ffffff;
  --ink: #0f172a;
  --ink-secondary: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  
  --pri: #2563eb;
  --pri-hover: #1d4ed8;
  --pri-soft: #eff6ff;
  --pri-border: #bfdbfe;
  --pri-gradient: #2563eb;
  
  --green: #16a34a;
  --green-soft: #f0fdf4;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --orange: #d97706;
  --orange-soft: #fffbeb;
  --yellow: #ca8a04;
  --purple: #2563eb;
  
  --r: 8px;
  --r-sm: 6px;
  --r-lg: 10px;
  
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh: 0 1px 3px rgba(15, 23, 42, 0.06);
  --sh-lg: 0 4px 12px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--pri); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--pri-hover); text-decoration: underline; }

h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 0.15em 0 0.4em; color: var(--ink); }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; margin: 0.25em 0 0.5em; color: var(--ink); }
h3 { font-size: 1.05rem; font-weight: 600; margin: 0.25em 0 0.4em; color: var(--ink); }

code, .code {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0.12em 0.4em;
  font-size: 0.86em;
  color: #0f172a;
  font-weight: 600;
}
pre.code, pre.codeblock {
  padding: 12px 16px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.86rem;
  line-height: 1.5;
  border: 1px solid #1e293b;
  background: #0f172a;
  color: #f8fafc;
  margin: 10px 0 14px;
  box-shadow: none;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
pre.codeblock code, pre.code code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  font-weight: normal !important;
}

/* ---------- Pasek nawigacyjny ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  padding: 0;
}
.top-accent-line {
  display: none;
}
.top-bar {
  max-width: 1560px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
body.mode-teacher .top-bar {
  max-width: 1560px;
}
.brand,
.brand:hover,
.brand:focus {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  color: #ffffff;
  flex-shrink: 0;
}
.brand-logo-mark,
.foot-brand-mark {
  display: none !important;
}
.brand-info {
  display: inline-grid;
  grid-template-columns: min-content;
}
.brand-name,
.brand-name span,
.brand:hover .brand-name,
.brand:hover .brand-name span {
  text-decoration-line: underline;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.brand-name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap;
}
.brand-name span {
  color: #38bdf8;
  font-weight: 600;
}
.brand-sub,
.brand:hover .brand-sub {
  font-size: 0.456rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #94a3b8;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 2px;
  white-space: nowrap;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
  text-decoration: none !important;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.teacher-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.teacher-nav-links a {
  color: #cbd5e1;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 0.87rem;
  font-weight: 600;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.teacher-nav-links a:hover {
  color: #ffffff;
  background: #1e293b;
}
.teacher-nav-links a.on {
  background: #1e3a8a;
  color: #ffffff;
  border: 1px solid #3b82f6;
}

.teacher-nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid #334155;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.top-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #1e293b;
  border: 1px solid #334155;
  padding: 5px 13px;
  min-height: 38px;
  border-radius: 8px;
  color: #f1f5f9;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}
.top-user-pill.top-ab-pill {
  padding: 6px 11px;
  justify-content: center;
}
.top-user-pill:hover, .top-user-pill.on {
  border-color: #3b82f6;
  background: #0f172a;
  color: #ffffff;
}
.top-user-pill .user-pill-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
}
.top-user-pill .user-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  line-height: 1.15;
}
.top-user-pill .user-role-badge {
  font-size: 0.61rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0;
  margin-top: 2px;
  border-radius: 0;
  background: transparent;
  color: #38bdf8;
  border: none;
  line-height: 1.1;
  white-space: nowrap;
}
.top-logout-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.top-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.top-logout-btn:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.public-nav-links {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
}
.public-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.81rem;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}
.public-nav-links a svg,
.teacher-nav-links a svg {
  flex-shrink: 0;
}
.public-nav-links a:hover {
  color: #ffffff;
  background: #1e293b;
}
.public-nav-links a.on {
  background: #1e3a8a;
  color: #ffffff;
  border: 1px solid #3b82f6;
}
.public-nav-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid #334155;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.btn-teacher-zone {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: #1e3a8a;
  border: 1px solid #3b82f6;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 6px;
  font-size: 0.85rem !important;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn-teacher-zone:hover {
  background: #2563eb;
}

/* ---------- Główny kontener ---------- */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px 90px;
}
/* ---------- Stopka ---------- */
.foot {
  background: #0f172a;
  border-top: 1px solid #1e293b;
  color: #94a3b8;
  font-size: 0.84rem;
  padding: 26px 24px 22px;
  margin-top: 56px;
}
.mode-exam .foot {
  margin-top: 24px;
  padding: 14px 20px;
}
.foot-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.mode-exam .foot-bar,
.mode-exam .foot-bottom {
  display: none;
}
.foot-exam-bar {
  display: none;
}
.mode-exam .foot-exam-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #94a3b8;
}
.foot-exam-left,
.foot-exam-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.foot-brand-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.foot-brand {
  text-decoration: none;
  color: #f1f5f9;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.foot-brand span {
  color: #60a5fa;
}
.foot-bar-sep {
  color: #475569;
  user-select: none;
}
.foot-tagline {
  color: #94a3b8;
  font-size: 0.83rem;
}

.foot-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.foot-nav a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.83rem;
  transition: color 0.12s ease;
}
.foot-nav a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-nav a.foot-mail {
  color: #93c5fd;
}

.foot-bottom {
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #64748b;
}
.foot-bottom strong {
  color: #94a3b8;
  font-weight: 600;
}
.foot-meta {
  color: #64748b;
}

@media (max-width: 720px) {
  .foot {
    padding: 22px 18px 18px;
  }
  .foot-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .foot-bar-sep {
    display: none;
  }
  .foot-brand-group {
    flex-direction: column;
    gap: 3px;
  }
  .foot-nav {
    gap: 12px 16px;
  }
  .foot-bottom,
  .foot-exam-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}


/* ---------- Karty (solidne, bez przezroczystości) ---------- */
.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh);
  margin-bottom: 22px;
  position: relative;
}
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.narrow-left { max-width: 760px; }
.center { text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pri);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.muted { color: var(--muted); }
.small { font-size: 0.86rem; color: var(--muted); }
.lead { font-size: 1.15rem; color: #334155; line-height: 1.6; margin-top: 0; }
.highlight { color: var(--pri); }

.green { color: var(--green); }
.red { color: var(--red); }
.orange { color: var(--orange); }
.warntext { color: var(--orange); font-weight: 600; }

.flash {
  background: var(--green-soft);
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-weight: 500;
}
.error {
  background: var(--red-soft);
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-weight: 500;
}
.info {
  background: var(--pri-soft);
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 20px;
}
.info strong { color: #1e3a8a; }
.info ol { margin: 0.6em 0 0; padding-left: 1.3em; color: #1e293b; }
.info li { margin-bottom: 4px; }

/* ---------- Formularze ---------- */
label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 16px;
  color: #1e293b;
}
label small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 4px;
}
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 400;
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select {
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 38px;
  line-height: 1.3;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  background: #ffffff;
}
textarea { resize: vertical; min-height: 90px; }

input[type=checkbox], input[type=radio] {
  display: inline-block;
  width: auto;
  margin: 0;
  cursor: pointer;
}
label.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500;
  cursor: pointer;
}
label.check input { margin-top: 4px; }
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--pri);
  background: var(--pri);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: all 0.15s ease;
}
button:hover, .button:hover {
  background: var(--pri-hover);
  border-color: var(--pri-hover);
  text-decoration: none;
  box-shadow: var(--sh);
}
button:active, .button:active {
  transform: translateY(1px);
}
button.secondary, .button.secondary {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--line-strong);
}
button.secondary:hover, .button.secondary:hover {
  background: #f8fafc;
  border-color: var(--muted);
}
button.danger, .button.danger {
  background: #ffffff;
  color: var(--red);
  border-color: #fecaca;
}
button.danger:hover {
  background: var(--red-soft);
  border-color: #f87171;
}
button.link {
  background: none;
  border: 0;
  color: var(--pri);
  padding: 0;
  font-weight: 600;
  box-shadow: none;
}
button.link.danger { color: var(--red); }
button.small, .button.small { padding: 6px 12px; font-size: 0.85rem; border-radius: 8px; }
button.big, .button.big { padding: 14px 28px; font-size: 1.05rem; border-radius: 12px; }
button.block, .button.block { width: 100%; margin-top: 8px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
input.mini { width: 70px; display: inline-block; margin: 0; padding: 6px 8px; }
input.w100 { width: 110px; display: inline-block; margin: 0; }
input.w200 { width: 200px; display: inline-block; margin: 0; }
input.w300 { width: 300px; display: inline-block; margin: 0; }

/* ---------- Grupa odblokowania / wznowienia próby (Teacher Actions) ---------- */
.unlock-form {
  display: inline-flex;
  vertical-align: middle;
  margin: 0;
}
.unlock-group {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  height: 32px;
}
.unlock-group:hover {
  border-color: #94a3b8;
}
.unlock-group:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.unlock-form.is-locked .unlock-group:focus-within {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}
.unlock-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  user-select: none;
  background: #f8fafc;
}
.unlock-input {
  width: 36px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  outline: none !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.unlock-input::-webkit-inner-spin-button,
.unlock-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.unlock-suffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: lowercase;
  user-select: none;
  background: #f8fafc;
  border-right: 1.5px solid #cbd5e1;
}
.unlock-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
.unlock-btn svg {
  flex-shrink: 0;
  stroke: #ffffff !important;
}
.unlock-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}
.unlock-btn:active {
  background: #1e40af !important;
  transform: none !important;
}
.unlock-form.is-locked .unlock-btn {
  background: #059669 !important;
}
.unlock-form.is-locked .unlock-btn:hover {
  background: #047857 !important;
}
.unlock-form.is-locked .unlock-btn:active {
  background: #065f46 !important;
}
form.unlock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
form.unlock button {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 20px; }
.span2 { grid-column: span 2; }
.stack { display: grid; gap: 6px; min-width: 220px; }
.stack input, .stack select { margin: 0; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.stickybar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  z-index: 10;
}

/* ---------- Strona startowa ze zdjęciami ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 10px 0 30px;
}
/* Karta z zasadami dla zdającego */
.info-rules-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 20px 0 16px;
}
.info-rules-card h3 {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: #0f172a;
}
.simple-rules {
  list-style: none;
  padding: 0;
  margin: 0;
}
.simple-rules li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.5;
}
.simple-rules li::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: -1px;
  color: var(--pri);
  font-size: 1.2rem;
}
.photo-card {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-top: 18px;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  background: #0f172a;
}
/* ---------- Układ stanowiska egzaminacyjnego ---------- */
.exam-station-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 36px;
}
@media (max-width: 992px) {
  .exam-station-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .station-form-col {
    order: -1;
  }
}
.station-guide-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.station-intro {
  margin-bottom: 2px;
}
.station-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  line-height: 1.25;
}
.station-lead {
  font-size: 0.96rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}
.station-rules-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.panel-header-sub {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.station-rules-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.station-rules-list li {
  font-size: 0.89rem;
  color: #334155;
  line-height: 1.5;
}
.station-rules-list li strong {
  color: #0f172a;
  font-weight: 600;
}
.station-review-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.review-box-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.review-box-header strong {
  display: block;
  font-size: 0.94rem;
  color: #0f172a;
}
.review-box-header .small {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 0.83rem;
  line-height: 1.45;
}
.station-entry-card {
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  border: 1px solid #cbd5e1;
}
.station-entry-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.qualifications-overview-card {
  margin-top: 10px;
  padding: 28px 32px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}
.qual-sec-header {
  margin-bottom: 24px;
}
.qual-sec-header h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 0 6px;
}
.qual-grid-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 850px) {
  .qual-grid-cards {
    grid-template-columns: 1fr;
  }
}
.qual-card-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.qual-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.qual-card-header h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.qual-features-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qual-features-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.45;
}
.qual-features-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: -1px;
  color: #2563eb;
  font-size: 1.1rem;
}
.qual-features-list li strong {
  color: #0f172a;
  font-weight: 700;
}

/* Karta wejściowa ucznia i nauczyciela */
.entry-card {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 26px 26px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.card-accent-bar {
  display: none;
}
.card-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 4px 0 6px;
}
.card-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 18px;
}
.resume-banner {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
}

.code-label {
  font-weight: 600;
  color: #1e293b;
}
.codeinput {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.14em !important;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  background: #f8fafc !important;
  border: 1px solid var(--line-strong) !important;
  color: #0f172a !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}
.codeinput::placeholder {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
}
.codeinput:focus {
  border-color: var(--pri) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  background: #ffffff !important;
}

.privacy-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 12px 0 14px;
}
.privacy-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #94a3b8;
}

.primary-btn {
  background: var(--pri) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  box-shadow: none !important;
}
.primary-btn:hover {
  background: var(--pri-hover) !important;
}

/* Sekcja Showcase ze zdjęciem pracowni komputerowej */
.showcase-card {
  margin-top: 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.25fr;
  align-items: stretch;
}
.showcase-media {
  min-height: 380px;
  background: #0f172a;
}
.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.showcase-content {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.showcase-content h2 {
  font-size: 1.6rem;
  margin: 6px 0 10px;
}
.small-lead {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.perks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.perk-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.perk-icon {
  font-size: 1.4rem;
  margin-bottom: 6px;
}
.perk-box strong {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.perk-box p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ==========================================================================
   STANOWISKO EGZAMINACYJNE: EKRAN ZASAD I PROCEDUR (CKE BRIEFING)
   ========================================================================== */

.exam-rules-deck {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

/* Karta nagłówkowa stanowiska */
.rules-header-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.rules-header-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #dc2626 100%);
}

.rules-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rules-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.badge-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 4px 10px;
  border-radius: 6px;
}

.rules-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 3px 10px;
  border-radius: 6px;
}

.rules-pin-badge strong {
  color: #2563eb;
  letter-spacing: 0.05em;
}

.rules-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.rules-candidate-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.88rem;
  color: #475569;
}

.cand-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cand-label {
  color: #64748b;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.cand-val {
  color: #0f172a;
  font-weight: 700;
}

.cand-val.station-tag {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.80rem;
}

.cand-divider {
  color: #cbd5e1;
}

/* Układ dwukolumnowy */
.rules-two-col-grid {
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 22px;
  align-items: start;
}

/* Lewa kolumna: Parametry i Akcja */
.rules-side-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 4 metryki - idealna siatka 2x2 */
.rules-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.rules-metrics-grid .metric-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.rules-metrics-grid .metric-card:hover {
  border-color: #cbd5e1;
}

.rules-metrics-grid .metric-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 4px;
}

.rules-metrics-grid .metric-label {
  font-size: 0.80rem;
  font-weight: 600;
  color: #64748b;
  text-transform: lowercase;
  line-height: 1.25;
}

.rules-metrics-grid .metric-card.metric-strict {
  border-color: #fecaca;
  background: #fffafa;
}

.rules-metrics-grid .metric-card.metric-strict .metric-num {
  color: #dc2626;
}

/* Panel akcji startowej */
.rules-action-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rules-start-form {
  margin: 0 0 16px 0;
}

.rules-cta-btn {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rules-cta-btn:hover {
  background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38) !important;
}

.rules-start-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.rules-start-notes .note-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.81rem;
  color: #475569;
  line-height: 1.4;
}

.rules-start-notes .note-row svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.rules-abort {
  margin: 0;
  text-align: center;
}

.rules-abort a {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rules-abort a:hover {
  color: #dc2626;
  text-decoration: underline;
}

/* Prawa kolumna: Procedury i Regulamin */
.rules-main-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rules-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.rules-panel-header .panel-header-sub {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1.02rem;
}

.rules-sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.rules-instruction-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rule-card-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.rule-card-item:hover {
  border-color: #cbd5e1;
}

.rule-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rule-card-badge-warn {
  color: #b45309;
  background: #fef3c7;
  border-color: #fde68a;
}

.rule-card-badge-tech {
  color: #0369a1;
  background: #e0f2fe;
  border-color: #bae6fd;
}

.rule-card-content {
  flex: 1;
}

.rule-card-content h4 {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.rule-card-content p {
  margin: 0;
  font-size: 0.87rem;
  color: #475569;
  line-height: 1.55;
}

.rule-card-content kbd {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  font-weight: 700;
  color: #1e293b;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 4px;
}

.rule-sub-points {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.point-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #334155;
}

.point-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.point-dot-warn {
  background: #f59e0b;
}

.point-dot-danger {
  background: #ef4444;
}

/* RWD */
@media (max-width: 960px) {
  .rules-two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* Legacy .facts and .rules fallback */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.facts div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.facts b {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
}
.facts span {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
}
ul.rules {
  padding-left: 20px;
  line-height: 1.6;
}
ul.rules li {
  margin-bottom: 8px;
}

/* ---------- Egzamin (Tryb ucznia, solidny) ---------- */
main.exam {
  max-width: 1720px;
  width: 98%;
  margin: 0 auto;
  padding: 0 16px 90px;
}
.examtop {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #fff;
  padding: 13px 24px;
  margin: 0 0 20px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.examtop.examtop-practical {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 8px 16px !important;
  margin: 0 0 12px !important;
  gap: 10px !important;
  min-height: 48px !important;
}
.examtop-practical .prac-top-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}
.examtop-practical .prac-title-text {
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.examtop-practical .prac-who-meta {
  color: #94a3b8;
  font-size: 0.84rem;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.examtop-practical .prac-who-meta b {
  color: #f1f5f9;
}
.examtop-practical .prac-top-meters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  flex-wrap: nowrap;
}
.examtop-practical .btn-sheet-toggle {
  background: #1e293b;
  border: 1px solid #38bdf8;
  color: #f8fafc;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.examtop-practical .btn-sheet-toggle:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #fff;
}
.examtop-practical .btn-sheet-toggle.collapsed {
  background: #334155;
  border-color: #475569;
  color: #cbd5e1;
}
.examtop-practical .btn-sheet-toggle.collapsed:hover {
  background: #475569;
  color: #fff;
}

/* ==========================================================================
   CKE BRIEFING CARD & SCHLUDNE INSTRUKCJE DLA UCZNIA
   ========================================================================== */
.cke-briefing-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  margin: 14px 0 18px;
  overflow: hidden;
}

.cke-briefing-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 2px solid #38bdf8;
}

.cke-briefing-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #38bdf8;
}
.cke-briefing-badge .badge-icon {
  font-size: 1.1rem;
}

.cke-briefing-subtitle {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 2px;
}

.cke-briefing-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cke-meta-pill {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cke-meta-pill.pill-qual {
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.cke-meta-pill.pill-time {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
  border: 1px solid rgba(253, 224, 71, 0.35);
}

.cke-meta-pill.pill-pts {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.cke-briefing-body {
  padding: 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cke-briefing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.cke-cred-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cke-cred-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.cred-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.cred-os-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.cred-os-info {
  display: flex;
  flex-direction: column;
}

.cred-os-name {
  font-weight: 800;
  font-size: 0.90rem;
  color: #0f172a;
}

.cred-os-role {
  font-size: 0.74rem;
  color: #64748b;
}

.cred-card-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cred-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.83rem;
}

.cred-field-label {
  color: #475569;
  font-weight: 600;
}

.cred-copy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0369a1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cred-copy-pill:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0284c7;
}

.cred-copy-pill.copied {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}

.copy-hint {
  font-size: 0.72rem;
  opacity: 0.75;
}

.cke-briefing-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.cke-note-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.45;
}

.cke-note-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.cke-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

.cke-section-badge {
  background: #0284c7;
  color: #ffffff;
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.cke-section-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.cke-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  background: #f1f5f9;
  border-left: 4px solid #0284c7;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
}

.cke-step-badge {
  background: #0f172a;
  color: #38bdf8;
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.cke-step-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.is-practical-card {
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.is-practical-card .vm-lab-card {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.vm-studio-navbar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px 12px;
  background: #0b1120;
  border-bottom: 2px solid #1e293b;
  padding: 4px 12px !important;
}
.vm-studio-navbar .vm-studio-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vm-studio-navbar .vm-lab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 1180px) {
  .vm-studio-navbar {
    padding: 6px 10px !important;
    gap: 6px;
  }
  .vm-studio-navbar .vm-studio-tabs {
    flex: 1 1 100%;
    width: 100%;
    order: 1;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 4px;
  }
  .vm-studio-navbar .vm-studio-tab-btn {
    padding: 8px 10px;
    font-size: 0.80rem;
    gap: 6px;
  }
  .vm-studio-navbar .vm-lab-actions {
    flex: 1 1 100%;
    width: 100%;
    order: 2;
    margin-left: 0;
    justify-content: flex-end;
    padding-top: 2px;
  }
}
.question:not(:has(.vm-lab-card)) {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.question:has(.vm-lab-card),
.question.has-vm {
  max-width: 100% !important;
  width: 100% !important;
}
.examtop .who {
  font-size: 0.95rem;
}
.examtop .ttl {
  display: block;
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
}
.meters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.pill {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 9999px;
  padding: 5px 13px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
}
.pill.warn {
  background: #7c2d12;
  color: #fed7aa;
  border-color: #c2410c;
}
.pill.err {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #ef4444;
}
.pill.muted { color: #94a3b8; }

.session-live-pill {
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  padding: 5px 13px !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.22);
  transition: all 0.3s ease;
  user-select: none;
}

.live-dot-pulse {
  width: 9px;
  height: 9px;
  background-color: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #22c55e;
  animation: liveGreenBlink 1.4s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes liveGreenBlink {
  0% {
    transform: scale(0.92);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.75);
  }
  50% {
    transform: scale(1.22);
    opacity: 0.35;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.92);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.session-live-pill.saving {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #7dd3fc !important;
}

.session-live-pill.saving .live-dot-pulse {
  background-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.session-live-pill.err {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.session-live-pill.err .live-dot-pulse {
  background-color: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: none;
}

.timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  background: #1e3a8a;
  border: 1px solid #3b82f6;
  border-radius: 10px;
  padding: 5px 14px;
  color: #e0f2fe;
  letter-spacing: 0.05em;
}
.timer.low {
  background: #991b1b;
  border-color: #f87171;
  color: #fff;
}

.qgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 22px;
}
.qgrid button {
  min-width: 38px;
  height: 38px;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 700;
  background: #ffffff;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--sh-sm);
  transition: all 0.15s ease;
}
.qgrid button:hover {
  border-color: var(--pri);
}
.qgrid button.done {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}
.qgrid button.cur {
  border-color: var(--pri);
  background: var(--pri);
  color: #fff;
}
.examform.nav-all .qnav { display: none; }

/* Karta z pytaniem */
.question {
  border-radius: var(--r);
  border: 1.5px solid var(--line);
  padding: 24px 28px;
  margin-bottom: 22px;
}
.question.answered {
  border-left: 5px solid var(--pri);
}
.question .qhead, .review .qhead {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.qnum {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
}
.qtype {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #f1f5f9;
  border-radius: 9999px;
  padding: 4px 12px;
}
.qtype.t-multi { background: #fef3c7; color: #92400e; }
.qtype.t-short, .qtype.t-long, .qtype.t-mixed { background: #ede9fe; color: #5b21b6; }
.qpts {
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 700;
}
.qbody {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Opcje odpowiedzi */
.answers {
  display: grid;
  gap: 10px;
}
.answer {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  background: #ffffff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin: 0;
}
.answer:hover {
  background: #f8fafc;
  border-color: var(--line-strong);
}
.answer:has(input:checked) {
  background: #eff6ff;
  border-color: #3b82f6;
}
.answer input {
  margin: 0;
  transform: scale(1.2);
}
.letter {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f1f5f9;
  font-weight: 800;
  font-size: 0.88rem;
  color: #475569;
}
.answer:has(input:checked) .letter {
  background: #2563eb;
  color: #ffffff;
}
label.open {
  margin-top: 14px;
}
.qnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.btn-finish-nav {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-finish-nav:hover {
  background: #059669;
  border-color: #059669;
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}
.btn-finish-nav:active {
  transform: translateY(1px);
}

/* Multimedia */
.qmedia {
  margin: 0 0 18px;
}
.qmedia img {
  max-width: 100%;
  max-height: 480px;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  display: block;
}
.qmedia video {
  display: block;
  width: 100%;
  max-height: 480px;
  min-height: 180px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 12px;
  background: #0f172a;
}
.qmedia.yt {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
}
.qmedia.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.finish {
  text-align: center;
  padding: 36px 20px;
}
.lightbox[hidden] {
  display: none !important;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.95);
  display: grid;
  place-items: center;
  z-index: 200;
  cursor: zoom-out;
  padding: 20px;
}
.lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  background: #ffffff;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  object-fit: contain;
}

/* Nakładki ostrzeżeń i blokad (solidne tło bez rozmycia) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 32, 0.92);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 20px;
}
.overlay.warn { background: rgba(124, 45, 18, 0.95); }
.overlay.lock { background: rgba(127, 29, 29, 0.97); }
.overlay.veil { background: rgba(15, 23, 42, 0.98); z-index: 1000; }
body.is-veiled #examForm { filter: blur(16px); pointer-events: none; user-select: none; }
body.screenshot-blocked #examForm,
body.screenshot-blocked .examtop,
body.screenshot-blocked .qgrid {
  filter: blur(50px) brightness(0.15) !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.overlay.lock.screenshot-locked {
  background: rgba(69, 10, 10, 0.98) !important;
  z-index: 999999 !important;
}
.overlay.lock.screenshot-locked .ovbox {
  border: 3px solid #ef4444;
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.7);
}
.screenshot-veil {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeInScrVeil 0.12s ease-out;
}
.screenshot-veil[hidden] {
  display: none !important;
}
@keyframes fadeInScrVeil {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.screenshot-veil-box {
  background: #1e293b;
  border: 2px solid #ef4444;
  box-shadow: 0 20px 60px rgba(239, 68, 68, 0.4);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  color: #ffffff;
}
.screenshot-veil-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.screenshot-veil-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #f87171;
  margin-bottom: 8px;
}
.screenshot-veil-desc {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 16px;
}
.screenshot-veil-badge {
  display: inline-block;
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.screenshot-veil-btn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 11px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.screenshot-veil-btn:hover {
  background: #1d4ed8;
}
.badge.badge-screenshot {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #ef4444 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}
.timeline li.screenshot-alert {
  background: #fef2f2 !important;
  border-left: 4px solid #ef4444 !important;
  color: #7f1d1d !important;
}
.ovbox {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 520px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ovbox .row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.ovicon {
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 12px;
}
.lockcard .ovicon {
  font-size: 3.8rem;
}

/* ---------- Wyniki i omówienie ---------- */
.result { text-align: center; padding: 36px 28px; }
.score {
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 12px 0 16px;
  color: #0f172a;
}
.score.score-pass { color: #16a34a; }
.score.score-fail { color: #dc2626; }
.score small {
  font-size: 1.3rem;
  color: var(--muted);
  font-weight: 600;
}

/* Wskaźnik zaliczenia / niezaliczenia (próg 50%) */
.result-score-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 10px;
}
.result-score-wrap .score {
  margin: 0;
}
.result-pct-display {
  font-size: 1.7rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 999px;
  line-height: 1.2;
}
.result-pct-display.pct-pass {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1.5px solid rgba(34, 197, 94, 0.35);
}
.result-pct-display.pct-fail {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1.5px solid rgba(239, 68, 68, 0.35);
}

.exam-verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 1.1rem 1.4rem;
  border-radius: 14px;
  margin: 14px 0 20px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.exam-verdict.verdict-pass {
  background: #f0fdf4;
  border: 2px solid #22c55e;
  color: #14532d;
}
.exam-verdict.verdict-pass .verdict-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}
.exam-verdict.verdict-pass .verdict-title {
  color: #15803d;
}

.exam-verdict.verdict-fail {
  background: #fef2f2;
  border: 2px solid #ef4444;
  color: #7f1d1d;
}
.exam-verdict.verdict-fail .verdict-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
.exam-verdict.verdict-fail .verdict-title {
  color: #b91c1c;
}

.verdict-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.verdict-title {
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.verdict-desc {
  font-size: 0.88rem;
  color: #475569;
  font-weight: 500;
  line-height: 1.4;
}

.verdict-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  margin-top: 6px;
  white-space: nowrap;
}
.verdict-pill.verdict-pass {
  background: #16a34a;
  color: #ffffff;
}
.verdict-pill.verdict-fail {
  background: #dc2626;
  color: #ffffff;
}

.scorebox.scorebox-pass {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}
.scorebox.scorebox-fail {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
.review {
  border-left: 5px solid #94a3b8;
}
.review.ok { border-left-color: var(--green); }
.review.part { border-left-color: var(--yellow); }
.review.bad { border-left-color: var(--red); }
.review.pending { border-left-color: var(--orange); }
.ropts {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 6px;
}
.ropts li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f8fafc;
}
.ropts li.right { background: #ecfdf5; color: #065f46; font-weight: 600; }
.ropts li.chosen:not(.right) { background: #fef2f2; color: #991b1b; }
.ropts li.chosen { font-weight: 700; }
.ropen {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
}
.ropen span { font-weight: 700; }
.why {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  font-size: 0.93rem;
  color: #78350f;
}
.tcomment {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  font-size: 0.93rem;
  color: #1e3a8a;
}
.grade {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
}
.grade label { margin: 0; }
.grade .grow { flex: 1; }
.grade input[type=number] { width: 110px; }

/* ---------- Panel Nauczyciela ---------- */
.teacher-login-card {
  margin-top: 40px;
}
.login-footer-actions {
  margin-top: 18px;
  text-align: center;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.login-forgot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: all 0.15s ease;
}
.login-forgot-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
  transform: translateY(-1px);
}
.recovery-card {
  max-width: 580px;
  margin: 30px auto;
  border-radius: var(--r);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}
.recovery-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: 12px;
}
.recovery-tab-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.90rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #475569;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.recovery-tab-btn.active {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.recovery-tab-btn:hover:not(.active) {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}
.recovery-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #334155;
}
.recovery-box-title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.recovery-key-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  padding: 6px 14px;
  border-radius: 8px;
  letter-spacing: 1.2px;
  border: 1px solid #bae6fd;
  display: inline-block;
}
.recovery-key-field {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1.2px;
  font-weight: 600;
  text-transform: uppercase;
}
.account-security-card {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.account-security-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #0f172a;
}
.tests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
/* ---------- CKE Breadcrumbs & Pagehead ---------- */
.cke-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 14px;
  font-weight: 500;
}
.cke-breadcrumb a {
  color: #2563eb;
  text-decoration: none;
}
.cke-breadcrumb a:hover {
  text-decoration: underline;
}
.cke-breadcrumb .bc-sep {
  color: #94a3b8;
  font-size: 0.75rem;
}
.cke-breadcrumb .bc-current {
  color: #0f172a;
  font-weight: 600;
}
.cke-pagehead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cke-section-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.cke-lead {
  color: #475569;
  font-size: 0.95rem;
  margin: 4px 0 0;
  line-height: 1.5;
}
.cke-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e3a8a !important;
  border: 1px solid #1d4ed8 !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 9px 18px !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.cke-btn-add:hover {
  background: #1d4ed8 !important;
}

/* ==========================================================================
   NOWE KAFELKI SPRAWDZIANÓW (MODERN TEACHER TEST CARDS)
   ========================================================================== */
.testcard {
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.testcard:hover {
  transform: none;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  text-decoration: none;
}
.testcard.is-closed-card {
  background: #f8fafc;
  opacity: 0.88;
}
.testcard.is-closed-card:hover {
  opacity: 1;
}

/* Nagłówek kafelka */
.tc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.tc-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.tc-status-pill.is-open {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.tc-status-pill.is-closed {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.tc-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.tc-status-pill.is-open .tc-status-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.tc-qual-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.tc-qual-pill.qual-inf02 { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.tc-qual-pill.qual-inf03 { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.tc-qual-pill.qual-inf04 { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

.tc-badge-haskey,
.tc-badge-nokey {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}
.tc-badge-haskey {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.tc-badge-nokey {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

/* Kod PIN w pigułce (lista sprawdzianów) */
.tc-pin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 4px 10px;
}
.tc-pin-pill .pin-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 0.4px;
}
.tc-pin-pill .pin-code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  padding: 0;
}

/* Duża karta z kodem PIN w widoku szczegółów sprawdzianu (?view=test) */
.tc-big-pin-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  background: #ffffff;
  border: 2px solid #2563eb;
  border-radius: 10px;
  padding: 12px 20px;
  min-width: 190px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  cursor: pointer;
  user-select: all;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.tc-big-pin-card:hover {
  background: #f8fafc;
  border-color: #1d4ed8;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.14);
}
.tc-big-pin-card .pin-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  margin-bottom: 2px;
  user-select: none;
}
.tc-big-pin-card .pin-val {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.tc-big-pin-card .pin-copy-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: #2563eb;
  margin-top: 3px;
  user-select: none;
}
.tc-big-pin-card .pin-copy-hint.is-copied {
  color: #15803d;
  font-weight: 700;
}

/* Tytuł sprawdzianu */
.tc-title {
  margin: 0 0 8px 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tc-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s;
}
.tc-title a:hover {
  color: #2563eb;
}

/* Metadane sprawdzianu */
.tc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 14px;
}
.tc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tc-meta-dot {
  color: #cbd5e1;
  font-weight: bold;
}
.tc-meta .tc-owner {
  color: #475569;
  font-weight: 500;
}

/* Sekcja statystyk i metryk */
.tc-stats-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.tc-stat-main {
  display: flex;
  flex-direction: column;
}
.tc-stat-count {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}
.tc-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.tc-stat-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tc-badge-live, .tc-badge-grading, .tc-badge-locked, .tc-badge-idle {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tc-badge-live {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.tc-badge-live .live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulseLive 1.8s infinite;
}
@keyframes pulseLive {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.tc-badge-grading {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.tc-badge-locked {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.tc-badge-idle {
  color: #94a3b8;
  font-size: 0.75rem;
  font-style: italic;
}

/* Stopka kafelka z przyciskami akcji */
.tc-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.tc-primary-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.btn-tc-results {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1e3a8a;
  color: #ffffff !important;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(30, 58, 138, 0.15);
  transition: all 0.15s ease;
}
.btn-tc-results:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25);
  transform: translateY(-1px);
}
.btn-tc-results .btn-arrow {
  transition: transform 0.15s;
}
.btn-tc-results:hover .btn-arrow {
  transform: translateX(3px);
}

.btn-tc-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4f46e5;
  color: #ffffff !important;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.15);
  transition: all 0.15s ease;
}
.btn-tc-test:hover {
  background: #4338ca;
  box-shadow: 0 4px 10px rgba(67, 56, 202, 0.25);
  transform: translateY(-1px);
}

.tc-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.tc-toolbar .inline {
  display: flex;
  margin: 0;
  width: 100%;
}
.btn-tc-tool {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #f8fafc;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 6px 4px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-tc-tool:hover {
  background: #f1f5f9;
  color: #0f172a !important;
  border-color: #cbd5e1;
}
.btn-tc-tool.is-open-action {
  color: #15803d !important;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.btn-tc-tool.is-open-action:hover {
  background: #dcfce7;
  border-color: #86efac;
}
.btn-tc-tool.is-del-action {
  color: #b91c1c !important;
  background: #fef2f2;
  border-color: #fecaca;
}
.btn-tc-tool.is-del-action:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.code {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 3px 11px;
  background: #e2e8f0;
  color: #334155;
  white-space: nowrap;
}
.badge.green { background: #dcfce7; color: #166534; }
.badge.red { background: #fee2e2; color: #991b1b; }
.badge.orange { background: #ffedd5; color: #9a3412; }
.badge.yellow { background: #fef9c3; color: #854d0e; }
.badge.blue { background: #dbeafe; color: #1e40af; }
.badge.grey { background: #f1f5f9; color: #64748b; }
.badge.purple { background: #f3e8ff; color: #6b21a8; }
.badge.qual-inf02 { background: #dbeafe; color: #1e40af; font-weight: 800; }
.badge.qual-inf03 { background: #f3e8ff; color: #6b21a8; font-weight: 800; }

.bigcode {
  background: #0f172a;
  color: #ffffff;
  border-radius: 16px;
  padding: 12px 24px;
  font: 800 2.2rem/1.1 'JetBrains Mono', ui-monospace, Consolas, monospace;
  letter-spacing: 0.14em;
  text-align: center;
}
.bigcode span {
  display: block;
  font: 700 0.72rem 'Plus Jakarta Sans', system-ui;
  letter-spacing: 0.12em;
  color: #93c5fd;
  margin-bottom: 2px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.stats div {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
}
.stats b {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
}
.stats span {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th, td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
th {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: #f8fafc;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafc; }

table.monitor tr.st-locked { background: #fef2f2 !important; }
table.monitor tr.away { background: #fff7ed !important; }
table.monitor td.note { font-size: 0.82rem; color: #7c2d12; max-width: 280px; }
table.monitor td.acts { white-space: nowrap; vertical-align: middle; }
table.monitor td.acts > * { margin: 0 6px 0 0; vertical-align: middle; }
table.monitor td.acts button.small { height: 32px; padding: 0 12px; font-size: 0.82rem; }
table.monitor progress { width: 85px; vertical-align: middle; height: 8px; border-radius: 99px; }

.leaves {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  border-radius: 8px;
  padding: 3px 9px;
  background: #f1f5f9;
}
.leaves.l1 { background: #fef9c3; color: #854d0e; }
.leaves.l2, .leaves.l3 { background: #fee2e2; color: #991b1b; }

table.matrix td, table.matrix th { text-align: center; padding: 7px 10px; }
table.matrix td.zero { color: #cbd5e1; }
table.rules { width: 100%; border-collapse: collapse; }
table.rules th {
  padding: 10px 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
}
table.rules td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.rules select, table.rules input { margin: 0; }
table.rules select {
  font-size: 0.88rem;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
}
table.rules .rule-cat-sel { min-width: 150px; }
table.rules .rule-topic-sel { min-width: 220px; max-width: 320px; font-weight: 500; }
table.rules .rule-diff-sel { min-width: 110px; }
table.rules .rule-type-sel { min-width: 150px; }
table.rules .rule-media-sel { min-width: 150px; }
table.rules input.num { width: 65px !important; text-align: center; font-weight: 700; padding: 7px 6px; }
td.avail { font-weight: 800; text-align: center; }
.presets {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}
.matrixbox summary { cursor: pointer; margin: 10px 0; font-weight: 600; }
tr.off { opacity: 0.55; }
.notebox {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.92rem;
  white-space: normal;
  margin: 14px 0;
}
.scorebox {
  font-size: 2.6rem;
  font-weight: 900;
}
.scorebox small {
  font-size: 1.1rem;
  color: var(--muted);
}
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}
.timeline li {
  padding: 8px 0 8px 14px;
  border-left: 3px solid var(--line);
  position: relative;
}
.timeline li span {
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  margin-right: 8px;
  font-size: 0.85rem;
}
.timeline li.counted {
  border-left-color: var(--red);
  background: #fef2f2;
  border-radius: 0 8px 8px 0;
  padding-left: 10px;
}
.timeline li.ignored { color: var(--muted); }
.timeline li em {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  margin-top: 2px;
}

/* ---------- Baza Pytań ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.filters input, .filters select { width: auto; margin: 0; }
.filters .grow { flex: 1; min-width: 240px; }
.filters label.check { margin: 0; }
.bulkbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.bulkbar select { width: auto; margin: 0; }
.bulkbar label { margin: 0; }

.qlist { display: grid; gap: 8px; }
.qrow {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 18px;
  transition: all 0.15s ease;
}
.qrow:hover {
  border-color: #cbd5e1;
}
.qrow.off { opacity: 0.55; }
.qmain { flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.qmain:hover { text-decoration: none; }
.qtext { display: block; margin-top: 4px; font-weight: 500; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  background: #f1f5f9;
  color: #475569;
}
.tag.cat { background: #0f172a; color: #ffffff; }
.tag.d1 { background: #dcfce7; color: #166534; }
.tag.d2 { background: #fef9c3; color: #854d0e; }
.tag.d3 { background: #fee2e2; color: #991b1b; }
.tag.ok { background: #ecfdf5; color: #047857; }
.tag.todo { background: #fff7ed; color: #c2410c; }
.tag.priv { background: #ede9fe; color: #5b21b6; }
.tag.qual-inf02 { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; font-weight: 800; }
.tag.qual-inf03 { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; font-weight: 800; }
.tag.tag-video { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.tag.tag-image { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.tag.tag-pts { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-weight: 600; font-variant-numeric: tabular-nums; }
.qstat { white-space: nowrap; font-size: 0.85rem; color: var(--muted); }

.pager {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 22px 0;
}
.pager a, .pager span {
  padding: 7px 13px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.pager a.on {
  background: var(--pri);
  color: #ffffff;
  border-color: var(--pri);
}

.optrow { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.optrow input[name^="opt["] { margin: 0; }
.optrow .ok { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.optrow .ok span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f1f5f9;
  font-weight: 800;
}
.optrow .ok:has(input:checked) span { background: var(--green); color: #fff; }
.hint { background: var(--pri-soft); border-radius: 10px; padding: 10px 14px; font-size: 0.9rem; }
.mediaprev { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.mediaprev .qmedia { max-width: 440px; flex: 1; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.preview { opacity: 0.95; }
.okbox { border-color: #a7f3d0; }
.warnbox { border-color: #fed7aa; }
/* ---------- Box kodu wglądu w test po zakończeniu ---------- */
.result-final-card {
  text-align: center;
}
.review-code-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px;
  padding: 24px 20px;
  margin: 24px 0;
  text-align: center;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.review-code-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1d4ed8 !important;
  margin-bottom: 8px;
}
.review-code-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.review-code-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: #0f172a !important;
  background: #eff6ff !important;
  padding: 6px 18px;
  border-radius: 10px;
  border: 2px dashed #2563eb !important;
  text-shadow: none !important;
}
.btn-copy-code {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-copy-code:hover {
  background: #1d4ed8 !important;
}
.btn-copy-code.copied {
  background: #059669 !important;
}
.review-code-help {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #334155 !important;
  max-width: 440px;
  margin: 0 auto;
}
.review-code-help strong {
  color: #0f172a !important;
}

/* Formularz wysyłki kodu na e-mail */
.review-email-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}
.email-box-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.email-box-head svg {
  color: #2563eb;
  flex-shrink: 0;
  margin-top: 2px;
}
.email-box-head h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: #0f172a;
}
.email-box-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
}
.review-email-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.review-email-input {
  margin: 0 !important;
  flex: 1;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}
.review-email-btn {
  padding: 10px 18px !important;
  white-space: nowrap;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
}
.email-already-sent {
  margin-top: 10px;
  padding: 8px 12px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  color: #047857;
  font-size: 0.82rem;
}
.review-later-actions {
  margin-top: 24px;
}
.review-open-btn {
  font-weight: 700 !important;
  padding: 13px 20px !important;
}

/* Strona główna: kafel sprawdzenia testu */
.review-entry-card {
  margin-top: 16px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
}
.review-entry-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.review-entry-icon {
  font-size: 1.4rem;
}
.review-entry-header h3 {
  margin: 0 0 2px 0;
  font-size: 0.98rem;
  color: #0f172a;
}
.review-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.review-code-inp {
  margin: 0 !important;
  flex: 1;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 1px;
}
.review-go-btn {
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* Widok wglądu (view_review) */
.review-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.review-pending-notice {
  text-align: center;
  padding: 36px 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  margin-top: 20px;
}
.review-pending-notice h3 {
  margin: 12px 0 8px 0;
  color: #1e293b;
}
.review-pending-notice p {
  max-width: 540px;
  margin: 0 auto 12px;
  color: #475569;
  line-height: 1.5;
}
.scorebox-pct {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 700;
  margin-top: 4px;
}

/* ---------- Potwierdzenie suwakiem ---------- */
.bot-shield {
  background: transparent;
  border: none;
  padding: 0;
  margin: 12px 0 16px;
  box-shadow: none;
}
.bot-shield.is-verified {
  background: transparent;
}
.bot-slider {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.bot-slider-track {
  position: relative;
  height: 40px;
  background: #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bot-slider.verified .bot-slider-track {
  background: #dcfce7;
  border-color: #86efac;
  cursor: default;
}
.bot-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #dbeafe;
  border-radius: 7px;
  transition: width 0.05s ease;
}
.bot-slider.verified .bot-slider-fill {
  width: 100% !important;
  background: #dcfce7;
  transition: width 0.2s ease;
}
.bot-slider-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  pointer-events: none;
  padding: 0 44px;
  text-align: center;
  z-index: 2;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.bot-slider.verified .bot-slider-label {
  color: #166534;
  font-weight: 700;
}
.bot-slider-thumb {
  position: absolute;
  left: 2px;
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  cursor: grab;
  z-index: 3;
  transition: transform 0.05s ease, background 0.2s ease, color 0.2s ease;
}
.bot-slider-thumb:active {
  cursor: grabbing;
}
.bot-slider.verified .bot-slider-thumb {
  background: #16a34a;
  color: #ffffff;
  cursor: default;
}
.bot-trap {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.form-submit-locked {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(35%) !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

/* Ochrona antyściągowa: blokada zaznaczania i lupy iOS na telefonach */
.mode-exam .question,
.mode-exam .qbody,
.mode-exam .answers,
.mode-exam .qhead {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.mode-exam input[type="text"],
.mode-exam textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Modal Grids */
.modal-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 14px;
}

/* ---------- Responsywność Platformy (Mobile & Tablet) ---------- */
@media (max-width: 1024px) {
  .tests {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 16px;
  }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-media { min-height: 260px; }
  .showcase-content { padding: 26px 24px; }
  .cols, .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  h1 { font-size: 1.80rem; }
  .wrap { padding: 20px 16px 70px; }
  .cke-pagehead {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }
  .tc-big-pin-card {
    align-items: flex-start;
    align-self: flex-start;
  }
  .cke-pagehead-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cke-tests-filter-bar .filter-sep {
    display: none !important;
  }
}

/* Tablet i Mobile Navigation (768px i w dół) */
@media (max-width: 768px) {
  .top-bar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    padding: 8px 14px 10px !important;
  }
  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex: 0 0 auto !important;
  }
  .brand-name {
    font-size: 1.18rem !important;
  }
  .brand-sub {
    font-size: 0.398rem !important;
  }
  .top-nav {
    display: contents !important;
  }
  .teacher-nav-user {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    justify-self: end !important;
    gap: 6px !important;
  }
  .teacher-nav-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 2px !important;
  }
  .teacher-nav-links::-webkit-scrollbar {
    display: none !important;
  }
  .teacher-nav-links a {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
  }
  .public-nav-cta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .public-nav-cta .btn-teacher-zone {
    font-size: 0.78rem !important;
    padding: 5px 9px !important;
    gap: 5px !important;
  }
  .public-nav-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
  .public-nav-links::-webkit-scrollbar {
    display: none !important;
  }
  .public-nav-links a {
    flex-shrink: 0 !important;
    font-size: 0.82rem !important;
    padding: 5px 10px !important;
  }
  .top-user-pill {
    padding: 5px 9px !important;
    font-size: 0.80rem !important;
    gap: 5px !important;
  }
  .top-user-pill .user-role-badge {
    display: none !important;
  }
  .top-user-pill .user-name {
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .top-logout-btn {
    padding: 5px 8px !important;
  }
  .top-logout-lbl {
    display: none !important;
  }
  .admin-quick-test-banner {
    padding: 14px 16px !important;
  }
  .admin-quick-test-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .admin-quick-test-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .admin-quick-test-form label {
    min-width: 100% !important;
  }
  .admin-quick-test-form button {
    width: 100% !important;
  }
  .users-table {
    min-width: 680px !important;
  }
  .admin-exam-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .admin-banner-tools {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .btn-admin-pill {
    padding: 5px 9px !important;
    font-size: 11.5px !important;
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
  .examtop.examtop-practical {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    height: auto !important;
  }
  .examtop-practical .prac-top-main {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .examtop-practical .prac-title-text {
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 0.95rem !important;
  }
  .examtop-practical .prac-who-meta {
    max-width: 100% !important;
  }
  .examtop-practical .prac-top-meters {
    width: 100% !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    margin-top: 4px;
    gap: 6px !important;
  }
  .examtop-practical .btn-sheet-toggle {
    margin-left: auto;
    font-size: 0.76rem !important;
    padding: 4px 8px !important;
  }
  .examtop .who {
    font-size: 0.85rem !important;
  }
  .examtop .meters {
    width: 100%;
    justify-content: space-between;
    margin-top: 6px;
  }
}

/* Smartfony i Małe Ekrany (640px i w dół) */
@media (max-width: 640px) {
  .perks-grid { grid-template-columns: 1fr; }
  .cke-pagehead-actions button,
  .cke-pagehead-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .cke-tests-filter-bar {
    padding: 12px 14px !important;
  }
  .cke-tests-filter-bar > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cke-tests-filter-bar #tests_search_input {
    min-width: 100% !important;
    font-size: 13px !important;
    padding: 9px 32px 9px 36px !important;
  }
  .cke-tests-filter-bar #tests_counter_pill {
    align-self: flex-start !important;
  }
  .filter-tabs {
    gap: 4px !important;
  }
  .filter-tab {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
  .tests {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .testcard,
  .test-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }
  .tc-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tc-badges {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .tc-pin-pill {
    margin-left: auto;
  }
  .tc-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }
  .tc-meta {
    flex-wrap: wrap !important;
    font-size: 0.78rem !important;
    gap: 4px !important;
  }
  .tc-primary-actions {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .btn-tc-results,
  .tc-admin-form,
  .btn-tc-test {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .tc-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .btn-tc-tool {
    flex: 1 1 calc(50% - 6px) !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 7px 8px !important;
  }
  .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .modal-grid-2col,
  .modal-grid-3col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .teacher-modal-backdrop {
    padding: 10px !important;
  }
  .teacher-modal-dialog,
  .cke-modal-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 10px !important;
  }
  .modal-header {
    padding: 14px 16px 10px !important;
  }
  .modal-body {
    padding: 14px 16px !important;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  .modal-footer {
    padding: 12px 16px 16px !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-footer button,
  .modal-footer a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .qgrid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
  }
  .qgrid button {
    height: 36px !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Dopasowanie nakładek ostrzeżeń i blokad do małych ekranów (np. iPhone SE) */
  .overlay {
    padding: 12px !important;
  }
  .ovbox {
    padding: 24px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }
  .ovbox h2 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  .ovbox p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin: 8px 0 !important;
  }
  .ovbox .row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ovbox button,
  .ovbox .button {
    white-space: normal !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
  }
  .ovicon {
    font-size: 2.8rem !important;
    margin-bottom: 8px !important;
  }

  /* Pytania i opcje odpowiedzi na telefonie */
  .question {
    padding: 18px 14px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
  }
  .qhead {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .qbody {
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .answers {
    gap: 8px !important;
  }
  .answers label {
    padding: 12px 14px !important;
    min-height: 48px !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
  }
  .answers label .letter {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
  }
  .examtop {
    padding: 10px 14px !important;
    margin: 0 -12px 16px !important;
  }
  .examtop .who {
    font-size: 0.88rem !important;
  }
  .timer {
    font-size: 1rem !important;
    padding: 4px 10px !important;
  }
  .qgrid button {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }
  .review-input-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .review-go-btn {
    width: 100% !important;
  }
}
@media print {
  /* Całkowita blokada drukowania i zrzutów do PDF w trakcie egzaminu */
  body.mode-exam #examForm,
  body.mode-exam main,
  body.mode-exam .card.question,
  body.mode-exam .examtop,
  body.mode-exam .qgrid {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  body.mode-exam::before {
    content: "ZRZUT EKRANU I DRUKOWANIE ZOSTAŁY ZABLOKOWANE!";
    display: block !important;
    font-size: 24pt !important;
    font-weight: 800 !important;
    color: #dc2626 !important;
    text-align: center !important;
    margin-top: 100px !important;
    font-family: sans-serif !important;
  }
  .top, .examtop, .qgrid, .overlay, .foot { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ===== KWALIFIKACJE I DZIAŁY - PANEL ADMINISTRATORA ===== */
.admin-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.card-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.card-head-row h2 {
  font-size: 1.35rem;
  margin: 0 0 4px;
  color: var(--text);
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 12px;
}
.cat-table, .qual-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.cat-table th, .qual-table th {
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
}
.cat-table td, .qual-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cat-table tr:hover td, .qual-table tr:hover td {
  background: #f8fafc;
}
.cat-table tr.off td, .qual-table tr.off td {
  opacity: 0.6;
}
.code-inp-field {
  width: 85px !important;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.88rem !important;
  text-transform: uppercase;
  padding: 8px 6px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
}
.name-inp-field {
  width: 100% !important;
  min-width: 180px;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  font-size: 0.92rem !important;
  background: #ffffff !important;
}
.desc-inp-field {
  width: 100% !important;
  min-width: 130px;
  max-width: 220px;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  font-size: 0.88rem !important;
  background: #ffffff !important;
  color: var(--muted);
}
.qual-sel {
  width: 100% !important;
  min-width: 130px;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  font-size: 0.88rem !important;
  background: #ffffff !important;
}
.mini-sort {
  width: 55px !important;
  text-align: center;
  padding: 8px 6px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  font-weight: 600;
  background: #ffffff !important;
}
.count-tag {
  font-size: 0.85rem;
  color: var(--muted);
  margin-right: 6px;
  white-space: nowrap;
}
.count-tag b {
  color: var(--text);
}
.status-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.status-pill.active {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.status-pill.hidden {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.box-add {
  margin-top: 26px;
  padding: 22px 24px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.box-add h3 {
  font-size: 1.05rem;
  margin: 0 0 16px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.box-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  gap: 14px;
  align-items: flex-end;
}
.box-add-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.box-add-grid input, .box-add-grid select {
  width: 100%;
  height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  font-size: 0.9rem !important;
}
.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.filter-tab {
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-tab.active, .filter-tab:hover {
  background: var(--pri);
  color: #ffffff;
  border-color: var(--pri);
}

/* Kwalifikacje tagi */
.tag.qual-badge, .badge.qual-badge {
  font-weight: 800;
  letter-spacing: 0.4px;
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}
.tag.qual-inf02, .badge.qual-inf02 { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; font-weight: 800; }
.tag.qual-inf03, .badge.qual-inf03 { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; font-weight: 800; }
.tag.qual-inf04, .badge.qual-inf04 { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; font-weight: 800; }
.tag.qual-elm03, .badge.qual-elm03 { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; font-weight: 800; }
.tag.qual-ee08,  .badge.qual-ee08  { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; font-weight: 800; }
.tag.qual-ee09,  .badge.qual-ee09  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-weight: 800; }

/* Nagłówki grup i podział wizualny kwalifikacji / działów */
.group-header-row td {
  padding: 12px 14px !important;
  font-weight: 700;
  border-top: 2px solid var(--line) !important;
  border-bottom: 1.5px solid var(--line) !important;
}
.group-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-header-content .group-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* Wyróżnienia kolorystyczne nagłówków grup */
.group-header-row.qual-grp-inf02 td,
.group-header-row.cat-grp-inf02 td {
  background: #eff6ff !important;
  border-left: 5px solid #2563eb !important;
}
.group-header-row.qual-grp-inf03 td,
.group-header-row.cat-grp-inf03 td {
  background: #faf5ff !important;
  border-left: 5px solid #7c3aed !important;
}
.group-header-row.qual-grp-inf04 td,
.group-header-row.cat-grp-inf04 td {
  background: #f0fdf4 !important;
  border-left: 5px solid #059669 !important;
}

/* Różne kolory tła wierszy dla poszczególnych kwalifikacji (1,2,3 wyraźnie oddzielone) */
.row-qual-inf02 td {
  background-color: #f8fbff;
}
.row-qual-inf02 td:first-child {
  border-left: 4px solid #3b82f6 !important;
}
.row-qual-inf02:hover td {
  background-color: #eff6ff !important;
}
.row-qual-inf02 .mini-sort {
  border-color: #bfdbfe !important;
  color: #1e40af;
  background-color: #ffffff !important;
}

.row-qual-inf03 td {
  background-color: #fdfaff;
}
.row-qual-inf03 td:first-child {
  border-left: 4px solid #8b5cf6 !important;
}
.row-qual-inf03:hover td {
  background-color: #f5eeff !important;
}
.row-qual-inf03 .mini-sort {
  border-color: #ddd6fe !important;
  color: #5b21b6;
  background-color: #ffffff !important;
}

.row-qual-inf04 td {
  background-color: #f6fdf8;
}
.row-qual-inf04 td:first-child {
  border-left: 4px solid #10b981 !important;
}
.row-qual-inf04:hover td {
  background-color: #e6f9ed !important;
}
.row-qual-inf04 .mini-sort {
  border-color: #a7f3d0 !important;
  color: #065f46;
  background-color: #ffffff !important;
}

.group-header-row td {
  background: #f8fafc;
  border-left: 5px solid #64748b;
}
.qual-table tbody tr:not(.group-header-row) td:first-child {
  border-left: 4px solid var(--line);
}

/* =====================================================================
   STRUKTURA PROGRAMOWA: PRZEŁĄCZANIE ZAKŁADEK (Kwalifikacje / Działy / Tematy)
   ===================================================================== */
.struct-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.struct-tab-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.struct-tab-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.struct-tab-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}
.struct-grid {
  display: block;
}
.struct-tab-pane {
  display: none;
}
.struct-tab-pane.active {
  display: block;
  animation: fadeInTab 0.15s ease;
}
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   INTERAKTYWNY TERMINAL / KONSOLA POLECEŃ (CLI / BASH / CMD / SQL / POWERSHELL)
   ========================================================================== */
.terminal-card {
  margin: 1.25rem 0 1rem;
  background: #0b0f17;
  border: 1px solid #1e293b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.45), 0 4px 12px -2px rgba(0, 0, 0, 0.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.terminal-card:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 14px 32px -4px rgba(0, 0, 0, 0.55);
}

/* Pasek tytułowy okna terminala */
.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.1rem;
  background: #151b26;
  border-bottom: 1px solid #1e293b;
  user-select: none;
}
.terminal-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.terminal-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.dot-red { background: #ff5f56; box-shadow: 0 0 4px rgba(255, 95, 86, 0.4); }
.dot-yellow { background: #ffbd2e; box-shadow: 0 0 4px rgba(255, 189, 46, 0.4); }
.dot-green { background: #27c93f; box-shadow: 0 0 4px rgba(39, 201, 63, 0.4); }

.terminal-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.02em;
}
.terminal-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.06em;
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
}

/* Warianty badge dla technologii */
.terminal-ubuntu .terminal-badge { background: rgba(233, 84, 32, 0.2); color: #ff7849; border-color: rgba(233, 84, 32, 0.45); }
.terminal-cisco .terminal-badge { background: rgba(2, 136, 209, 0.2); color: #38bdf8; border-color: rgba(2, 136, 209, 0.45); }
.terminal-linux .terminal-badge { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.35); }
.terminal-windows .terminal-badge { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-color: rgba(59, 130, 246, 0.35); }
.terminal-sql .terminal-badge { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }
.terminal-powershell .terminal-badge { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border-color: rgba(14, 165, 233, 0.35); }
.terminal-cli .terminal-badge { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.35); }

/* Wnętrze terminala */
.terminal-body {
  padding: 1.1rem 1.25rem;
  background: #080c13;
  color: #f1f5f9;
  font-size: 0.96rem;
  line-height: 1.6;
  min-height: 125px;
  cursor: text;
  outline: none;
}
.terminal-banner {
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  color: #64748b;
  border-bottom: 1px dashed #1e293b;
  padding-bottom: 0.55rem;
  user-select: none;
}

/* Historia poleceń */
.terminal-history {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  max-height: 240px;
  overflow-y: auto;
}
.terminal-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.94rem;
  word-break: break-all;
}
.terminal-cmd-echo {
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.terminal-tag-saved {
  font-size: 0.68rem;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 6px;
  font-family: inherit;
  font-weight: 600;
}

/* Aktywny prompt i linia wpisywania */
.terminal-prompt-line {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 0.35rem;
  position: relative;
  flex-wrap: nowrap;
}
.terminal-card label.terminal-prompt,
.terminal-card .terminal-prompt {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
  font-size: 0.94rem;
  cursor: pointer;
  line-height: 1.5;
  padding: 0 4px 0 0 !important;
  flex-shrink: 0;
}
.prompt-ubuntu { color: #ff7849 !important; }
.prompt-cisco { color: #38bdf8 !important; }
.prompt-linux { color: #4ade80 !important; }
.prompt-cmd, .prompt-windows { color: #facc15 !important; }
.prompt-sql { color: #fbbf24 !important; }
.prompt-ps { color: #60a5fa !important; }
.prompt-cli { color: #c084fc !important; }

.terminal-card input.terminal-input,
.terminal-card .terminal-input {
  display: inline-block !important;
  width: auto !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  padding: 2px 4px !important;
  box-shadow: none !important;
  caret-color: #38bdf8 !important;
  min-width: 140px !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.terminal-card input.terminal-input:focus,
.terminal-card .terminal-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.terminal-card .terminal-input::placeholder {
  color: #475569;
  font-style: italic;
  font-size: 0.88rem;
}

.terminal-prompt-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Przyciski w wierszu promptu */
.terminal-btn-exec {
  background: #1e3a8a;
  color: #bfdbfe;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.terminal-btn-exec:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #60a5fa;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.terminal-btn-exec:active {
  transform: translateY(0);
}

.terminal-btn-clear {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.terminal-btn-clear:hover {
  background: #334155;
  color: #f1f5f9;
}

/* Stopka terminala z podpowiedziami */
.terminal-footer-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 0.5rem 1.1rem;
  background: #111722;
  border-top: 1px solid #1e293b;
  font-size: 0.73rem;
  color: #94a3b8;
  user-select: none;
}
.terminal-footer-hints code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.71rem;
  border: 1px solid #334155;
}

/* Terminal w omówieniu / wglądzie */
.terminal-review-wrap {
  margin: 0.85rem 0;
}
.terminal-review {
  margin: 0;
}
.terminal-review .terminal-body {
  min-height: auto;
  padding: 0.85rem 1.1rem;
}

/* =====================================================================
   WIRTUALNA MASZYNA EGZAMINACYJNA / LABORATORIUM CLI (VM LAB)
   ===================================================================== */
.vm-lab-card {
  margin: 1.25rem 0 1.5rem;
  background: #090d16;
  border: 1.5px solid #1e293b;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
}

/* Pasek górny maszyny wirtualnej (Telemetria i akcje) */
.vm-lab-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0.65rem 1.1rem;
  background: #0f172a;
  border-bottom: 1.5px solid #1e293b;
}
.vm-lab-branding {
  display: flex;
  align-items: center;
  gap: 9px;
}
.vm-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.vm-indicator-dot.online {
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  animation: vmPulse 2s infinite ease-in-out;
}
@keyframes vmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.9); }
}
.vm-lab-title {
  font-size: 0.82rem;
  color: #f1f5f9;
  letter-spacing: 0.02em;
}
.vm-lab-title b {
  color: #38bdf8;
  font-weight: 700;
}
.vm-badge-os,
.vm-badge-student {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.vm-badge-os {
  background: rgba(233, 84, 32, 0.16);
  color: #ff8a65;
  border: 1px solid rgba(233, 84, 32, 0.35);
}
.vm-badge-os b {
  color: #ffab91;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
}
.vm-badge-student {
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.32);
}
.vm-badge-student b {
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
}

.vm-lab-telemetry {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vm-pill {
  font-size: 0.72rem;
  color: #94a3b8;
  background: #1e293b;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #334155;
}
.vm-user-pill b {
  color: #38bdf8;
}

.vm-lab-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.btn-vm-shot,
.btn-vm-fullscreen,
.btn-vm-split,
.btn-vm-restart {
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  user-select: none;
}
.btn-vm-fullscreen:hover,
.btn-vm-split:hover,
.btn-vm-restart:hover {
  background: #334155;
  border-color: #38bdf8;
  color: #ffffff;
}
.btn-vm-fullscreen.active,
.btn-vm-split.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}
.btn-vm-verify {
  background: #16a34a;
  color: #ffffff;
  border: 1px solid #22c55e;
  border-radius: 6px;
  padding: 0.38rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-vm-verify:hover {
  background: #15803d;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
  transform: translateY(-1px);
}

/* Panel kryteriów zaliczenia (Checklist) */
.vm-checklist-wrap {
  background: #0d131f;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #1e293b;
}
.vm-checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.vm-checklist-title {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.vm-checklist-progress {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #1e293b;
  color: #38bdf8;
  border: 1px solid #334155;
}
.vm-checklist-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 768px) {
  .vm-checklist-items {
    grid-template-columns: 1fr 1fr;
  }
}
.vm-crit-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0.4rem 0.65rem;
  background: #080c14;
  border: 1px solid #1e293b;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #94a3b8;
  transition: all 0.2s ease;
}
.vm-crit-status {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: #1e293b;
  color: #64748b;
  flex-shrink: 0;
}
.vm-crit-label {
  flex: 1 1 auto;
}
.vm-crit-pts {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

.vm-crit-item.passed {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  color: #f1f5f9;
}
.vm-crit-item.passed .vm-crit-status {
  background: #22c55e;
  color: #ffffff;
}
.vm-crit-item.passed .vm-crit-pts {
  color: #4ade80;
}
.vm-crit-item.failed {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
}
.vm-crit-item.failed .vm-crit-status {
  background: #ef4444;
  color: #ffffff;
}

/* Ekran konsoli terminala VM */
.vm-terminal-screen {
  background: #05080f;
  padding: 0.9rem 1.1rem;
}
.vm-terminal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.73rem;
  color: #64748b;
  border-bottom: 1px dashed #1e293b;
  padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
}
.vm-banner-help code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1px 5px;
  border-radius: 3px;
}

.vm-terminal-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}
.vm-log-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vm-log-cmd {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.vm-prompt-str {
  color: #ff7849;
  font-weight: 700;
}
.vm-prompt-str.root {
  color: #ef4444;
}
.vm-cmd-text {
  color: #ffffff;
  font-weight: 600;
}
.vm-log-out {
  margin: 2px 0 4px;
  font-family: inherit;
  font-size: 0.82rem;
  color: #cbd5e1;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.45;
}

/* Wiersz wpisywania komendy VM */
.vm-prompt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d131f;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
}
.vm-prompt-label {
  color: #ff7849;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}
.vm-prompt-label.root {
  color: #ef4444;
}
.vm-input {
  flex: 1 1 auto;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  padding: 0 !important;
  margin: 0 !important;
}
.btn-vm-exec {
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #3b82f6;
  border-radius: 5px;
  padding: 0.3rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-vm-exec:hover {
  background: #1d4ed8;
}

/* Wgląd w test w trybie omówienia */
.vm-review-box {
  margin: 0.85rem 0;
  background: #090d16;
  border: 1.5px solid #1e293b;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: #f1f5f9;
}
.vm-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.vm-review-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #38bdf8;
  margin: 0;
  letter-spacing: 0.02em;
}
.vm-review-score {
  font-size: 0.82rem;
  color: #10b981;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 6px;
}
.vm-history-review {
  margin-top: 1rem;
  border-top: 1px dashed #1e293b;
  padding-top: 0.75rem;
}
.vm-history-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 0.5rem;
  display: block;
}
.review-terminal {
  border-radius: 8px;
  border: 1px solid #1e293b;
}





/* ==========================================================================
   ROZRÓŻNIENIE: TEORIA (Pisemna CKE) vs PRAKTYKA (Maszyna weryfikująca)
   ========================================================================== */

.tag.tag-practice, .badge.tag-practice {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1px solid #1e293b !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.tag.tag-theory, .badge.tag-theory {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
}

.tag.tag-mixed, .badge.tag-mixed {
  background: #faf5ff !important;
  color: #7e22ce !important;
  border: 1px solid #e9d5ff !important;
  font-weight: 700 !important;
}

/* Badge części w nagłówku pytania */
.qpart-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 6px;
}
.qpart-badge.part-prac {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid #1e293b;
}
.qpart-badge.part-theo {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Baner informacyjny na karcie zasad */
.exam-part-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 16px 0 20px 0;
  line-height: 1.45;
}
.exam-part-banner .part-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.exam-part-banner strong {
  display: block;
  font-size: 0.96rem;
  margin-bottom: 4px;
}
.exam-part-banner p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}
.exam-part-banner.banner-practice {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  border: 1px solid #334155;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}
.exam-part-banner.banner-practice strong {
  color: #38bdf8;
}
.exam-part-banner.banner-theory {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  color: #1e293b;
  border: 1px solid #bfdbfe;
}
.exam-part-banner.banner-theory strong {
  color: #1d4ed8;
}
.exam-part-banner.banner-mixed {
  background: linear-gradient(135deg, #faf5ff 0%, #f0fdfa 100%);
  color: #1e293b;
  border: 1px solid #e9d5ff;
}
.exam-part-banner.banner-mixed strong {
  color: #7e22ce;
}

/* Boks rozbicia cząstkowego wyników (teoria vs praktyka maszynowa) */
.exam-split-breakdown {
  margin: 22px 0;
  padding: 18px 20px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.split-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px 0;
  letter-spacing: -0.2px;
}
.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.split-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.split-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}
.split-card.is-pass {
  border-color: #86efac;
  background: linear-gradient(to bottom, #ffffff, #f0fdf4);
}
.split-card.is-fail {
  border-color: #fca5a5;
  background: linear-gradient(to bottom, #ffffff, #fef2f2);
}
.split-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.split-head .split-icon {
  font-size: 1.4rem;
}
.split-head strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text);
}
.split-head small {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}
.split-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dashed #e2e8f0;
  padding-top: 10px;
}
.split-pts {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.split-pct {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}

/* ==========================================================================
   Autentyczny Arkusz Praktyczny CKE i Karta Oceny (Zasady Oceniania)
   ========================================================================== */
.cke-sheet-container {
  background: #ffffff;
  border: 2px solid #0f172a;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.cke-sheet-header {
  background: #0f172a;
  color: #f8fafc;
  padding: 16px 20px;
  border-bottom: 3px solid #2563eb;
}
.cke-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
.cke-header-emblem {
  font-size: 1rem;
}
.cke-header-qual {
  background: #2563eb;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 800;
}
.cke-header-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 8px;
}
.cke-header-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: #cbd5e1;
}
.cke-header-meta span {
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
}
.cke-header-meta b {
  color: #38bdf8;
}

.cke-tab-nav {
  display: flex;
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
}
.cke-tab-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cke-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.cke-tab-btn.active {
  background: #ffffff;
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.cke-tab-content {
  padding: 24px;
}
.cke-tab-panel {
  display: none;
}
.cke-tab-panel.active {
  display: block;
}

.cke-instruction-callout {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: #92400e;
}
.cke-instruction-callout strong {
  display: block;
  font-size: 0.94rem;
  margin-bottom: 4px;
  color: #78350f;
}

.cke-section-h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 6px;
  margin: 22px 0 12px;
}

.cke-rubric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin: 16px 0;
}
.cke-rubric-table th, .cke-rubric-table td {
  border: 1px solid #cbd5e1;
  padding: 10px 12px;
  text-align: left;
}
.cke-rubric-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}
.cke-rubric-section-row td {
  background: #f1f5f9;
  font-weight: 800;
  color: #1e293b;
  font-size: 0.92rem;
  border-left: 4px solid #2563eb;
}
.cke-rubric-table td.code-cell {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.82rem;
  color: #0f172a;
  background: #f8fafc;
}
.cke-rubric-pts {
  text-align: center;
  font-weight: 800;
  color: #059669;
  white-space: nowrap;
}

/* ==========================================================================
   STANOWISKO EGZAMINACYJNE CKE: STUDIO NAWIGACJI (EDYTOR, BROWSER, TERMINAL)
   ========================================================================== */

.vm-studio-navbar {
  background: #0b1120;
  border-top: 1px solid #1e293b;
  border-bottom: 2px solid #1e293b;
  padding: 0 8px;
}

.vm-studio-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.vm-studio-tabs::-webkit-scrollbar {
  display: none;
}

.vm-studio-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #94a3b8;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.vm-studio-tab-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
}

.vm-studio-tab-btn.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border-bottom-color: #38bdf8;
}

.vm-tab-icon {
  font-size: 1.05rem;
}

.vm-tab-badge {
  background: #1e293b;
  color: #cbd5e1;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}

.vm-studio-tab-btn.active .vm-tab-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

.vm-browser-live-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  display: inline-block;
  animation: pulse-green 2s infinite ease-in-out;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.vm-studio-panel {
  display: none;
}

.vm-studio-panel.active {
  display: block;
}

/* ==========================================================================
   EDYTOR PLIKÓW I KODU (VS CODE LOOK & FEEL)
   ========================================================================== */

.vm-panel-editor {
  background: #0f172a;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: none;
  flex-direction: column;
}

.vm-panel-editor.active {
  display: flex;
}

.vm-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #090d16;
  border-bottom: 1px solid #1e293b;
  padding: 0 8px;
  gap: 12px;
  min-height: 40px;
  overflow-x: auto;
}

.vm-editor-file-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex: 1 1 auto;
}

.vm-file-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #0b1120;
  border: 1px solid #1e293b;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: #94a3b8;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.vm-file-tab:hover {
  background: #1e293b;
  color: #f1f5f9;
}

.vm-file-tab.active {
  background: #0f172a;
  color: #38bdf8;
  border-top: 2px solid #38bdf8;
  border-bottom: 1px solid #0f172a;
  margin-bottom: -1px;
}

.vm-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-editor-newfile {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-editor-newfile:hover {
  background: #334155;
  color: #ffffff;
}

.btn-editor-save {
  background: #059669;
  border: 1px solid #10b981;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
  transition: all 0.15s ease;
}

.btn-editor-save:hover {
  background: #10b981;
}

.vm-editor-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: #090d16;
  border-bottom: 1px solid #1e293b;
  font-size: 0.74rem;
  color: #94a3b8;
}

.vm-cur-filepath {
  font-family: 'JetBrains Mono', Consolas, monospace;
  color: #cbd5e1;
}

.vm-editor-status {
  font-weight: 600;
  color: #10b981;
}

.vm-editor-status.dirty {
  color: #f59e0b;
}

.vm-editor-workspace {
  display: flex;
  height: 380px;
  background: #05080f;
  position: relative;
  overflow: hidden;
}

.vm-editor-line-numbers {
  width: 48px;
  padding: 10px 8px;
  background: #070c18;
  color: #475569;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: right;
  user-select: none;
  overflow-y: hidden;
  border-right: 1px solid #1e293b;
}

.vm-editor-line-numbers .ln {
  height: 20px;
}

.vm-editor-textarea {
  flex: 1 1 auto;
  height: 100%;
  padding: 10px 14px;
  background: transparent !important;
  color: #f8fafc !important;
  font-family: 'JetBrains Mono', Consolas, 'Fira Code', monospace !important;
  font-size: 0.84rem !important;
  line-height: 20px !important;
  border: none !important;
  outline: none !important;
  resize: none !important;
  white-space: pre !important;
  overflow-wrap: normal !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  tab-size: 2;
  box-shadow: none !important;
}

.vm-editor-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px;
  background: #070c18;
  border-top: 1px solid #1e293b;
  font-size: 0.72rem;
  color: #64748b;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.vm-editor-statusbar b {
  color: #94a3b8;
}

/* ==========================================================================
   PODGLĄD STRONY NA ŻYWO (LIVE BROWSER)
   ========================================================================== */

.vm-panel-browser {
  background: #0f172a;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}

.vm-browser-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0b1120;
  border-bottom: 1px solid #1e293b;
  padding: 8px 12px;
  flex-wrap: wrap;
}

.vm-browser-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot-r { background: #ef4444; }
.dot-y { background: #f59e0b; }
.dot-g { background: #22c55e; }

.vm-browser-nav-btns {
  display: flex;
  gap: 4px;
}

.btn-browser-nav, .btn-browser-reload {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-browser-nav:hover, .btn-browser-reload:hover {
  background: #334155;
}

.btn-browser-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vm-browser-url-bar {
  display: flex;
  align-items: center;
  background: #05080f;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 2px 8px;
  flex: 1 1 240px;
  gap: 6px;
}

.browser-url-prefix {
  font-size: 0.76rem;
  color: #10b981;
  font-weight: 700;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.browser-url-input {
  background: transparent !important;
  border: none !important;
  color: #f1f5f9 !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-size: 0.78rem !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  outline: none !important;
  box-shadow: none !important;
}

.vm-browser-quick-pages {
  display: flex;
  gap: 4px;
}

.btn-quick-page {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-quick-page:hover {
  background: #334155;
  color: #ffffff;
}

.btn-quick-page.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
}

.vm-browser-viewport-modes {
  display: flex;
  gap: 3px;
}

.btn-vp-mode {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-vp-mode:hover {
  color: #ffffff;
}

.btn-vp-mode.active {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
  font-weight: 800;
}

.vm-browser-viewport-wrap {
  background: #1e293b;
  margin: 0 auto;
  transition: max-width 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  min-height: 480px;
}

.vm-browser-iframe {
  width: 100%;
  height: 480px;
  border: none;
  background: #ffffff;
  display: block;
}

/* ==========================================================================
   WIDOK OMÓWIENIA DLA NAUCZYCIELA I UCZNIA (KOD I KARTA OCENY)
   ========================================================================== */

.vm-code-review-wrap {
  margin-top: 1.2rem;
  border-top: 1px dashed #1e293b;
  padding-top: 1rem;
}

.vm-code-review-head {
  margin-bottom: 0.6rem;
}

.vm-code-review-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #38bdf8;
}

.vm-code-review-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vm-code-review-file {
  background: #05080f;
  border: 1px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
}

.vm-code-review-fhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #090d16;
  border-bottom: 1px solid #1e293b;
  padding: 6px 12px;
  font-size: 0.76rem;
  color: #94a3b8;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.vm-code-review-fhead b {
  color: #f1f5f9;
}

.vm-code-review-pre {
  margin: 0;
  padding: 12px;
  max-height: 280px;
  overflow-y: auto;
  background: #05080f;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.teacher-cke-rubric-wrap {
  background: #f8fafc;
  border: 2px solid #2563eb;
  border-radius: 10px;
  margin: 1.2rem 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.teacher-rubric-head {
  background: #2563eb;
  color: #ffffff;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
}

.teacher-rubric-body {
  padding: 16px;
}

/* ==========================================================================
   WIDOK PODZIELONY (SPLIT SCREEN CKE / STUDIO)
   ========================================================================== */

.btn-vm-split {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid #475569;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-vm-split:hover {
  background: #475569;
  color: #38bdf8;
  border-color: #38bdf8;
}

/* ==========================================================================
   WIDOK PODZIELONY (SPLIT VIEW · ARKUSZ CKE + PRACOWNIA SIDE-BY-SIDE)
   ========================================================================== */
.btn-vm-split.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.card.question.vm-split-screen {
  display: grid !important;
  grid-template-columns: minmax(380px, 36%) 1fr !important;
  grid-template-areas:
    "head head"
    "body studio"
    "nav nav" !important;
  gap: 16px !important;
  align-items: stretch !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.card.question.vm-split-screen .qhead {
  grid-area: head !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

/* W widoku podzielonym przycisk zwijania treści arkusza jest ukryty - opis zawsze widoczny */
.card.question.vm-split-screen .btn-sheet-toggle {
  display: none !important;
}

/* Arkusz CKE w widoku podzielonym NIGDY nie może się chować */
.card.question.vm-split-screen .prac-sheet-drawer {
  grid-area: body !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 135px) !important;
  height: calc(100vh - 135px) !important;
  min-height: 560px !important;
  overflow-y: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transition: none !important;
}

.card.question.vm-split-screen .prac-sheet-drawer .qbody,
.card.question.vm-split-screen .prac-sheet-drawer .prac-sheet-body {
  padding: 22px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-height: none !important;
  position: static !important;
  overflow-y: visible !important;
}

/* Wirtualne środowisko egzaminacyjne idealnie spasowane z prawą krawędzią ekranu */
.card.question.vm-split-screen .vm-lab-card {
  grid-area: studio !important;
  max-height: calc(100vh - 135px) !important;
  height: calc(100vh - 135px) !important;
  min-height: 560px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 12px !important;
}

.card.question.vm-split-screen .admin-q-inspector {
  grid-column: 1 / -1 !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
}

.card.question.vm-split-screen .qnav {
  grid-area: nav !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 6px !important;
}

@media (max-width: 1100px) {
  .card.question.vm-split-screen {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .card.question.vm-split-screen .prac-sheet-drawer {
    max-height: 500px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }
  .card.question.vm-split-screen .vm-lab-card {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ==========================================================================
   TRYB PEŁNOEKRANOWY WORKSTATION (FULLSCREEN LAB ACTIVE)
   ========================================================================== */

.vm-lab-card.vm-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #090d16 !important;
}

.vm-lab-card.vm-fullscreen-active .netlab-canvas-container,
.vm-lab-card.vm-fullscreen-active .vm-editor-container,
.vm-lab-card.vm-fullscreen-active .vm-pma-body,
.vm-lab-card.vm-fullscreen-active .vm-terminal-screen,
.vm-lab-card.vm-fullscreen-active .vm-browser-viewport-wrap {
  height: calc(100vh - 130px) !important;
  max-height: none !important;
}

/* ==========================================================================
   EDYTOR PLIKÓW - DRZEWO PLIKÓW I UKŁAD
   ========================================================================== */

.vm-editor-container {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: #0f172a;
  min-height: 640px;
  height: calc(100vh - 280px);
  max-height: 860px;
}

.vm-editor-sidebar {
  background: #090d16;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.vm-sidebar-head {
  padding: 10px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #1e293b;
  text-transform: uppercase;
}

.vm-file-tree {
  padding: 6px 0;
}

.vm-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.78rem;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.vm-tree-item:hover {
  background: #1e293b;
  color: #f1f5f9;
}

.vm-tree-item.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-weight: 700;
  border-left: 3px solid #38bdf8;
}

.vm-editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ==========================================================================
   phpMyAdmin (MySQL DATABASE STUDIO)
   ========================================================================== */

.vm-panel-pma {
  background: #f8fafc;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: none;
  flex-direction: column;
  color: #0f172a;
}

.vm-panel-pma.active {
  display: flex;
}

.vm-pma-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-bottom: 2px solid #e2e8f0;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.vm-pma-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pma-brand {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.pma-accent {
  color: #ea580c;
}

.pma-ver {
  font-size: 0.72rem;
  background: #ffedd5;
  color: #c2410c;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.vm-pma-conn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #475569;
}

.vm-pma-subnav {
  display: flex;
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  padding: 0 12px;
  gap: 4px;
  overflow-x: auto;
}

.btn-pma-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-pma-tab:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

.btn-pma-tab.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
  background: #ffffff;
}

.vm-pma-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 640px;
  height: calc(100vh - 280px);
  max-height: 860px;
  background: #ffffff;
}

.vm-pma-sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 14px;
  overflow-y: auto;
  height: 100%;
}

.pma-db-tree-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
}

.pma-table-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pma-table-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all 0.12s ease;
}

.pma-table-item:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.pma-table-item.active {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
}

.pma-tbl-count {
  font-size: 0.72rem;
  color: #64748b;
  margin-left: auto;
}

.vm-pma-main {
  padding: 16px;
  overflow-x: auto;
}

.pma-subpanel {
  display: none;
}

.pma-subpanel.active {
  display: block;
}

.pma-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.pma-table-responsive {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.pma-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: left;
}

.pma-grid-table th {
  background: #f1f5f9;
  color: #334155;
  padding: 8px 12px;
  font-weight: 700;
  border-bottom: 2px solid #cbd5e1;
  border-right: 1px solid #e2e8f0;
  white-space: nowrap;
}

.pma-grid-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.pma-grid-table tr:hover td {
  background: #f8fafc;
}

.pma-sql-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pma-sql-quick-snippets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-pma-snippet {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-pma-snippet:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.pma-sql-input {
  width: 100%;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.86rem;
  padding: 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  resize: vertical;
}

.pma-sql-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.pma-sql-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-pma-sql-exec {
  background: #16a34a;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-pma-sql-exec:hover {
  background: #15803d;
}

.btn-pma-sql-clear {
  background: #e2e8f0;
  color: #475569;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-pma-sql-save-kw {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
}

.btn-pma-sql-save-kw:hover {
  background: #0369a1;
}

.pma-sql-result-wrap {
  margin-top: 12px;
}

.pma-notice-box {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.pma-notice-box.success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.pma-import-box {
  padding: 24px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  text-align: center;
}

.btn-pma-do-import {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-pma-do-import:hover {
  background: #1d4ed8;
}

.pma-import-status {
  margin-top: 12px;
  font-size: 0.82rem;
  color: #166534;
  font-weight: 600;
}

/* ==========================================================================
   GIMP CANVAS GRAPHICS STUDIO
   ========================================================================== */

.vm-panel-gimp {
  background: #1e293b;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: none;
  flex-direction: column;
  color: #f1f5f9;
}

.vm-panel-gimp.active {
  display: flex;
}

.vm-gimp-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  border-bottom: 1px solid #334155;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.vm-gimp-brand {
  font-size: 0.95rem;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gimp-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  background: #334155;
  padding: 2px 8px;
  border-radius: 999px;
}

.vm-gimp-select {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid #475569;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
}

.btn-gimp-save {
  background: #16a34a;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-gimp-save:hover {
  background: #15803d;
}

.vm-gimp-workspace {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 420px;
  background: #182234;
}

.vm-gimp-tools {
  background: #0f172a;
  border-right: 1px solid #334155;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gimp-tool-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gimp-tool-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gimp-input-row {
  display: flex;
  gap: 8px;
}

.gimp-input-row label {
  font-size: 0.78rem;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gimp-input-row input {
  width: 80px;
  background: #1e293b;
  border: 1px solid #475569;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
}

.gimp-check-row {
  font-size: 0.76rem;
  color: #94a3b8;
}

.btn-gimp-apply-scale {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-gimp-apply-scale:hover {
  background: #0369a1;
}

.gimp-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.btn-gimp-filter {
  background: #334155;
  color: #e2e8f0;
  border: 1px solid #475569;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-gimp-filter:hover {
  background: #475569;
  color: #ffffff;
  border-color: #38bdf8;
}

.btn-gimp-reset {
  background: #475569;
  color: #f1f5f9;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.vm-gimp-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0b1120;
  overflow: auto;
}

.gimp-checkerboard {
  background-color: #1e293b;
  background-image: linear-gradient(45deg, #0f172a 25%, transparent 25%), linear-gradient(-45deg, #0f172a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0f172a 75%), linear-gradient(-45deg, transparent 75%, #0f172a 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  padding: 8px;
  border: 2px solid #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.vm-gimp-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.vm-gimp-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #090d16;
  border-top: 1px solid #1e293b;
  padding: 6px 14px;
  font-size: 0.74rem;
  color: #94a3b8;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.gimp-stat-saved {
  color: #4ade80;
  font-weight: 700;
}

/* ==========================================================================
   NetLab Pro - AUTORSKIE WIRTUALNE LABORATORIUM SIECIOWE CKE
   ========================================================================== */

.netlab-pill {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.vm-panel-netlab {
  background: #0f172a;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: none;
  flex-direction: column;
  color: #f8fafc;
  position: relative;
  overflow: hidden;
}

.vm-panel-netlab.active {
  display: flex;
}

.vm-panel-calc {
  background: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: none;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: calc(100vh - 135px);
  min-height: 700px;
}

.vm-panel-calc.active {
  display: flex;
}

.calc-hub-viewport {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 680px;
}

.netlab-topbar {
  display: flex;
  align-items: center;
  background: #090d16;
  border-bottom: 1px solid #1e293b;
  padding: 6px 14px;
  min-height: 44px;
}

.netlab-toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.netlab-toolbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.netlab-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #94a3b8;
  background: #0f172a;
  padding: 0 10px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #1e293b;
}

.netlab-status-badge b {
  color: #38bdf8;
  font-weight: 700;
}
  color: #22c55e;
}

.netlab-canvas-container {
  position: relative;
  min-height: 640px;
  height: calc(100vh - 280px);
  max-height: 860px;
  background-color: #080d1a;
  background-image: radial-gradient(rgba(56, 189, 248, 0.18) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  padding: 26px;
  overflow: auto;
}

.netlab-svg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.netlab-wire {
  stroke: #22c55e;
  stroke-width: 3.5;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));
  stroke-dasharray: 6 3;
  animation: netlab-wire-flow 1.5s linear infinite;
}

@keyframes netlab-wire-flow {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: 0; }
}

.netlab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 24px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1400px) {
  .netlab-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

@media (max-width: 800px) {
  .netlab-grid {
    grid-template-columns: 1fr;
  }
}

.netlab-node {
  background: #0f172a;
  border: 1.5px solid #1e293b;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.netlab-node:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.15);
}

.netlab-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.dev-ico {
  font-size: 1.2rem;
}

.dev-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f1f5f9;
}

.dev-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  margin-left: auto;
}

.dev-status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.netlab-dev-ip {
  font-size: 0.74rem;
  color: #94a3b8;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.netlab-dev-ip b {
  color: #38bdf8;
}

.netlab-ports-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  background: #05080f;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #1e293b;
}

.netlab-port {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0b1120;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.netlab-port:hover {
  background: #1e293b;
  color: #ffffff;
  border-color: #38bdf8;
}

.netlab-port.selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.port-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #475569;
}

.port-led.on {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}

.netlab-node-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}

.btn-open-dev {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1 1 auto;
}

.btn-open-dev:hover {
  background: #0369a1;
}

.btn-open-dev.secondary {
  background: #334155;
  color: #cbd5e1;
}

.btn-open-dev.secondary:hover {
  background: #475569;
  color: #ffffff;
}

.btn-open-dev.primary {
  background: #16a34a;
}

.btn-open-dev.primary:hover {
  background: #15803d;
}

.btn-print-test-sheet {
  background: #8b5cf6;
  color: #ffffff;
  border: none;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-print-test-sheet:hover {
  background: #7c3aed;
}

/* ==========================================================================
   NetLab Device Modal (Drawer / Popup)
   ========================================================================== */

.netlab-device-modal {
  position: absolute;
  inset: 0;
  background: #0f172a;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.netlab-device-modal[hidden] {
  display: none !important;
}

.netlab-modal-chrome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #090d16;
  border-bottom: 2px solid #1e293b;
  padding: 8px 16px;
}

.netlab-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #f1f5f9;
}

.netlab-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-modal-popout {
  background: #1e293b;
  color: #38bdf8;
  border: 1px solid #334155;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}

.btn-modal-close {
  background: #ef4444;
  color: #ffffff;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.netlab-modal-content {
  flex: 1 1 auto;
  overflow: auto;
  background: #ffffff;
  color: #0f172a;
}

/* Modal: Drukarka LAN RAW */
.printer-mgmt-card {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
  font-family: system-ui, sans-serif;
}

.printer-head {
  border-bottom: 2px solid #0284c7;
  padding-bottom: 12px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.printer-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #0f172a;
}

.printer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.printer-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

.printer-box h4 {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: #0369a1;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}

.printer-param-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.82rem;
  border-bottom: 1px dashed #e2e8f0;
}

.printer-param-row b {
  font-family: monospace;
}

.printer-supply-bar {
  background: #e2e8f0;
  border-radius: 4px;
  height: 12px;
  overflow: hidden;
  margin-top: 4px;
}

.printer-supply-fill {
  background: #16a34a;
  height: 100%;
}

.printer-test-sheet-output {
  background: #ffffff;
  color: #000000;
  border: 2px dashed #94a3b8;
  padding: 24px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  margin-top: 16px;
}

/* Modal: PC1 Desktop */
.pc-desktop-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1e293b;
  color: #ffffff;
}

.pc-desktop-tabs {
  display: flex;
  background: #0f172a;
  border-bottom: 2px solid #334155;
  padding: 0 12px;
}

.btn-pc-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #94a3b8;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-pc-tab.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
  background: #1e293b;
}

.pc-tab-pane {
  display: none;
  padding: 20px;
  flex: 1 1 auto;
  overflow: auto;
}

.pc-tab-pane.active {
  display: block;
}

.pc-cmd-window {
  background: #000000;
  color: #f1f5f9;
  font-family: 'JetBrains Mono', Consolas, monospace;
  padding: 16px;
  border-radius: 6px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.pc-cmd-log {
  flex: 1 1 auto;
  overflow-y: auto;
  white-space: pre-wrap;
  margin-bottom: 12px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.pc-cmd-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pc-cmd-input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.88rem;
  flex: 1 1 auto;
  outline: none;
}




/* =========================================================================
   AUTORSKIE SYMULATORY URZĄDZEŃ NETLAB PRO (R-706W, S-2216, S-2008, AP-C700)
   ========================================================================= */

.nl-emu-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 580px;
  background: #ffffff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: text;
}

/* Header Ogólny Symulatora */
.nl-emu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.nl-emu-brand-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nl-emu-brand-logo {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nl-emu-model-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.nl-emu-stats-box {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
}

.nl-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}

/* Główny obszar symulatora */
.nl-emu-main {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}

/* Pasek boczny menu */
.nl-emu-sidebar {
  width: 230px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}

.nl-nav-cat {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px 4px;
  opacity: 0.6;
}

.nl-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}

.nl-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.nl-nav-item.active {
  font-weight: 700;
}

/* Pasek zakładek poziomych (np. Switch S-2008 / AP C700) */
.nl-emu-tabs-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 4px;
  flex-shrink: 0;
}

.nl-tab-btn {
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
}

/* Treść strony symulatora */
.nl-emu-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 28px;
}

.nl-page-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.nl-page-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nl-page-desc {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0;
}

/* Panele kart i formularzy */
.nl-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

.nl-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 14px;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nl-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.84rem;
}

.nl-form-label {
  width: 220px;
  flex-shrink: 0;
  font-weight: 600;
  color: #334155;
}

.nl-form-field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nl-input, .nl-select {
  padding: 6px 12px;
  font-size: 0.84rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  min-width: 240px;
  font-family: inherit;
}

.nl-input:focus, .nl-select:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.nl-hint {
  font-size: 0.75rem;
  color: #64748b;
}

.nl-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.nl-btn-primary {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nl-btn-primary:hover {
  background: #0369a1;
}

.nl-btn-secondary {
  background: #e2e8f0;
  color: #1e293b;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
}

.nl-btn-secondary:hover {
  background: #cbd5e1;
}

/* Tabele w symulatorze */
.nl-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.nl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.nl-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  padding: 8px 14px;
  border-bottom: 2px solid #cbd5e1;
}

.nl-table td {
  padding: 8px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}

.nl-table tr:hover td {
  background: #f8fafc;
}

.nl-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.nl-tag.green { background: #dcfce7; color: #166534; }
.nl-tag.blue { background: #e0f2fe; color: #0369a1; }
.nl-tag.amber { background: #fef3c7; color: #92400e; }
.nl-tag.gray { background: #f1f5f9; color: #475569; }

/* Komunikat o zapisaniu ustawień */
.nl-toast-saved {
  position: absolute;
  top: 16px;
  right: 24px;
  background: #16a34a;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: nlFadeIn 0.2s ease;
}

@keyframes nlFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   MOTYW 1: ROUTER NETLAB GATEWAY R-706W (OMADA / AX3000 TEAL DARK)
   ------------------------------------------------------------------------- */
.nl-emu-shell.theme-r706w {
  background: #061820;
  color: #e2e8f0;
}

.nl-emu-shell.theme-r706w .nl-emu-top {
  background: #041219;
  border-bottom: 2px solid #0b3445;
  color: #ffffff;
}

.nl-emu-shell.theme-r706w .nl-emu-brand-logo {
  color: #00e5ff;
}

.nl-emu-shell.theme-r706w .nl-emu-model-badge {
  background: #007791;
  color: #ffffff;
}

.nl-emu-shell.theme-r706w .nl-stat-pill {
  background: #092735;
  color: #38bdf8;
  border: 1px solid #0f465e;
}

.nl-emu-shell.theme-r706w .nl-emu-sidebar {
  background: #041219;
  border-right: 1px solid #0b3445;
  color: #94a3b8;
}

.nl-emu-shell.theme-r706w .nl-nav-cat {
  color: #00b4d8;
}

.nl-emu-shell.theme-r706w .nl-nav-item:hover {
  background: #082635;
  color: #f1f5f9;
}

.nl-emu-shell.theme-r706w .nl-nav-item.active {
  background: #0b3445;
  color: #00e5ff;
  border-left-color: #00e5ff;
}

/* ==========================================================================
   AUTHENTIC TP-LINK OMADA ER706W WEB MANAGEMENT GUI (1:1 EMULATOR)
   ========================================================================== */
.nl-emu-shell.theme-r706w {
  background: #ffffff;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid #dcdcdc;
}

.theme-r706w .tp-header {
  background: #38434a;
  color: #ffffff;
  height: 52px;
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  border-bottom: 2px solid #283137;
  user-select: none;
}

.theme-r706w .tp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-r706w .tp-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.theme-r706w .tp-header-model {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.theme-r706w .tp-header-sub {
  font-size: 0.72rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-r706w .tp-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #94a3b8;
  font-size: 0.65rem;
  font-family: serif;
  font-style: italic;
  font-weight: bold;
  cursor: pointer;
  color: #f1f5f9;
}

.theme-r706w .tp-main-layout {
  display: flex;
  flex: 1;
  height: calc(100% - 52px);
  min-height: 560px;
  background: #ffffff;
  overflow: hidden;
}

.theme-r706w .tp-sidebar {
  width: 195px;
  min-width: 195px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  user-select: none;
}

.theme-r706w .tp-menu-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.theme-r706w .tp-menu-cat-btn {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s ease;
}

.theme-r706w .tp-menu-cat-btn:hover {
  background: #f8fafc;
}

.theme-r706w .tp-menu-cat-btn .tp-arrow {
  margin-right: 8px;
  font-size: 0.65rem;
  color: #007d88;
  display: inline-block;
  width: 10px;
}

.theme-r706w .tp-menu-cat.deployed > .tp-menu-cat-btn {
  background: #01565b;
  color: #ffffff;
}

.theme-r706w .tp-menu-cat.deployed > .tp-menu-cat-btn .tp-arrow {
  color: #ffffff;
}

.theme-r706w .tp-submenu {
  list-style: none;
  margin: 0;
  padding: 4px 0 6px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.theme-r706w .tp-submenu-item {
  display: flex;
  align-items: center;
  padding: 5px 12px 5px 22px;
  font-size: 0.75rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
}

.theme-r706w .tp-submenu-item:hover {
  color: #007d88;
  background: #f1f5f9;
}

.theme-r706w .tp-submenu-item.active {
  color: #007d88;
  font-weight: 700;
  background: #ffffff;
}

.theme-r706w .tp-submenu-item::before {
  content: "•";
  margin-right: 6px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.theme-r706w .tp-submenu-item.active::before {
  color: #007d88;
}

.theme-r706w .tp-sidebar-footer {
  padding: 14px 10px 10px;
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.35;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
}

.theme-r706w .tp-right-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.theme-r706w .tp-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 16px 0 16px;
  border-bottom: 1px solid #007d88;
  background: #ffffff;
  min-height: 38px;
}

.theme-r706w .tp-tab {
  background: #01565b;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
  border: 1px solid #00484c;
  border-bottom: none;
  white-space: nowrap;
}

.theme-r706w .tp-tab:hover {
  background: #006b72;
}

.theme-r706w .tp-tab.active {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #ccd2d8;
  border-top: 3px solid #007d88;
  border-bottom: 1px solid #ffffff;
  margin-bottom: -1px;
  font-weight: 700;
}

.theme-r706w .tp-content-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: #ffffff;
  color: #333333;
}

.theme-r706w .tp-sec-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e9eef2;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 2px;
}

.theme-r706w .tp-sec-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #00595e;
}

.theme-r706w .tp-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #007d88;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.theme-r706w .tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.77rem;
  border: 1px solid #dbe2e8;
  margin-bottom: 16px;
}

.theme-r706w .tp-table th {
  background: #f4f6f8;
  color: #1e293b;
  font-weight: 600;
  padding: 7px 10px;
  border: 1px solid #dbe2e8;
  text-align: left;
}

.theme-r706w .tp-table td {
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  color: #334155;
  background: #ffffff;
}

.theme-r706w .tp-table tr:hover td {
  background: #f8fafc;
}

.theme-r706w .tp-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #007d88;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 4px 8px;
}

.theme-r706w .tp-btn-add:hover {
  text-decoration: underline;
}

.theme-r706w .tp-btn-default {
  background: #f1f3f5;
  color: #333333;
  border: 1px solid #ccd2d8;
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.theme-r706w .tp-btn-default:hover {
  background: #e2e6ea;
  border-color: #b8c1c9;
}

.theme-r706w .tp-btn-primary {
  background: #007d88;
  color: #ffffff;
  border: 1px solid #006066;
  padding: 4px 18px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 2px;
  cursor: pointer;
}

.theme-r706w .tp-btn-primary:hover {
  background: #0093a0;
}

.theme-r706w .tp-input,
.theme-r706w .tp-select {
  background: #ffffff;
  border: 1px solid #ccd2d8;
  color: #222222;
  padding: 4px 8px;
  font-size: 0.77rem;
  border-radius: 2px;
  outline: none;
}

.theme-r706w .tp-input:focus,
.theme-r706w .tp-select:focus {
  border-color: #007d88;
  box-shadow: 0 0 0 2px rgba(0, 125, 136, 0.18);
}

.theme-r706w .tp-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.78rem;
}

.theme-r706w .tp-form-label {
  width: 170px;
  min-width: 170px;
  color: #334155;
  font-weight: 500;
}

/* ==========================================================================
   AUTHENTIC TP-LINK JETSTREAM SWITCH WEB MANAGEMENT GUI (1:1 EMULATOR)
   Models: T1600G-18TS (16-Port S-2216) & T2500G-10TS / TL-SG2008 (8-Port S-2008)
   ========================================================================== */
.nl-emu-shell.theme-jetstream,
.nl-emu-shell.theme-s2216,
.nl-emu-shell.theme-s2008 {
  background: #ffffff;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid #dcdcdc;
}

/* ==========================================================================
   AUTHENTIC TP-LINK EASY SMART CONFIGURATION UTILITY (1:1 EMULATOR)
   Model: TL-SG108E (8-Port Gigabit Easy Smart Switch)
   Manual: 1910013735_Easy Smart Configuration Utility_UG_1022.pdf (REV5.2.0)
   ========================================================================== */
.nl-emu-shell.theme-easysmart {
  background: #ffffff;
  color: #1f3840;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid #1a3d46;
}

.es-header {
  background: #1a3d46;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  user-select: none;
  flex-shrink: 0;
}

.es-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.es-logo svg {
  height: 22px;
  width: auto;
}

.es-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.es-window-controls {
  display: flex;
  gap: 8px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  margin-bottom: 2px;
}

.es-window-btn {
  cursor: pointer;
  padding: 0 3px;
}
.es-window-btn:hover {
  color: #ffffff;
}

.es-model-title {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Horizontal Top Navigation Bar */
.es-nav-bar {
  background: #e2f0f0;
  border-bottom: 2px solid #007d88;
  padding: 0 12px;
  display: flex;
  align-items: flex-end;
  height: 40px;
  min-height: 40px;
  user-select: none;
  flex-shrink: 0;
}

.es-nav-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.es-nav-tab {
  background: transparent;
  border: none;
  color: #1f3840;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}

.es-nav-tab:hover {
  background: rgba(0, 125, 136, 0.08);
}

.es-nav-tab.active {
  background: #ffffff;
  color: #00606b;
  font-weight: 700;
  border: 1px solid #c7dfdf;
  border-bottom: 1px solid #ffffff;
  margin-bottom: -2px;
  z-index: 2;
}

.es-nav-home {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #00606b;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
}
.es-nav-home:hover {
  background: rgba(0, 125, 136, 0.1);
}

/* Main Layout */
.es-main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #ffffff;
}

/* Sidebar */
.es-sidebar {
  width: 190px;
  min-width: 190px;
  background: #f5fafb;
  border-right: 1px solid #d9e9e9;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  user-select: none;
}

.es-side-item {
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 0.82rem;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.es-side-item:hover:not(.active) {
  background: #e6f3f3;
  color: #005f6b;
}

.es-side-item.active {
  background: #005f6b;
  color: #ffffff;
  font-weight: 600;
}

/* Content Area */
.es-content-area {
  flex: 1;
  padding: 18px 24px;
  overflow-y: auto;
  background: #ffffff;
}

.es-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #006b76;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 16px;
  text-transform: none;
  letter-spacing: 0.2px;
}

.es-section-title::before,
.es-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, #8dcad0, #8dcad0 3px, transparent 3px, transparent 6px);
}
.es-section-title::before {
  max-width: 30px;
}

/* Form Styles */
.es-form-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 12px;
  column-gap: 12px;
  align-items: center;
  font-size: 0.84rem;
  color: #1e3b47;
  margin-bottom: 16px;
}

.es-form-label {
  font-weight: 600;
  color: #1e3b47;
}

.es-input,
.es-select {
  background: #ffffff;
  border: 1px solid #94b8b8;
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 0.82rem;
  color: #0f172a;
  outline: none;
  font-family: inherit;
}
.es-input:focus,
.es-select:focus {
  border-color: #007d88;
  box-shadow: 0 0 0 2px rgba(0, 125, 136, 0.15);
}

.es-btn {
  background: #ffffff;
  border: 1px solid #94b8b8;
  border-radius: 4px;
  padding: 5px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f3840;
  cursor: pointer;
  transition: all 0.15s ease;
}
.es-btn:hover {
  background: #007d88;
  color: #ffffff;
  border-color: #007d88;
}
.es-btn-danger:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

/* Tables */
.es-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 16px;
  border: 1px solid #cfe2e2;
}

.es-table th {
  background: #e8f4f4;
  color: #1f3840;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid #cfe2e2;
  text-align: left;
}

.es-table td {
  padding: 7px 10px;
  border: 1px solid #e1eded;
  color: #334155;
}

.es-table tr:nth-child(even) td {
  background: #f9fcfc;
}

/* Key-Value Table */
.es-kv-table {
  width: 100%;
  max-width: 620px;
  border-collapse: collapse;
  margin-bottom: 16px;
  border: 1px solid #cfe2e2;
}
.es-kv-table td {
  padding: 8px 12px;
  border: 1px solid #e1eded;
  font-size: 0.82rem;
}
.es-kv-table td.es-kv-label {
  background: #fbfdfd;
  font-weight: 600;
  color: #1e3b47;
  width: 170px;
}

/* Note box */
.es-note-box {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.5;
}
.es-note-box b {
  color: #006b76;
}

/* 802.1Q Port Badges */
.es-port-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.es-port-row {
  display: flex;
  gap: 6px;
}
.es-port-badge {
  width: 32px;
  height: 28px;
  border: 1px solid #94b8b8;
  background: #ffffff;
  color: #1f3840;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s ease;
  position: relative;
}
.es-port-badge::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 2px;
  border-top: 1px solid #94b8b8;
  border-left: 1px solid #94b8b8;
}
.es-port-badge:hover {
  border-color: #007d88;
}
.es-port-badge.selected {
  background: #64c7cc;
  color: #ffffff;
  border-color: #007d88;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Home / Discovered Switches View */
.es-home-shell {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
}
.es-home-banner {
  background: #1b505a;
  color: #ffffff;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 4px 4px 0 0;
  font-size: 0.88rem;
}
.es-home-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cfe2e2;
  font-size: 0.82rem;
}
.es-home-table th {
  background: #e8f4f4;
  color: #1f3840;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid #cfe2e2;
  text-align: center;
}
.es-home-table td {
  padding: 8px 10px;
  border: 1px solid #e1eded;
  text-align: center;
  color: #334155;
}
.es-home-table tr:hover td {
  background: #f0f9f9;
}
.es-home-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  color: #005f6b;
  padding: 4px 8px;
  border-radius: 4px;
}
.es-home-icon-btn:hover {
  background: #e0f2f2;
}
.es-home-bottom-bar {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
}

/* Top Header Bar */
.js-top-bar {
  background: #33373d;
  height: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  user-select: none;
  border-bottom: 2px solid #25282c;
  flex-shrink: 0;
}

.js-top-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.js-brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.5px;
}

.js-brand-logo svg {
  height: 24px;
  width: auto;
}

.js-model-badge {
  font-size: 0.82rem;
  color: #94a3b8;
  background: #25282c;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #3e444b;
}

/* Horizontal Top Navigation Tabs */
.js-nav-tabs {
  display: flex;
  height: 52px;
  align-items: stretch;
  gap: 2px;
}

.js-tab-btn {
  background: transparent;
  border: none;
  color: #c1c6cb;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s ease;
  position: relative;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.js-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.js-tab-btn.active {
  color: #ffffff;
  background: #272a2e;
}

.js-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00a2a5;
}

/* Top Right Action Buttons */
.js-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.js-btn-action {
  background: transparent;
  border: 1px solid rgba(85, 201, 218, 0.35);
  color: #55c9da;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.js-btn-action:hover {
  background: rgba(85, 201, 218, 0.15);
  border-color: #55c9da;
  color: #ffffff;
}

/* Main Container Layout */
.js-main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #ffffff;
}

/* Left Sidebar Menu */
.js-sidebar {
  width: 220px;
  min-width: 220px;
  background: #e9eef2;
  border-right: 1px solid #d4dde3;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  user-select: none;
  flex-shrink: 0;
}

.js-menu-cat-title {
  background: #0f595e;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.js-menu-cat-title .chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.js-menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.js-menu-item {
  padding: 8px 14px 8px 24px;
  font-size: 0.8rem;
  color: #33373d;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #dee5ea;
  transition: all 0.15s ease;
}

.js-menu-item::before {
  content: '•';
  color: #8392a5;
  font-size: 1rem;
}

.js-menu-item:hover {
  background: #dde5eb;
  color: #000000;
}

.js-menu-item.active {
  background: #00a2a5;
  color: #ffffff;
  font-weight: 700;
}

.js-menu-item.active::before {
  color: #ffffff;
}

/* Content Area */
.js-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Section Title Bar */
.js-sec-header {
  font-size: 1.05rem;
  font-weight: 700;
  color: #33373d;
  padding-bottom: 6px;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Unit Pill Tabs */
.js-unit-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.js-unit-tab {
  background: #b7e8ec;
  color: #0f595e;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 4px 14px;
  border-radius: 4px 4px 0 0;
  border: 1px solid #99dce2;
  border-bottom: none;
}

/* Port Status Graphic Rack Plate */
.js-rack-plate {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.js-rack-unit-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #00a2a5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.js-port-matrix {
  display: flex;
  align-items: center;
  gap: 16px;
}

.js-rj45-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.js-rj45-row {
  display: flex;
  gap: 6px;
}

.js-port-box {
  width: 36px;
  height: 34px;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 2px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.15s ease;
}

.js-port-box:hover {
  border-color: #00a2a5;
  box-shadow: 0 0 5px rgba(0, 162, 165, 0.4);
}

.js-port-num {
  font-size: 9px;
  font-weight: 800;
  color: #475569;
  line-height: 1;
}

.js-port-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
}

.js-port-led.up {
  background: #00c389;
  box-shadow: 0 0 5px #00c389;
}

.js-sfp-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px dashed #cbd5e1;
}

.js-sfp-box {
  width: 38px;
  height: 34px;
  border: 1px solid #00a2a5;
  border-radius: 4px;
  background: #f0fdfa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 2px;
}

/* JetStream Table Styles */
.js-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  border: 1px solid #d4dde3;
  margin-bottom: 12px;
}

.js-table th {
  background: #eef3f7;
  color: #33373d;
  font-weight: 700;
  padding: 7px 10px;
  border: 1px solid #d4dde3;
  text-align: left;
}

.js-table td {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  color: #33373d;
}

.js-table tr:nth-child(even) td {
  background: #f9fbfd;
}

.js-table tr:hover td {
  background: #f1f7fa;
}

/* Form inputs & buttons */
.js-input {
  font-family: monospace;
  font-size: 0.82rem;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #ffffff;
  color: #1e293b;
}

.js-input:focus {
  outline: none;
  border-color: #00a2a5;
  box-shadow: 0 0 0 2px rgba(0, 162, 165, 0.2);
}

.js-btn-primary {
  background: #00a2a5;
  color: #ffffff;
  border: 1px solid #008f91;
  padding: 5px 16px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.js-btn-primary:hover {
  background: #008f91;
}

.js-btn-secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 0.78rem;
  cursor: pointer;
}

.js-btn-secondary:hover {
  background: #e2e8f0;
}

/* ==========================================================================
   AUTHENTIC TP-LINK AP300 / AP-C700 ACCESS POINT WEB GUI (1:1 EMULATOR)
   ========================================================================== */
.nl-emu-shell.theme-ap300,
.nl-emu-shell.theme-c700 {
  background: #ffffff;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid #dcdcdc;
}

/* AP Top Header */
.ap-top-bar {
  background: #0072c6;
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  user-select: none;
  flex-shrink: 0;
}

.ap-brand-box {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.ap-brand-logo {
  color: #ffffff;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
}

.ap-model-text {
  font-size: 0.72rem;
  color: #b9e1ff;
  font-weight: 700;
}

.ap-top-center-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ap-tab-link {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.ap-tab-link:hover {
  opacity: 0.85;
}

.ap-tab-link.active-pill {
  background: #ffffff;
  color: #0072c6;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.ap-top-right-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #ffffff;
  font-size: 0.75rem;
}

.ap-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.ap-tool-item:hover {
  opacity: 1;
}

.ap-tool-item span {
  font-size: 14px;
}

/* AP Main Layout */
.ap-main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #ffffff;
}

.ap-sidebar {
  width: 200px;
  min-width: 200px;
  background: #f4f6f8;
  border-right: 1px solid #e2e8f0;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.ap-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ap-nav-card:hover {
  border-color: #0072c6;
  color: #0072c6;
  transform: translateX(2px);
}

.ap-nav-card.active {
  background: #ffffff;
  border-color: #0072c6;
  border-left: 4px solid #0072c6;
  color: #0072c6;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 114, 198, 0.1);
}

.ap-nav-icon {
  font-size: 1.1rem;
}

.ap-content-pane {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* AP Topology Map */
.ap-map-wrapper {
  background: #fcfdfd;
  border: 1px solid #eef2f5;
  border-radius: 8px;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 8px;
}

.ap-map-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 0.82rem;
  color: #475569;
}

.ap-map-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #86b817;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(134, 184, 23, 0.15);
  position: relative;
}

.ap-map-connector {
  flex: 1;
  max-width: 110px;
  height: 2px;
  background: #cbd5e1;
  position: relative;
}

.ap-map-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f97316;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Green Section Banner */
.ap-sec-banner {
  background: #86b817;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 6px 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-form-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.ap-form-table td {
  padding: 7px 12px;
  vertical-align: middle;
}

.ap-form-table td:first-child {
  width: 240px;
  color: #64748b;
  font-weight: 600;
}

.ap-form-table td:last-child {
  color: #1e293b;
}

.ap-btn-save {
  background: #0072c6;
  color: #ffffff;
  border: none;
  padding: 7px 22px;
  border-radius: 4px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ap-btn-save:hover {
  background: #005fa4;
}

/* ==========================================================================
   AUTHENTIC HP / NETWORK PRINTER EMBEDDED WEB SERVER (EWS)
   ========================================================================== */
.nl-emu-shell.theme-printer-ews {
  background: #ffffff;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid #dcdcdc;
}

.ews-top-bar {
  background: #007dba;
  height: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #ffffff;
  flex-shrink: 0;
}

.ews-brand-title {
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ews-status-pill {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}

.ews-tabs-strip {
  display: flex;
  background: #f1f5f9;
  border-bottom: 2px solid #cbd5e1;
  padding: 0 16px;
  gap: 4px;
}

.ews-tab-item {
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease;
}

.ews-tab-item:hover {
  color: #007dba;
}

.ews-tab-item.active {
  color: #007dba;
  border-bottom-color: #007dba;
  background: #ffffff;
}

.ews-content-pane {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #ffffff;
}

.ews-supply-bar {
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
}

.ews-supply-fill {
  height: 100%;
  background: #0f172a;
  border-radius: 6px;
}




/* ==========================================================================
   NOWY PROFESJONALNY LAYOUT ARKUSZA EGZAMINACYJNEGO CKE & PRACOWNI WIRTUALNEJ
   ========================================================================== */

/* Pasek nagłówka zadania praktycznego (zamiast numeracji 1) */
.prac-exam-header-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f172a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid #334155;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.badge-strip-cke {
  background: #dc2626;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.5px;
}
.badge-strip-qual {
  background: #2563eb;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.76rem;
}
.badge-strip-pts {
  background: #16a34a;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.76rem;
}
.badge-strip-time {
  margin-left: auto;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Karta zadania praktycznego */
.card.question.is-practical-card {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
}

.prac-qhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e293b;
  color: #fff;
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
}
.prac-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge-cke-tag {
  background: #dc2626;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
}
.badge-qual-tag {
  background: #0284c7;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
}
.prac-title-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
}
.prac-pts-badge {
  background: #15803d;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
}
.prac-time-tag {
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.07);
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Zwijana szuflada z treścią zadania (Fullscreen dla pracowni) */
.btn-sheet-toggle {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid #475569;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn-sheet-toggle:hover {
  background: #475569;
  color: #fff;
}
.prac-sheet-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8fafc;
}
.prac-sheet-drawer.open {
  max-height: none !important;
  overflow: visible !important;
  border-bottom: 2px solid #e2e8f0;
}
.prac-sheet-body {
  padding: 24px;
  color: #1e293b;
  font-size: 0.94rem;
  line-height: 1.65;
}
.prac-sheet-body .rich-h1 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 16px 0 8px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 6px;
}
.prac-sheet-body .rich-h2 {
  font-size: 1.10rem;
  font-weight: 800;
  color: #0369a1;
  margin: 14px 0 6px;
}
.prac-sheet-body .rich-h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  margin: 14px 0 6px;
  background: #f1f5f9;
  padding: 4px 8px;
  border-left: 3px solid #0284c7;
  border-radius: 0 4px 4px 0;
}
.prac-sheet-body .rich-h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  margin: 12px 0 4px;
}
.prac-sheet-body .rich-hr {
  border: none;
  border-top: 1px solid #cbd5e1;
  margin: 16px 0;
}
.prac-sheet-body .rich-callout {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 10px 0;
  color: #92400e;
  font-size: 0.88rem;
  line-height: 1.5;
}
.prac-sheet-body .rich-bullet {
  padding-left: 14px;
  margin: 4px 0;
  color: #334155;
  font-size: 0.91rem;
}

/* ==========================================================================
/* ==========================================================================
   NETLAB PRO · ELEGANCKIE I REALISTYCZNE OKABLOWANIE ORAZ ŁĄCZNOŚĆ WI-FI
   ========================================================================== */
.netlab-wire-shadow {
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 5px;
  stroke-linecap: round;
  fill: none;
  filter: blur(2px);
}

.netlab-wire {
  stroke-width: 3.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.15s ease, stroke-width 0.15s ease, filter 0.15s ease;
}

.netlab-wire.wire-straight {
  stroke: #0ea5e9;
  filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.65));
}

.netlab-wire.wire-cross {
  stroke: #f97316;
  stroke-dasharray: 8 4;
  filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.65));
}

.netlab-wire.wire-wan {
  stroke: #eab308;
  filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.65));
}

.netlab-wire.wire-fiber {
  stroke: #06b6d4;
  filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.8));
}

.netlab-wire.wire-usb {
  stroke: #a855f7;
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.65));
}

.netlab-wire.wire-wifi {
  stroke: #a855f7;
  stroke-width: 2.5px;
  stroke-dasharray: 6 5;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.8));
  animation: netlab-wifi-wave 1.6s linear infinite;
}

@keyframes netlab-wifi-wave {
  from { stroke-dashoffset: 22; }
  to { stroke-dashoffset: 0; }
}

.netlab-wire-hitarea {
  stroke: transparent;
  stroke-width: 24px;
  fill: none;
  cursor: pointer;
}

/* Podświetlenie aktywnego kabla przy najechaniu */
.netlab-wire-interactive {
  cursor: pointer;
}

.netlab-wire-interactive:hover .netlab-wire.wire-straight {
  stroke: #38bdf8;
  stroke-width: 4.5px;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.95));
}

.netlab-wire-interactive:hover .netlab-wire.wire-cross {
  stroke: #fb923c;
  stroke-width: 4.5px;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.95));
}

.netlab-wire-interactive:hover .netlab-wire.wire-wan {
  stroke: #fde047;
  stroke-width: 4.5px;
  filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.95));
}

.netlab-wire-interactive:hover .netlab-wire.wire-fiber {
  stroke: #22d3ee;
  stroke-width: 4.5px;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 1));
}

.netlab-wire-interactive:hover .netlab-wire.wire-usb {
  stroke: #c084fc;
  stroke-width: 4.5px;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 1));
}

.netlab-wire-interactive:hover .netlab-wire.wire-wifi {
  stroke: #c084fc;
  stroke-width: 3.5px;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 1));
}

/* Wtyki RJ-45 na końcach kabla */
.netlab-plug-boot {
  transition: transform 0.15s ease;
}

.netlab-wire-interactive:hover .netlab-plug-boot {
  transform: scale(1.15);
  transform-origin: center;
}

/* Dyskretna etykieta kabla - pojawia się płynnie przy najechaniu kablem */
.netlab-wire-tag-group {
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  cursor: pointer;
}

.netlab-wire-interactive:hover .netlab-wire-tag-group,
.netlab-wire-tag-group:hover {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

.wire-tag-bg {
  fill: rgba(15, 23, 42, 0.94);
  stroke: #0284c7;
  stroke-width: 1.2px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
}

.netlab-wire-tag-group:hover .wire-tag-bg {
  fill: #991b1b;
  stroke: #ef4444;
}

.wire-tag-text {
  fill: #f1f5f9;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2px;
}

/* Wskaźnik Wi-Fi na karcie urządzenia */
.card-wifi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.5);
  color: #c084fc;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1;
}

.card-wifi-badge.is-ap {
  background: rgba(2, 132, 199, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.card-wifi-badge.is-connected {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(74, 222, 128, 0.5);
  color: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.3);
}

.btn-dev-action.btn-node-wifi {
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.4);
}
.btn-dev-action.btn-node-wifi.wifi-connected {
  background: rgba(124, 58, 237, 0.3);
  color: #c084fc;
  border-color: #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

/* Modal diagnostyczny Ping All */
.nl-ping-diag-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 680px;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 9999px rgba(0, 0, 0, 0.55);
  z-index: 99999;
  overflow: hidden;
  animation: diagFadeIn 0.2s ease-out;
}
@keyframes diagFadeIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.nl-diag-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}
.nl-diag-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.diag-icon { font-size: 1.4rem; }
.diag-sub { font-size: 0.76rem; color: #94a3b8; margin-top: 2px; }
.nl-diag-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
}
.nl-diag-close:hover { color: #fff; }
.nl-diag-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1e293b;
  border-radius: 8px;
  border-left: 4px solid #64748b;
}
.diag-row.ok { border-left-color: #22c55e; }
.diag-row.warn { border-left-color: #f59e0b; }
.diag-row.err { border-left-color: #ef4444; }
.diag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748b;
}
.diag-row.ok .diag-dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.diag-row.warn .diag-dot { background: #f59e0b; }
.diag-row.err .diag-dot { background: #ef4444; }
.diag-meta {
  flex: 1 1 auto;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diag-meta span { color: #94a3b8; font-size: 0.76rem; }
.diag-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}
.diag-badge.ok { background: #14532d; color: #86efac; }
.diag-badge.warn { background: #78350f; color: #fde68a; }
.diag-badge.err { background: #7f1d1d; color: #fca5a5; }
.nl-diag-foot {
  padding: 12px 18px;
  background: #1e293b;
  border-top: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.diag-foot-hint { font-size: 0.78rem; color: #94a3b8; }
.nl-diag-btn-ok {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 6px 18px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   PANEL: SYSTEMY OPERACYJNE (STACJA ROBOCZA & SERWER SIECIOWY)
   ========================================================================== */
.os-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #0f172a;
  color: #fff;
  border-bottom: 1px solid #334155;
}
.os-hub-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.os-hub-icon { font-size: 1.8rem; }
.os-hub-title h3 { margin: 0; font-size: 1.05rem; color: #f8fafc; }
.os-hub-title p { margin: 2px 0 0; font-size: 0.78rem; color: #94a3b8; }
.os-device-selector {
  display: flex;
  gap: 8px;
}
.btn-os-device-tab {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #475569;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-os-device-tab.active {
  background: #2563eb;
  color: #fff;
  border-color: #3b82f6;
}

.os-dev-container { display: none; }
.os-dev-container.active { display: block; }

.os-workstation-bar,
.os-server-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #0b1120;
  border-bottom: 2px solid #1e293b;
  color: #f8fafc;
}
.os-ws-brand,
.os-srv-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.os-ws-logo,
.os-srv-logo {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.os-ws-title,
.os-srv-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: #cbd5e1;
}
.os-ws-title b,
.os-srv-title b {
  color: #38bdf8;
  font-weight: 700;
}
.os-ws-sub,
.os-srv-sub {
  font-size: 0.76rem;
  color: #94a3b8;
  margin-top: 2px;
}
.os-ws-sub b,
.os-srv-sub b {
  color: #22c55e;
  font-family: "JetBrains Mono", Consolas, monospace;
}
.os-ws-switcher,
.os-srv-switcher {
  display: flex;
  gap: 8px;
  background: #1e293b;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #334155;
}
.btn-ws-os,
.btn-srv-os {
  background: transparent;
  color: #94a3b8;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-ws-os:hover,
.btn-srv-os:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.btn-ws-os.active,
.btn-srv-os.active {
  background: #0284c7;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.os-system-switcher-bar {
  display: none !important;
}

/* Windows 11 Desktop GUI */
.os-workstation-chrome {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  border: 1px solid #1e293b;
  background: #0b1120;
  margin-bottom: 24px;
}
.os-desktop-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.win11-screen {
  position: relative;
  width: 100%;
  height: 600px;
  min-height: 520px;
  background-color: #0c1427;
  background-image: url('/assets/images/win11-bloom-dark.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
  user-select: none;
  font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}
.win11-icons-grid {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 54px; /* strictly above the 48px taskbar */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 80px);
  grid-auto-columns: 88px;
  gap: 4px 8px;
  padding: 4px;
  z-index: 5;
  overflow: hidden;
}
.win11-icon {
  width: 86px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
  overflow: hidden;
}
.win11-icon:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.win11-icon:active,
.win11-icon.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}
.win11-icon .ico-img {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.win11-icon .ico-img svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.win11-icon .ico-txt {
  color: #ffffff;
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
  word-break: break-word;
}

.win11-window {
  position: absolute;
  background: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  border: 1px solid #94a3b8;
  overflow: hidden;
  z-index: 10;
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 54px);
  box-sizing: border-box;
}
.win11-w-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  user-select: none;
}
.win11-w-head.win-cmd-head {
  background: #000;
  color: #fff;
  border-bottom: 1px solid #334155;
}
.win11-w-close {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
}
.win11-w-close:hover { background: #ef4444; color: #fff; border-radius: 4px; }

.win11-w-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.win11-w-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #cbd5e1;
  padding: 8px 16px;
  background: #f8fafc;
}

.win11-cmd-wrap {
  background: #000;
  color: #22c55e;
  height: calc(100% - 34px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.win11-cmd-log {
  flex: 1 1 auto;
  overflow-y: auto;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  line-height: 1.4;
}
.win11-cmd-in-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.win11-cmd-prompt { color: #22c55e; font-weight: 700; font-family: monospace; font-size: 0.82rem; }
.win11-cmd-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  color: #fff;
  font-family: monospace;
  font-size: 0.82rem;
  outline: none;
}

.win-inp-text {
  background: #fff;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.82rem;
  width: 170px;
}
.win11-btn-dialog {
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.win11-btn-dialog:hover { background: #cbd5e1; }

.win11-taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: rgba(18, 26, 43, 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 25;
  user-select: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
}

/* Weather Widget (Left) */
.win11-taskbar-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  color: #f8fafc;
  min-width: 120px;
}
.win11-taskbar-widget:hover {
  background: rgba(255, 255, 255, 0.08);
}
.win11-taskbar-widget .widget-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.win11-taskbar-widget .widget-ico svg {
  width: 22px;
  height: 22px;
}
.win11-taskbar-widget .widget-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.win11-taskbar-widget .widget-temp {
  font-size: 0.76rem;
  font-weight: 700;
}
.win11-taskbar-widget .widget-cond {
  font-size: 0.65rem;
  color: #94a3b8;
}

/* Centered Taskbar Items */
.win11-task-center {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  transition: margin 0.25s ease;
}
.win11-taskbar.align-left .win11-task-center {
  margin: 0 16px 0 8px;
}

/* 4-square Windows 11 logo */
.win11-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  transition: background 0.15s;
}
.win11-start-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.win11-start-btn svg {
  width: 20px;
  height: 20px;
}

.win11-task-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  box-sizing: border-box;
}
.win11-task-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}
.win11-task-icon svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.win11-task-icon.open::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 3px;
  background: #94a3b8;
  border-radius: 2px;
}
.win11-task-icon.active::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: #0078d4;
  border-radius: 2px;
}

/* System Tray (Right) */
.win11-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 0.78rem;
  min-width: 170px;
  justify-content: flex-end;
}
.win11-tray-caret {
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.win11-tray-caret:hover {
  background: rgba(255, 255, 255, 0.1);
}
.win11-tray-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s;
}
.win11-tray-cluster:hover {
  background: rgba(255, 255, 255, 0.12);
}
.win11-tray-cluster svg {
  display: block;
}
.win11-tray-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.win11-tray-clock:hover {
  background: rgba(255, 255, 255, 0.1);
}
.win11-tray-clock .clock-time {
  font-size: 0.75rem;
  font-weight: 600;
}
.win11-tray-clock .clock-date {
  font-size: 0.65rem;
  color: #cbd5e1;
}
.win11-tray-bell {
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.win11-tray-bell:hover {
  background: rgba(255, 255, 255, 0.1);
}
.win11-show-desktop {
  width: 6px;
  height: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  margin-left: 4px;
  cursor: pointer;
}
.win11-show-desktop:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Ubuntu Desktop GUI */
.ubuntu-screen {
  height: 680px;
  min-height: 680px;
  background: linear-gradient(135deg, #77216f 0%, #5e2750 35%, #2c001e 100%);
  position: relative;
  overflow: hidden;
}
.ubuntu-topbar {
  height: 28px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
}
.ubuntu-topbar-left { display: flex; gap: 14px; }
.ubuntu-topbar-right { display: flex; gap: 12px; }
.ubuntu-workspace {
  position: relative;
  height: calc(680px - 28px);
}
.ubuntu-dock {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 52px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.ubuntu-dock-icon {
  font-size: 1.5rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s;
}
.ubuntu-dock-icon:hover { background: rgba(255, 255, 255, 0.2); }
.ubuntu-window {
  position: absolute;
  background: #300a24;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 54px);
  box-sizing: border-box;
}
.ubuntu-w-head {
  flex-shrink: 0;
  height: 32px;
  background: #200518;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  user-select: none;
}
.ubuntu-w-btns { display: flex; gap: 6px; }
.ub-btn-close { width: 12px; height: 12px; border-radius: 50%; background: #e95420; cursor: pointer; }
.ub-btn-min { width: 12px; height: 12px; border-radius: 50%; background: #77216f; }
.ub-btn-max { width: 12px; height: 12px; border-radius: 50%; background: #5e2750; }
.ubuntu-w-title { color: #fff; font-size: 0.78rem; font-weight: 600; margin: 0 auto; }

.ubuntu-w-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ubuntu-w-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding: 8px 16px;
  background: #f8fafc;
}
.ubuntu-term-body {
  height: calc(100% - 32px);
  padding: 10px;
  background: #300a24;
  color: #fff;
  font-family: monospace;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ubuntu-term-log { flex: 1 1 auto; overflow-y: auto; white-space: pre-wrap; line-height: 1.4; }
.ubuntu-term-in-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ubuntu-prompt { color: #4af626; font-weight: 700; }
.ubuntu-term-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  color: #fff;
  font-family: monospace;
  font-size: 0.8rem;
  outline: none;
}

/* Windows Server 2019 Menedżer Serwera */
.win2019-server-manager {
  background: #f1f5f9;
  height: 680px;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sm-topbar {
  background: #1e3a8a;
  color: #fff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sm-brand { font-weight: 800; font-size: 0.9rem; }
.sm-menu { display: flex; gap: 16px; font-size: 0.8rem; color: #cbd5e1; }
.sm-layout {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
}
.sm-nav {
  width: 210px;
  background: #e2e8f0;
  border-right: 1px solid #cbd5e1;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.sm-nav-item {
  padding: 8px 16px;
  font-size: 0.82rem;
  color: #334155;
  cursor: pointer;
  font-weight: 600;
}
.sm-nav-item:hover { background: #cbd5e1; }
.sm-nav-item.active { background: #0284c7; color: #fff; }
.sm-main {
  flex: 1 1 auto;
  padding: 20px;
  background: #fff;
  overflow-y: auto;
}
.sm-tab-pane { display: none; }
.sm-tab-pane.active { display: block; }
.sm-hero-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.sm-hero-card h3 { margin: 0 0 6px; font-size: 1rem; color: #1e3a8a; }
.sm-hero-card p { margin: 0; font-size: 0.82rem; color: #64748b; }
.sm-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sm-tile {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
.sm-tile-head {
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.84rem;
  color: #0f172a;
}
.sm-tile-body {
  padding: 14px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #334155;
}
.sm-form-box {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.sm-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}
.sm-input {
  width: 220px;
  padding: 6px 10px;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
}
.sm-input:focus {
  border-color: #0284c7;
  outline: none;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}
.sm-btn-primary {
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
}

/* Linux Server Cockpit (styles defined in dedicated section) */
.cockpit-topbar {
  background: #1e293b;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #334155;
  font-size: 0.84rem;
}
.cp-logo { font-weight: 800; color: #38bdf8; }
.cockpit-body { padding: 20px; }
.cp-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.cp-metric-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px 18px;
}
.cp-m-lbl { font-size: 0.78rem; color: #94a3b8; }
.cp-m-val { font-size: 1.15rem; font-weight: 800; color: #38bdf8; margin-top: 4px; }
.cp-section {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 18px;
}
.cp-section h4 { margin: 0 0 10px; color: #f8fafc; }
.cp-conf-editor {
  width: 100%;
  background: #0f172a;
  color: #22c55e;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 10px;
  font-family: monospace;
  font-size: 0.82rem;
  outline: none;
}

/* UTK Lab */
.utk-hub-header {
  padding: 10px 16px;
  background: #0f172a;
  color: #fff;
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  gap: 12px;
}
.utk-hub-title { display: flex; align-items: center; gap: 12px; }
.utk-hub-icon { font-size: 1.8rem; }
.utk-hub-title h3 { margin: 0; font-size: 1.05rem; }
.utk-hub-title p { margin: 2px 0 0; font-size: 0.78rem; color: #94a3b8; }
.utk-tabs-bar { display: flex; gap: 8px; }
.btn-utk-tab {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #475569;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-utk-tab.active { background: #d97706; color: #fff; border-color: #f59e0b; }
.utk-content-viewport { padding: 20px; background: #f8fafc; min-height: 480px; }
.utk-card {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.utk-card-head {
  padding: 12px 16px;
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.utk-tester-units {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 24px;
  gap: 20px;
}
.utk-unit {
  background: #1e293b;
  color: #fff;
  padding: 16px;
  border-radius: 8px;
  width: 220px;
  border: 2px solid #475569;
}
.unit-title { font-weight: 800; font-size: 0.78rem; color: #f59e0b; margin-bottom: 12px; text-align: center; }
.unit-leds { display: flex; flex-direction: column; gap: 6px; }
.led-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.utk-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #475569;
}
.utk-led.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.utk-tester-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.utk-wire-schematic { font-weight: 700; color: #0f172a; font-size: 0.9rem; }
.utk-test-result { font-size: 0.8rem; font-weight: 700; color: #16a34a; }


.utk-mode-selector {
  display: flex;
  background: #e2e8f0;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}
.btn-utk-type {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  background: transparent;
  color: #475569;
  transition: all 0.2s ease;
}
.btn-utk-type:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.6);
}
.btn-utk-type.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}

/* Cable Selector */
.utk-cable-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.utk-cable-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.utk-cable-option:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}
.utk-cable-option.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
.utk-cable-badge-sample {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #64748b;
  display: inline-block;
  flex-shrink: 0;
}
.utk-cable-option.selected .utk-cable-badge-sample {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: inset 0 0 0 2px #fff;
}

/* Patch Panel 19in RACK styling */
.utk-patch-panel-casing {
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 8px;
  color: #fff;
  padding: 12px 14px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  height: 148px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.utk-patch-panel-casing.rack-mounted {
  border-color: #22c55e;
  box-shadow: 0 0 14px rgba(34,197,94,0.3);
}
.utk-rack-ears-left, .utk-rack-ears-right {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 18px;
  background: #334155;
  border: 2px solid #475569;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.utk-rack-ears-left { left: -18px; border-radius: 4px 0 0 4px; border-right: none; }
.utk-rack-ears-right { right: -18px; border-radius: 0 4px 4px 0; border-left: none; }
.utk-rack-bolt-hole {
  width: 8px;
  height: 8px;
  background: #0f172a;
  border-radius: 50%;
  border: 1px solid #64748b;
}
.utk-patch-panel-casing.rack-mounted .utk-rack-bolt-hole {
  background: #22c55e;
  box-shadow: 0 0 5px #22c55e;
}
.utk-pp-idc-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  background: #0f172a;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #334155;
  margin-top: 10px;
}
.utk-pp-idc-terminal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* CKE Evaluation Scorecard */
.utk-cke-card {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.utk-cke-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}
.utk-cke-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.80rem;
}
.utk-cke-item.fulfilled {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
  font-weight: 700;
}
.utk-cke-item.unfulfilled {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.utk-wire-strand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: #fff;
  color: #1e293b;
}
.utk-wire-strand:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.utk-wire-strand.selected {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  transform: scale(1.05);
}
.utk-wire-strand.used {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.utk-wire-color-sample {
  width: 28px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.25);
  display: inline-block;
  flex-shrink: 0;
}

/* Wire Strand Single Row Pool & Realistic 3D Cable Design */
.utk-wire-pool-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

.utk-wire-pool-grid .utk-wire-strand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 2px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #1e293b !important;
  position: relative !important;
  outline: none !important;
}

.utk-wire-pool-grid .utk-wire-strand:hover:not(.used) {
  transform: translateY(-2px) !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 10px -1px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,1) !important;
}

.utk-wire-pool-grid .utk-wire-strand.selected {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  box-shadow: 0 0 0 2px #2563eb, 0 4px 12px rgba(37,99,235,0.28) !important;
  transform: translateY(-2px) scale(1.02) !important;
  z-index: 2 !important;
}

.utk-wire-pool-grid .utk-wire-strand.used {
  opacity: 0.35 !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  border-style: dashed !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.utk-wire-visual-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 44px !important;
  height: 12px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

.utk-wire-visual-wrap .utk-wire-color-sample {
  flex: 1 1 auto !important;
  height: 9px !important;
  border-radius: 4px 0 0 4px !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  border-right: none !important;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.7), inset 0 -2px 2px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18) !important;
  display: inline-block !important;
}

.utk-wire-copper-core {
  width: 5px !important;
  height: 5px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 35%, #b45309 70%, #78350f 100%) !important;
  border: 1px solid #78350f !important;
  border-left: none !important;
  box-shadow: 0 0 3px rgba(245,158,11,0.6), inset 0 1px 1px rgba(255,255,255,0.8) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.utk-wire-strand-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  letter-spacing: -0.3px !important;
  line-height: 1.1 !important;
}

.utk-wire-strand.selected .utk-wire-strand-label {
  color: #1d4ed8 !important;
}

.utk-wire-check-pin {
  position: absolute !important;
  top: 2px !important;
  right: 3px !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  color: #16a34a !important;
  line-height: 1 !important;
}

/* Wires colors with realistic 3D & high-contrast stripe definition */
.wire-wo-bg { background: repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 3.5px, #f97316 3.5px, #f97316 7.5px) !important; }
.wire-o-bg { background: linear-gradient(180deg, #fb923c 0%, #ea580c 45%, #9a3412 100%) !important; }
.wire-wg-bg { background: repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 3.5px, #16a34a 3.5px, #16a34a 7.5px) !important; }
.wire-bl-bg { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 45%, #1e3a8a 100%) !important; }
.wire-wbl-bg { background: repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 3.5px, #2563eb 3.5px, #2563eb 7.5px) !important; }
.wire-g-bg { background: linear-gradient(180deg, #4ade80 0%, #16a34a 45%, #14532d 100%) !important; }
.wire-wbr-bg { background: repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 3.5px, #78350f 3.5px, #78350f 7.5px) !important; }
.wire-br-bg { background: linear-gradient(180deg, #a16207 0%, #78350f 45%, #451a03 100%) !important; }

/* RJ45 Plug Workbench */
.utk-rj45-workbench {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}
.utk-pool-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}
.utk-pool-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.utk-wires-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Plug Container */
.utk-plug-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  position: relative;
}
.utk-rj45-casing {
  width: 100%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 12px 14px;
  position: relative;
  height: 148px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.utk-rj45-casing.crimped {
  border-color: #22c55e;
  box-shadow: 0 0 14px rgba(34,197,94,0.3);
}
.utk-rj45-clip {
  width: 140px;
  height: 28px;
  background: rgba(203, 213, 225, 0.8);
  border: 2px solid #94a3b8;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin: 0 auto -2px;
}
.utk-contacts-head {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.utk-gold-contact {
  height: 18px;
  background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #78350f;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.utk-rj45-casing.crimped .utk-gold-contact {
  transform: translateY(3px);
  filter: brightness(1.1);
  box-shadow: 0 0 6px #f59e0b;
}
.utk-pin-slots-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 0;
}
.utk-pin-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.utk-pin-num {
  font-size: 0.68rem;
  font-weight: 800;
  color: #475569;
}
.utk-pin-slot {
  width: 100%;
  height: 46px;
  border: 2px dashed #94a3b8;
  border-radius: 4px;
  background: rgba(248, 250, 252, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.utk-pin-slot:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.utk-pin-slot.filled {
  border-style: solid;
  border-color: #64748b;
  background: #ffffff;
}
.utk-inserted-wire {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}
.utk-inserted-wire .wire-badge-code {
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(255,255,255,0.9);
  padding: 1px 3px;
  border-radius: 3px;
  color: #0f172a;
}
.utk-cable-jacket {
  width: 80%;
  height: 40px;
  background: #475569;
  border-radius: 0 0 6px 6px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Keystone Module Workbench */
.utk-keystone-stage {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px;
  background: #f8fafc;
}
.utk-keystone-unit {
  width: 100%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  padding: 10px 14px;
  position: relative;
  height: 148px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.utk-keystone-unit.punched {
  border-color: #22c55e;
  box-shadow: 0 0 14px rgba(34,197,94,0.3);
}
.utk-keystone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.utk-keystone-brand {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #0284c7;
  display: flex;
  align-items: center;
  gap: 6px;
}
.utk-keystone-banks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.utk-idc-bank {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px;
}
.utk-idc-bank-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.utk-idc-slots-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.utk-idc-slot-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}
.utk-idc-slot-item:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 6px rgba(37,99,235,0.12);
}
.utk-idc-legend-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid #94a3b8;
  font-size: 0.72rem;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.utk-idc-legend-sticker .pin-number {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 0.75rem;
  font-weight: 900;
  color: #0f172a;
  z-index: 2;
  text-shadow: 0 0 3px #ffffff;
}
.utk-idc-legend-sticker .legend-flags {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.65rem;
  font-weight: 900;
  color: #0f172a;
  z-index: 2;
  text-shadow: 0 0 3px #ffffff;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.utk-diag-split {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.utk-diag-6 { background: linear-gradient(135deg, #ea580c 50%, #16a34a 50%); } /* A: Orange, B: Green */
.utk-diag-3 { background: linear-gradient(135deg, #f97316 50%, #16a34a 50%); } /* A: W-Orange, B: W-Green */
.utk-diag-8 { background: #78350f; } /* Both: Brown */
.utk-diag-7 { background: repeating-linear-gradient(45deg, #78350f, #78350f 4px, #ffffff 4px, #ffffff 8px); } /* Both: W-Brown */
.utk-diag-1 { background: linear-gradient(135deg, #16a34a 50%, #ea580c 50%); } /* A: W-Green, B: W-Orange */
.utk-diag-2 { background: linear-gradient(135deg, #16a34a 50%, #ea580c 50%); } /* A: Green, B: Orange */
.utk-diag-4 { background: #2563eb; } /* Both: Blue */
.utk-diag-5 { background: repeating-linear-gradient(45deg, #2563eb, #2563eb 4px, #ffffff 4px, #ffffff 8px); } /* Both: W-Blue */

.utk-idc-slot-terminal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.utk-idc-v-clip {
  width: 22px;
  height: 28px;
  border-left: 3px solid #64748b;
  border-right: 3px solid #64748b;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.utk-idc-v-clip::after {
  content: '';
  width: 2px;
  height: 20px;
  background: #94a3b8;
}
.utk-idc-drop-zone {
  min-width: 140px;
  height: 36px;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.74rem;
  color: #64748b;
  cursor: pointer;
  background: #f8fafc;
  transition: all 0.2s ease;
}
.utk-idc-drop-zone:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.utk-idc-drop-zone.filled {
  border-style: solid;
  border-color: #475569;
  background: #ffffff;
}
.utk-keystone-unit.punched .utk-idc-drop-zone {
  pointer-events: none;
}
.utk-keystone-unit.punched .utk-idc-slot-item {
  border-color: #22c55e;
  background: #f0fdf4;
}

/* Tester Unit Redesign */
.utk-tester-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

/* =========================================================================
   AUTHENTIC PROFESSIONAL NETWORK CABLE TESTER (NS-468 & GRAPHIC BENCH)
   ========================================================================= */
.utk-tester-rig {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(180deg, #090d16 0%, #0f172a 100%);
  border-radius: 14px;
  border: 1px solid #1e293b;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.utk-tester-rig::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
}

.utk-tester-units-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
}

/* Hardware Device Enclosure */
.utk-tester-device {
  width: 250px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #334155;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
  user-select: none;
  overflow: hidden;
}

.utk-tester-top-jack {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  padding: 10px 14px 8px;
  border-bottom: 2px solid #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.utk-rj45-port-housing {
  width: 84px;
  height: 24px;
  background: #020617;
  border: 2px solid #475569;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.95);
}

.utk-rj45-port-pins {
  display: flex;
  gap: 3.5px;
}
.utk-rj45-port-pins span {
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  border-radius: 1px;
}

.utk-tester-faceplate {
  margin: 10px 12px 12px;
  background: #060a14;
  border-radius: 8px;
  border: 1.5px solid #1e293b;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.utk-tester-head {
  padding: 10px 12px;
  border-bottom: 1px solid #1e293b;
  text-align: center;
  background: linear-gradient(180deg, #172133 0%, #0b111e 100%);
}

.utk-tester-leds-stack {
  background: #03050a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  margin: 8px 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}

.utk-tester-led-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  color: #94a3b8;
  padding: 2.5px 6px;
  border-radius: 4px;
  transition: all 0.1s ease;
}

.utk-tester-led-item.active-scan {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.2);
}

.utk-tester-led-bulb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #334155 0%, #090d16 100%);
  border: 2px solid #475569;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.6);
  transition: all 0.08s ease;
  flex-shrink: 0;
}

.utk-tester-led-bulb.lit-green {
  background: radial-gradient(circle at 35% 35%, #bbf7d0 0%, #22c55e 55%, #15803d 100%) !important;
  border-color: #86efac !important;
  box-shadow: 0 0 12px #22c55e, 0 0 24px rgba(34,197,94,0.7), inset 0 1px 2px #ffffff !important;
}

.utk-tester-led-bulb.lit-amber {
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #f59e0b 55%, #b45309 100%) !important;
  border-color: #fde047 !important;
  box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245,158,11,0.7), inset 0 1px 2px #ffffff !important;
}

.utk-tester-led-bulb.lit-red {
  background: radial-gradient(circle at 35% 35%, #fecaca 0%, #ef4444 55%, #b91c1c 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 12px #ef4444, 0 0 24px rgba(239,68,68,0.7), inset 0 1px 2px #ffffff !important;
}

.utk-tester-switch-row {
  margin: auto 10px 10px;
  padding: 6px 10px;
  background: #03050a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Center Diagnostic Console */
.utk-tester-bridge {
  flex: 1 1 320px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(180deg, #131d2e 0%, #0c1322 100%);
  border: 1.5px solid #28374d;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

.utk-bus-lanes-wrap {
  background: #03050a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}

.utk-bus-lane {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  color: #64748b;
  padding: 0 4px;
  border-radius: 3px;
  transition: all 0.1s ease;
}

.utk-bus-lane-wire {
  flex: 1;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: all 0.1s ease;
}

.utk-bus-lane.active-lane {
  background: rgba(37, 99, 235, 0.15);
  color: #38bdf8;
  font-weight: 800;
}
.utk-bus-lane.active-lane .utk-bus-lane-wire {
  background: #2563eb;
  box-shadow: 0 0 10px #38bdf8;
}
.utk-bus-lane.active-lane .utk-bus-lane-wire::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 40px;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  animation: utkBusPulse 0.4s infinite linear;
}

@keyframes utkBusPulse {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(280px); }
}

.utk-diag-report-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #0f172a !important;
}
.utk-diag-report-box div {
  color: #334155 !important;
}
.utk-diag-report-box.pass {
  border-left: 6px solid #22c55e;
  background: #f0fdf4 !important;
  color: #14532d !important;
}
.utk-diag-report-box.pass div {
  color: #166534 !important;
}
.utk-diag-report-box.pass div:first-child {
  color: #15803d !important;
}
.utk-diag-report-box.warn {
  border-left: 6px solid #f59e0b;
  background: #fffbeb !important;
  color: #78350f !important;
}
.utk-diag-report-box.warn div {
  color: #92400e !important;
}
.utk-diag-report-box.warn div:first-child {
  color: #b45309 !important;
}
.utk-diag-report-box.fail {
  border-left: 6px solid #ef4444;
  background: #fef2f2 !important;
  color: #7f1d1d !important;
}
.utk-diag-report-box.fail div {
  color: #991b1b !important;
}
.utk-diag-report-box.fail div:first-child {
  color: #b91c1c !important;
}

/* ========================================================================== */
.win11-cmd-input,
.win11-cmd-input:focus,
.win11-cmd-wrap input.win11-cmd-input,
.win11-cmd-wrap input.win11-cmd-input:focus,
.ubuntu-term-input,
.ubuntu-term-input:focus,
.pc-cmd-input,
.pc-cmd-input:focus,
.vm-input,
.vm-input:focus,
.terminal-card input.terminal-input,
.terminal-card input.terminal-input:focus,
.terminal-card .terminal-input,
.terminal-card .terminal-input:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: #4ade80 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  caret-color: #4ade80 !important;
}

.win11-cmd-log,
.ubuntu-term-log,
.pc-cmd-window {
  background: #000000 !important;
  color: #f8fafc !important;
}

.win-inp-text,
.win-inp-text:focus,
.sm-input,
.sm-input:focus,
.nl-input,
.nl-input:focus,
.cp-input,
.cp-input:focus,
.win11-browser-bar input,
.win11-browser-bar input:focus {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  caret-color: #0f172a !important;
}

.win11-cmd-wrap input:focus,
.ubuntu-term-body input:focus,
.terminal-card input:focus,
.vm-terminal-screen input:focus,
.pc-cmd-window input:focus {
  background: transparent !important;
}

/* ==========================================================================
   NETLAB PRO · CISCO PACKET TRACER STYLE CANVAS & DEVICE PALETTE
   ========================================================================== */
.netlab-workspace {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 200px);
  min-height: 680px;
  background: #070d18;
  position: relative;
  overflow: hidden;
}

.netlab-canvas-container {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: #070d18;
  background-image: 
    radial-gradient(circle, rgba(56, 189, 248, 0.15) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px, 64px 64px, 64px 64px;
  user-select: none;
}

.netlab-svg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* NETLAB TOOLBAR: MODULAR TOOLBAR SYSTEM */
.netlab-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.netlab-tool-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  user-select: none;
}

.netlab-cable-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #0b1120;
  border-radius: 6px;
  padding: 2px;
  border: 1px solid #1e293b;
}

.btn-cable-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  padding: 3px 9px;
  height: 24px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}

.btn-cable-mode:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}

.btn-cable-mode .cable-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: #64748b;
  transition: all 0.15s ease;
}

.btn-cable-mode.mode-straight .cable-dot {
  background: #38bdf8;
}

.btn-cable-mode.mode-cross .cable-dot {
  background: #fb923c;
}

.btn-cable-mode.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.35);
}

.btn-cable-mode.active .cable-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

.btn-cable-mode.mode-cross.active {
  background: #ea580c;
  border-color: #fb923c;
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.35);
}

.btn-cable-mode.mode-cross.active .cable-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

.btn-cable-mode.mode-fiber .cable-dot {
  background: #06b6d4;
}

.btn-cable-mode.mode-fiber.active {
  background: #0891b2;
  border-color: #22d3ee;
  box-shadow: 0 1px 4px rgba(8, 145, 178, 0.35);
}

.btn-cable-mode.mode-fiber.active .cable-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

/* Tool Divider */
.netlab-tool-divider {
  width: 1px;
  height: 18px;
  background: #1e293b;
  margin: 0 2px;
}

/* Diagnostic Action Button: Ping Pair */
.netlab-toolbar .btn-netlab-ping-pair,
.netlab-toolbar .btn-netlab-ping-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.10);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 0 11px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.netlab-toolbar .btn-netlab-ping-pair:hover,
.netlab-toolbar .btn-netlab-ping-all:hover {
  background: rgba(16, 185, 129, 0.20);
  border-color: #34d399;
  color: #a7f3d0;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.netlab-toolbar .btn-netlab-ping-pair .tool-btn-icon,
.netlab-toolbar .btn-netlab-ping-all .tool-btn-icon {
  font-size: 0.85rem;
}

/* Clear Canvas Button: Sleek Ghost Reset */
.netlab-toolbar .btn-netlab-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #0f172a;
  color: #94a3b8;
  border: 1px solid #334155;
  padding: 0 10px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.netlab-toolbar .btn-netlab-clear:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.50);
  color: #f87171;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.18);
}

.netlab-toolbar .btn-netlab-clear .tool-btn-icon {
  font-size: 0.82rem;
}

.netlab-toolbar .btn-netlab-schemat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.netlab-toolbar .btn-netlab-schemat:hover {
  background: rgba(14, 165, 233, 0.24);
  border-color: #38bdf8;
  color: #f0f9ff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.netlab-toolbar .btn-netlab-schemat .tool-btn-icon {
  font-size: 0.82rem;
}

/* ==========================================================================
   NETLAB TOPOLOGY: AUTHENTIC RJ-45 DEVICE CARDS & DIRECT HARDWARE WIRING
   ========================================================================== */

.netlab-node.netlab-device-card {
  position: absolute;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid #334155;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.1) inset;
  padding: 8px 10px;
  user-select: none;
  z-index: 15;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-sizing: border-box;
}

.netlab-node.netlab-device-card:hover {
  z-index: 30;
  border-color: #38bdf8;
  box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25), 0 0 15px rgba(56, 189, 248, 0.15);
  transform: translateY(-2px);
}

.netlab-node.netlab-device-card.is-dragging {
  cursor: grabbing !important;
  opacity: 0.92;
  z-index: 60;
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
}

/* Wymiary kart urządzeń */
.netlab-device-card.netlab-pc1 {
  min-width: 225px;
}

.netlab-device-card.netlab-isp {
  min-width: 150px;
}

.netlab-device-card.netlab-printer {
  min-width: 140px;
}

.netlab-device-card.netlab-srv1 {
  min-width: 235px;
}

.netlab-device-card.netlab-ap {
  min-width: 165px;
}

.netlab-device-card.netlab-router {
  min-width: 325px;
}

.netlab-device-card.netlab-switch_s2008,
.netlab-device-card.netlab-switch {
  min-width: 320px;
}

.netlab-device-card.netlab-switch_s2216 {
  min-width: 320px;
}

/* Pasek wyboru systemu operacyjnego na karcie urządzenia */
.device-card-os-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 6px;
  padding: 3px;
  box-sizing: border-box;
}

.btn-card-os-toggle {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.70rem;
  font-weight: 600;
  padding: 3px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.btn-card-os-toggle:hover {
  background: rgba(30, 41, 59, 0.8);
  color: #f1f5f9;
}

.btn-card-os-toggle .os-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.btn-card-os-toggle .os-label {
  line-height: 1;
}

.btn-card-os-toggle.active.os-win {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35) 0%, rgba(3, 105, 161, 0.5) 100%);
  border-color: #0284c7;
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35), inset 0 0 2px rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

.btn-card-os-toggle.active.os-linux {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.35) 0%, rgba(194, 65, 12, 0.5) 100%);
  border-color: #ea580c;
  color: #fb923c;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.35), inset 0 0 2px rgba(255, 255, 255, 0.2);
  font-weight: 700;
}

/* Nagłówek urządzenia */
.device-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 5px;
}

.device-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.device-card-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.device-card-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.device-card-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.device-card-ip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: #38bdf8;
  font-weight: 600;
  line-height: 1.1;
}

.device-card-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.btn-dev-action {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 2px 5px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.btn-dev-action:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}

.btn-dev-action.btn-node-del:hover {
  background: #dc2626;
  border-color: #ef4444;
  color: #ffffff;
}

.btn-dev-action.btn-node-pulpit {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-family: 'JetBrains Mono', 'Segoe UI', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.1;
}

.btn-dev-action.btn-node-pulpit:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Panel gniazd RJ-45 (wygląd rackowego patch panela) */
.device-card-port-bay {
  background: #090e17;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

.device-card-port-bay.bay-2-rows {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px 4px;
}

/* Pojedynczy port RJ-45 */
.rj45-port-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}

.rj45-port-unit:hover {
  transform: translateY(-1px);
}

/* Dioda statusowa portu (LED) */
.rj45-port-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #334155;
  box-shadow: none;
  transition: all 0.2s ease;
}

.rj45-port-led.led-on {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e, 0 0 10px rgba(34, 197, 94, 0.9);
}

.rj45-port-led.led-blink {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: rj45-led-pulse 0.7s infinite alternate;
}

@keyframes rj45-led-pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Obudowa sprzętowa gniazda RJ-45 (8P8C) */
.rj45-socket-jack {
  width: 27px;
  height: 24px;
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border: 1.5px solid #475569;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 2px 2px;
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(255, 255, 255, 0.05);
  position: relative;
  transition: all 0.15s ease;
}

.rj45-socket-jack.jack-wan {
  border-color: #0284c7;
  background: linear-gradient(180deg, #0c2847 0%, #031326 100%);
}

.rj45-port-unit:hover .rj45-socket-jack {
  border-color: #38bdf8;
  background: #0f2744;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Stan zaznaczenia gniazda (rozpoczęcie wpinania kabla) */
.rj45-port-unit.is-selected .rj45-socket-jack {
  border-color: #f59e0b !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8), inset 0 0 6px rgba(245, 158, 11, 0.4) !important;
  animation: rj45-socket-glow 0.9s infinite alternate;
}

@keyframes rj45-socket-glow {
  from { border-color: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
  to { border-color: #fbbf24; box-shadow: 0 0 16px rgba(245, 158, 11, 1); }
}

/* 8 pinów kontaktowych we wnętrzu gniazda RJ-45 */
.rj45-pins-row {
  display: flex;
  gap: 1.2px;
  justify-content: center;
  width: 100%;
}

.rj45-pins-row span {
  width: 1px;
  height: 5px;
  background: #eab308;
  border-radius: 0.5px;
  opacity: 0.85;
}

/* Wycięcie na zatrzask wtyku RJ-45 na dole gniazda */
.rj45-clip-slot {
  width: 9px;
  height: 5px;
  background: #1e293b;
  border: 1px solid #334155;
  border-bottom: none;
  border-radius: 1px 1px 0 0;
  margin-top: auto;
}

/* Wpięty wtyk RJ-45 kabla sieciowego */
.rj45-inserted-plug {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 2.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.rj45-inserted-plug.plug-straight {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid #38bdf8;
}

.rj45-inserted-plug.plug-cross {
  background: linear-gradient(180deg, #f97316 0%, #c2410c 100%);
  border: 1px solid #fdba74;
}

.rj45-plug-clip {
  width: 5px;
  height: 11px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

/* Podpis portu (WAN, LAN1, P1, ETH0) */
.rj45-port-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
}

.rj45-port-name.name-wan {
  color: #38bdf8;
  font-weight: 800;
}

.rj45-port-unit.has-cable .rj45-port-name {
  color: #4ade80;
}

/* ==========================================================================
   NETLAB PRO · VERTICAL LEFT SIDEBAR PALETTE & EMPTY CANVAS WATERMARK
   ========================================================================== */
.netlab-sidebar-palette {
  width: 76px;
  flex: 0 0 76px;
  background: #090e1a;
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  gap: 8px;
  z-index: 35;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-palette-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2px;
}
.sidebar-palette-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

.sidebar-palette-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.sidebar-palette-btn {
  width: 64px;
  height: 60px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.sidebar-palette-btn:hover {
  background: #1e293b;
  border-color: #38bdf8;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}

.sidebar-palette-btn:active {
  transform: translateY(0) scale(0.97);
}

.sidebar-palette-btn .sp-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.sidebar-palette-btn .sp-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.sidebar-palette-btn:hover .sp-label {
  color: #38bdf8;
}

/* Empty Canvas Watermark */
.netlab-canvas-empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 8;
  padding: 16px 24px;
  max-width: 420px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

.netlab-canvas-empty-state h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 4px 0;
  letter-spacing: 0.01em;
}

.netlab-canvas-empty-state p {
  font-size: 0.82rem;
  font-weight: 400;
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

/* Dolny pasek stanu pracowni NetLab (pod planszą) */
.netlab-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #090e17;
  border-top: 1.5px solid #1e293b;
  padding: 6px 16px;
  min-height: 30px;
  font-size: 0.72rem;
  color: #64748b;
  user-select: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.netlab-bottom-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.70rem;
  color: #64748b;
}

.netlab-bottom-hint .hint-dot {
  color: #22c55e;
  font-size: 0.65rem;
}

.netlab-bottom-bar .netlab-canvas-watermark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  color: #64748b;
  letter-spacing: 0.03em;
  background: rgba(15, 23, 42, 0.7);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.netlab-bottom-bar .netlab-canvas-watermark b {
  color: #cbd5e1;
  font-weight: 600;
}

.netlab-bottom-bar .netlab-canvas-watermark .watermark-sep {
  color: #475569;
}

.netlab-bottom-bar .netlab-canvas-watermark .watermark-ver {
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.68rem;
}

/* ==========================================================================
   WINDOWS SERVER 2019 · MENEDŻER SERWERA, ROLE I KREATOR
   ========================================================================== */
.win2019-server-manager {
  background: #ffffff;
  color: #0f172a;
  height: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sm-topbar {
  background: #102a43;
  color: #ffffff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #0b1d30;
}
.sm-brand {
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-menu {
  display: flex;
  gap: 18px;
  font-size: 0.82rem;
}
.sm-menu-item {
  color: #cbd5e1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.sm-menu-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.sm-layout {
  display: flex;
  flex: 1 1 auto;
}
.sm-nav {
  width: 240px;
  background: #f1f5f9;
  border-right: 1px solid #cbd5e1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.sm-nav-group-title {
  padding: 8px 16px 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 0.84rem;
  color: #1e293b;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.1s;
}
.sm-nav-item:hover {
  background: #e2e8f0;
}
.sm-nav-item.active {
  background: #0284c7;
  color: #ffffff;
}
.sm-nav-item .role-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
}
.sm-nav-item .role-status-dot.active { background: #22c55e; }
.sm-nav-item .role-status-dot.inactive { background: #cbd5e1; }

.sm-main {
  flex: 1 1 auto;
  padding: 22px;
  background: #ffffff;
  overflow-y: auto;
}
.sm-page-head {
  margin-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
}
.sm-page-head h4 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-page-head p {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

/* Modal kreatora ról i funkcji */
.sm-wizard-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
.sm-wizard-modal[hidden],
.win11-window[hidden],
.ubuntu-window[hidden] {
  display: none !important;
}
.sm-wizard-box {
  background: #ffffff;
  width: 650px;
  max-width: 95%;
  border-radius: 10px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sm-wizard-head {
  background: #1e3a8a;
  color: #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.92rem;
}
.sm-wizard-body {
  padding: 20px;
  max-height: 480px;
  overflow-y: auto;
}
.sm-role-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.sm-role-option:hover {
  background: #f8fafc;
  border-color: #0284c7;
}
.sm-role-option input {
  margin-top: 3px;
  width: auto;
}
.sm-wizard-foot {
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================================
   LINUX SERVER (COCKPIT) · USŁUGI SAMBA, BIND9, SSH, DHCP, FTP
   ========================================================================== */
.cockpit-server-wrap {
  background: #0f172a;
  color: #f8fafc;
  height: 680px;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cp-topbar {
  background: #0b1120;
  padding: 10px 20px;
  border-bottom: 1px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cp-logo {
  font-weight: 800;
  font-size: 0.95rem;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-layout {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
}
.cp-sidebar {
  width: 220px;
  background: #090e1a;
  border-right: 1px solid #1e293b;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.cp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.84rem;
  color: #94a3b8;
  cursor: pointer;
  font-weight: 600;
}
.cp-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}
.cp-nav-item.active {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-left: 3px solid #38bdf8;
}
.cp-main {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: auto;
  background: #0f172a;
}
.cp-tab-pane {
  display: none;
}
.cp-tab-pane.active {
  display: block;
}
.cp-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.cp-service-badge.running {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.cp-service-badge.stopped {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.cp-editor-box {
  background: #020617;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}
.cp-textarea {
  width: 100%;
  background: transparent !important;
  color: #4ade80 !important;
  border: none !important;
  outline: none !important;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.5;
  resize: vertical;
}

/* =========================================================================
   ARKUSZ KALKULACYJNY (MICROSOFT EXCEL / LIBREOFFICE CALC)
   ========================================================================= */
.excel-app-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: #ffffff;
  color: #0f172a;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  user-select: none;
  border-radius: 6px;
  overflow: hidden;
}

.excel-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #107c41;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.excel-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.excel-app-icon {
  font-size: 1.15rem;
}

.excel-doc-name {
  color: #ffffff;
  letter-spacing: 0.2px;
}

.excel-save-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #f0fdf4;
}

.excel-window-ctrls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.excel-btn-tool {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.15s;
}

.excel-btn-tool:hover {
  background: rgba(255, 255, 255, 0.2);
}

.excel-btn-close:hover {
  background: #dc2626 !important;
}

.excel-ribbon {
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  padding: 6px 12px;
}

.excel-ribbon-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.ribbon-tab {
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  color: #475569;
  transition: all 0.15s;
}

.ribbon-tab.active {
  background: #ffffff;
  color: #107c41;
  border: 1px solid #cbd5e1;
  border-bottom: 2px solid #107c41;
}

.excel-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  background: #ffffff;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.excel-tool-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 12px;
  border-right: 1px solid #e2e8f0;
}

.excel-tool-group:last-child {
  border-right: none;
}

.tool-group-label {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-align: center;
}

.tool-btn-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.excel-btn-action {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.excel-btn-action:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.excel-btn-action.primary-c {
  background: #107c41;
  color: #ffffff;
  border-color: #0d6334;
}

.excel-btn-action.primary-c:hover {
  background: #0d6334;
}

.excel-tool-icon {
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  color: #334155;
  transition: all 0.15s;
}

.excel-tool-icon:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.excel-tool-icon.active {
  background: #dcfce7 !important;
  border-color: #107c41 !important;
  color: #107c41 !important;
  font-weight: bold;
}

.excel-color-pickers {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 6px;
  padding: 2px 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #94a3b8;
  cursor: pointer;
  transition: transform 0.1s;
}

.color-dot:hover {
  transform: scale(1.2);
}

.color-dot.dot-yellow { background: #fef08a; }
.color-dot.dot-green { background: #bbf7d0; }
.color-dot.dot-blue { background: #bae6fd; }
.color-dot.dot-gray { background: #e2e8f0; }
.color-dot.dot-white { background: #ffffff; }

.excel-formula-bar-container {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #cbd5e1;
  padding: 5px 10px;
  gap: 8px;
}

.excel-cell-address {
  width: 65px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  border-radius: 4px;
}

.excel-fx-icon {
  font-style: italic;
  font-weight: 800;
  color: #64748b;
  font-size: 0.95rem;
  padding: 0 4px;
}

.excel-formula-input {
  flex: 1 1 auto;
  height: 26px;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-size: 0.85rem !important;
  color: #0f172a !important;
  background: #ffffff !important;
}

.excel-formula-input:focus {
  border-color: #107c41 !important;
  outline: 1.5px solid #107c41 !important;
  background: #ffffff !important;
}

.excel-grid-container {
  flex: 1 1 auto;
  overflow: auto;
  background: #ffffff;
  max-height: 420px;
  position: relative;
}

.excel-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 0.82rem;
  background: #ffffff;
}

.excel-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  text-align: center;
  border: 1px solid #cbd5e1;
  height: 26px;
  min-width: 80px;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.78rem;
}

.excel-table th.col-hdr-0 {
  min-width: 42px;
  width: 42px;
  position: sticky;
  left: 0;
  z-index: 3;
}

.excel-table th.active-hdr {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #16a34a !important;
  font-weight: 800;
}

.excel-table td.row-hdr {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  text-align: center;
  border: 1px solid #cbd5e1;
  width: 42px;
  min-width: 42px;
  position: sticky;
  left: 0;
  z-index: 1;
  font-size: 0.78rem;
}

.excel-table td.row-hdr.active-hdr {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #16a34a !important;
  font-weight: 800;
}

.excel-cell {
  border: 1px solid #e2e8f0;
  padding: 4px 8px;
  height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: cell;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  position: relative;
  font-family: inherit;
}

.excel-cell.selected {
  outline: 2px solid #107c41 !important;
  outline-offset: -1px;
  z-index: 4;
}

.excel-cell.selected::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 6px;
  height: 6px;
  background: #107c41;
}

.excel-cell-input {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-align: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.excel-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #107c41;
  color: #ffffff;
  padding: 6px 14px;
  font-size: 0.78rem;
  border-top: 1px solid #0d6334;
}

.excel-status-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.excel-sheet-pill {
  background: #ffffff;
  color: #107c41;
  padding: 2px 10px;
  border-radius: 4px 4px 0 0;
  font-weight: 700;
  font-size: 0.74rem;
}

.excel-stat-msg {
  color: #dcfce7;
  font-size: 0.75rem;
}

.excel-status-right {
  display: flex;
  gap: 16px;
  font-size: 0.75rem;
}

.excel-status-right b {
  color: #fef08a;
  margin-left: 2px;
}

/* Modal wykresu Excel */
.excel-chart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.excel-chart-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  width: 640px;
  max-width: 95%;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  border: 1px solid #cbd5e1;
}

.excel-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.excel-chart-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}



/* =========================================================================
   AUTHENTIC WINDOWS 11 START MENU, NOTEPAD & EDGE WEB SIMULATOR
   ========================================================================= */
.win11-start-menu {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: 95%;
  background: rgba(30, 41, 59, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
  padding: 20px 24px 14px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: win11StartSlideUp 0.18s ease-out;
}

@keyframes win11StartSlideUp {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.win11-start-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 6px 14px;
}

.win11-start-search .search-ico {
  font-size: 0.95rem;
  opacity: 0.7;
}

.win11-start-search-input {
  flex: 1 1 auto;
  background: transparent !important;
  border: none !important;
  color: #f8fafc !important;
  font-size: 0.82rem !important;
  outline: none !important;
}

.win11-start-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.win11-start-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.win11-start-app-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.15s;
}

.win11-start-app-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.win11-start-app-item .start-app-ico {
  font-size: 1.4rem;
}

.win11-start-app-item .start-app-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1f5f9;
}

.win11-start-rec-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.win11-start-rec-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.15s;
}

.win11-start-rec-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.win11-start-rec-item .rec-ico {
  font-size: 1.25rem;
}

.win11-start-rec-item .rec-meta {
  display: flex;
  flex-direction: column;
}

.win11-start-rec-item .rec-meta b {
  font-size: 0.78rem;
  color: #f8fafc;
}

.win11-start-rec-item .rec-meta small {
  font-size: 0.7rem;
  color: #94a3b8;
}

.win11-start-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4px;
}

.win11-start-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.win11-start-user .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #fff;
}

.win11-start-user .user-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f1f5f9;
}

.win11-start-power {
  font-size: 1.1rem;
  color: #f87171;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.win11-start-power:hover {
  background: rgba(239, 68, 68, 0.2);
}

.win11-start-power-wrap {
  position: relative;
}

.win11-power-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 170px;
  background: rgba(30, 41, 59, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  backdrop-filter: blur(16px);
}

.power-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.80rem;
  color: #f1f5f9;
  cursor: pointer;
  transition: background 0.12s;
}

.power-menu-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* File Explorer Windows 11 Styling (PDF Page 11) */
.win11-explorer-win {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid #94a3b8;
}

.win11-nav-btn {
  background: none;
  border: none;
  font-size: 14px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: #475569;
  transition: background 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.win11-nav-btn:hover:not(:disabled) {
  background: #e2e8f0 !important;
  color: #0f172a;
}
.win11-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.win11-breadcrumb-link {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: #1e293b;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.12s;
}
.win11-breadcrumb-link:hover {
  background: #e2e8f0;
  color: #0284c7;
}

.explorer-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.12s;
  user-select: none;
}
.explorer-nav-item:hover {
  background: #f1f5f9;
}
.explorer-nav-item.active {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

.explorer-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s;
  box-sizing: border-box;
  background: #ffffff;
}
.explorer-file-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.explorer-file-item.selected {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.explorer-view-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.explorer-view-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 12px;
}
.explorer-view-icons .explorer-file-item {
  flex-direction: column;
  text-align: center;
  padding: 8px 4px;
}
.explorer-view-icons .explorer-file-item .file-ico {
  font-size: 32px;
  margin-bottom: 4px;
}
.explorer-view-icons .explorer-file-item .file-txt {
  font-size: 11px;
  word-break: break-word;
}
.explorer-view-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.explorer-view-list .explorer-file-item {
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* Settings App Windows 11 (PDF Pages 4, 5, 8) */
.win11-settings-win {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid #94a3b8;
}

.win-settings-tab:hover {
  background: #f1f5f9 !important;
}

.win-settings-tab.active {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-weight: 700 !important;
  border-left: 3px solid #0078d4;
}

/* Win11 Window Controls Header */
.win-ctrls {
  display: flex;
  align-items: center;
  gap: 0;
}

.win-ctrls button {
  background: transparent;
  border: none;
  color: #475569;
  font-size: 0.82rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}

.win-ctrls button:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

.win-ctrls .win11-w-close:hover {
  background: #e81123 !important;
  color: #ffffff !important;
}

.win11-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - 48px) !important;
  max-width: 100% !important;
  max-height: calc(100% - 48px) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 45 !important;
}

/* Edge Simulated Web Pages */
.edge-web-card {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.edge-web-card h4 {
  margin: 0 0 10px;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-edge-quick {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-edge-quick:hover {
  background: #0284c7;
  color: #ffffff;
}

.browser-home-tile {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.browser-home-tile:hover {
  transform: translateY(-2px);
  border-color: #0284c7 !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.16) !important;
}

.browser-home-tile:active {
  transform: translateY(0);
}

/* Active Cell Corner Dot (Excel / Calc) */
.excel-cell.selected {
  outline: 2px solid #107c41 !important;
  outline-offset: -1px;
  position: relative;
  z-index: 2;
}

.excel-cell.selected::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  background: #107c41;
  border: 1px solid #ffffff;
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
}

/* Active Row and Col Header */
.excel-table td.row-hdr.active-hdr {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-weight: 800;
}

/* Ubuntu Dock Running Dot Indicator */
.ubuntu-dock-icon {
  position: relative;
}

.ubuntu-dock-icon.has-running-dot::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #e95420;
  border-radius: 50%;
  box-shadow: 0 0 4px #e95420;
}

/* Linux Server Cockpit Gauges */
.cp-gauge-bar {
  width: 100%;
  height: 8px;
  background: #334155;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.cp-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #22c55e);
  border-radius: 4px;
  transition: width 0.3s;
}

/* Delete Row Item Button (Server Tables) */
.btn-del-row-item {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.12s;
}

.btn-del-row-item:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Formula Helper Pill */
.excel-fn-helper-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
  color: #1e293b;
  transition: all 0.12s;
}

.excel-fn-helper-pill:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.excel-fn-helper-pill b {
  color: #107c41;
  font-family: monospace;
}


/* Ubuntu Dock Position Fix */
.ubuntu-workspace {
  display: flex !important;
  position: relative !important;
  height: calc(100% - 28px) !important;
}
.ubuntu-dock {
  position: relative !important;
  z-index: 50 !important;
  width: 52px !important;
  flex-shrink: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
.ubuntu-desktop {
  flex: 1 1 auto !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

/* User management styling */
.users-table td {
  vertical-align: middle;
}
.recovery-key-inline {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  background: #f1f5f9;
  color: #0369a1;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
/* ---------- Modale Administracyjne Nauczycieli ---------- */
.teacher-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInModal 0.15s ease-out;
}
.teacher-modal-backdrop[hidden] {
  display: none !important;
}
.teacher-modal-dialog {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: scaleUpModal 0.15s ease-out;
}
@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleUpModal {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.modal-header h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  color: #0f172a;
}
.modal-desc {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}
.modal-close-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  transition: all 0.15s;
  flex-shrink: 0;
}
.modal-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.modal-body {
  padding: 20px 24px;
}
.modal-body label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: #1e293b;
  margin-bottom: 14px;
}
.modal-body label .req-star {
  color: #dc2626;
  font-weight: 700;
  margin-left: 3px;
}
.modal-body label input,
.modal-body label select {
  margin-top: 6px;
  width: 100%;
}
.modal-body .modal-note {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #475569;
  margin-bottom: 16px;
  line-height: 1.45;
}
.modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f8fafc;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Security alert box on login */
.account-security-alert {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  text-align: left;
}
.sec-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #991b1b;
  margin-bottom: 6px;
}
.sec-alert-title svg {
  flex-shrink: 0;
}
.sec-alert-text {
  font-size: 0.88rem;
  color: #7f1d1d;
  line-height: 1.45;
  margin: 0 0 12px 0;
}
.sec-alert-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 600;
}

/* =========================================================================
   PANEL I PASEK TESTOWANIA ADMINISTRATORA (BEZ OGRANICZEŃ)
   ========================================================================= */
.admin-exam-banner {
  background: linear-gradient(135deg, #090d16 0%, #1e1b4b 60%, #0f172a 100%);
  border: 1px solid #4338ca;
  border-radius: 12px;
  padding: 10px 18px;
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 8px 25px rgba(67, 56, 202, 0.25);
  position: relative;
  z-index: 20;
}
.admin-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-crown-icon {
  font-size: 1.4rem;
  background: rgba(99, 102, 241, 0.25);
  border: 1px solid #6366f1;
  border-radius: 8px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-banner-text {
  display: flex;
  flex-direction: column;
}
.admin-banner-text strong {
  font-size: 0.90rem;
  color: #c7d2fe;
  letter-spacing: 0.5px;
}
.admin-banner-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #475569;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-admin-pill:hover {
  background: #334155;
  color: #fff;
  border-color: #64748b;
  transform: translateY(-1px);
}
.btn-admin-pill.active {
  background: #4338ca;
  color: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}
#btnAdminStudentPreview.active {
  background: #d97706 !important;
  color: #fff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
}
form.student-preview-mode .utk-cke-card {
  display: none !important;
}
.btn-admin-pill.btn-admin-fill {
  background: #15803d;
  color: #fff;
  border-color: #22c55e;
}
.btn-admin-pill.btn-admin-fill:hover {
  background: #16a34a;
}
.btn-admin-pill.btn-admin-reset {
  background: #991b1b;
  color: #fff;
  border-color: #ef4444;
}
.btn-admin-pill.btn-admin-reset:hover {
  background: #b91c1c;
}
.btn-admin-pill.btn-admin-exit {
  background: #1e1b4b;
  color: #c7d2fe;
  border-color: #4f46e5;
}
.btn-admin-pill.btn-admin-exit:hover {
  background: #312e81;
  color: #fff;
}

/* Inspekcja klucza odpowiedzi w pytaniach */
.admin-key-badge {
  display: none;
  margin-left: auto;
  background: #166534;
  color: #4ade80;
  border: 1px solid #22c55e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.show-admin-key .answer[data-is-correct="1"] .admin-key-badge {
  display: inline-block;
}
.show-admin-key .answer[data-is-correct="1"] {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.12) !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}
.show-admin-key .answer[data-is-correct="1"] .letter {
  background: #16a34a !important;
  color: #fff !important;
}

.admin-q-inspector {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  background: #0f172a;
  border: 1px dashed #6366f1;
  border-radius: 8px;
  color: #e2e8f0;
}
.show-admin-key .admin-q-inspector {
  display: block;
}
.admin-inspector-head {
  font-size: 0.82rem;
  color: #a5b4fc;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   OFICJALNY KLUCZ OCENIANIA CKE (T / N) DLA EGZAMINATORA / NAUCZYCIELA
   ========================================================================== */
.admin-oke-key-drawer {
  background: #090d16;
  border: 2px solid #0284c7;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  animation: slideDownOke 0.25s ease-out;
}
@keyframes slideDownOke {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.oke-drawer-header {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  color: #ffffff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.oke-dh-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.badge-cke-official {
  background: #dc2626;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.oke-dh-title {
  font-size: 0.96rem;
  color: #f8fafc;
}
.badge-sheet-code {
  background: #0284c7;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.oke-dh-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.oke-live-counter {
  font-size: 0.84rem;
  color: #a7f3d0;
  font-weight: 600;
}
.oke-live-counter .cnt-t {
  color: #34d399;
  font-weight: 800;
  font-size: 0.95rem;
}
.oke-live-counter #oke_pct {
  color: #fbbf24;
  font-weight: 800;
}
.btn-oke-fill-all {
  background: #059669;
  color: #ffffff;
  border: 1px solid #10b981;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.80rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-oke-fill-all:hover {
  background: #10b981;
}
.btn-oke-close {
  background: rgba(0, 0, 0, 0.25);
  color: #e2e8f0;
  border: none;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-oke-close:hover {
  background: #dc2626;
  color: #fff;
}
.oke-drawer-body {
  max-height: 480px;
  overflow-y: auto;
  padding: 14px 18px;
}
.oke-result-section {
  margin-bottom: 16px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
}
.oke-res-title {
  background: #1e293b;
  color: #f8fafc;
  padding: 8px 14px;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #10b981;
}
.oke-res-badge {
  background: #047857;
  color: #ecfdf5;
  font-size: 0.70rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
}
.oke-res-weight {
  margin-left: auto;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
}
.oke-res-table-wrap {
  overflow-x: auto;
}
.oke-res-table {
  width: 100%;
  border-collapse: collapse;
}
.oke-res-table th {
  background: #0b1120;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-bottom: 1px solid #1e293b;
}
.oke-row {
  border-bottom: 1px solid #1e293b;
  transition: background 0.12s;
}
.oke-row:hover {
  background: rgba(30, 41, 59, 0.7);
}
.oke-cell-num {
  color: #38bdf8;
  font-size: 0.82rem;
  padding: 8px 10px;
}
.oke-cell-desc {
  color: #cbd5e1;
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 8px 12px;
}
.oke-cell-action {
  padding: 8px 10px;
}
.tn-btn-group {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #334155;
  background: #090d16;
}
.btn-tn {
  padding: 3px 12px;
  font-weight: 800;
  font-size: 0.82rem;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.15s;
}
.btn-tn.btn-t.active {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
}
.btn-tn.btn-n.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
}

/* Przyciski uruchamiania sandboxa w panelu nauczyciela */
.btn-admin-sandbox-launch {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35) !important;
  cursor: pointer;
}
.btn-admin-sandbox-launch:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  transform: translateY(-1px);
}
.btn-admin-sandbox-badge {
  background: #312e81 !important;
  color: #c7d2fe !important;
  border-color: #4f46e5 !important;
  font-weight: 600 !important;
}
.btn-admin-sandbox-badge:hover {
  background: #4338ca !important;
  color: #fff !important;
}

/* ==========================================================================
   PORTAL WWW CKE & ASYSTENT DIAGNOSTYKI SIECIOWEJ (EDGE / FIREFOX)
   ========================================================================== */
.cke-web-portal {
  background: #ffffff;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border-radius: 6px;
  overflow: hidden;
}
.cke-header {
  background: #0f2744;
  color: #ffffff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #c2410c;
}
.cke-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cke-logo-emblem {
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.1);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.cke-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cke-sub {
  font-size: 0.76rem;
  color: #94a3b8;
}
.cke-net-badge {
  text-align: right;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
}
.cke-net-badge.online {
  color: #4ade80;
}
.cke-net-badge small {
  font-size: 0.7rem;
  color: #cbd5e1;
  font-family: monospace;
}
.cke-nav {
  background: #1e3a8a;
  display: flex;
  padding: 0 16px;
  gap: 4px;
  overflow-x: auto;
}
.cke-nav-item {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 14px;
  transition: background 0.15s;
}
.cke-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.cke-nav-item.active {
  background: #ffffff;
  color: #1e3a8a;
}
.cke-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 20px;
  border-bottom: 1px solid #cbd5e1;
}
.cke-hero h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: #0f2744;
}
.cke-hero p {
  margin: 0 0 14px;
  font-size: 0.84rem;
  color: #475569;
}
.cke-success-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 12px 16px;
}
.cke-success-box b {
  color: #15803d;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 4px;
}
.cke-success-box p {
  color: #166534;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.5;
}
.cke-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
}
.cke-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
}
.cke-card h4 {
  margin: 0 0 10px;
  color: #1e3a8a;
  font-size: 0.88rem;
}
.cke-card ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.6;
}

/* Offline Screen */
.browser-offline-screen {
  padding: 24px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.offline-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}
.diag-checklist-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  text-align: left;
  margin-top: 16px;
}
.diag-checklist-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.diag-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.diag-check-item.ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.diag-check-item.err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.diag-check-item .check-ico {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
.diag-check-item.ok .check-ico { color: #16a34a; }
.diag-check-item.err .check-ico { color: #dc2626; }
.diag-check-item div b {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 2px;
}
.diag-check-item div span {
  font-size: 0.78rem;
  opacity: 0.95;
}

/* ---------- Modal & Widok: O projekcie, Zasady, Autor, Prywatność ---------- */
.about-modal-dialog {
  max-width: 780px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: fadeInModal 0.2s ease-out;
}
.about-modal-header {
  padding: 18px 24px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
}
.about-modal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-modal-brand h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}
.about-modal-brand p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}
.about-modal-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #94a3b8;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.about-modal-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1) !important;
}
.about-tabs {
  display: flex;
  align-items: stretch;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 16px;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  min-height: 48px;
}
.about-tab-btn {
  padding: 0 18px !important;
  height: 48px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #64748b !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.about-tab-btn:hover {
  color: #0f172a !important;
  background: rgba(15, 23, 42, 0.03) !important;
}
.about-tab-btn.active {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
  background: transparent !important;
}
.about-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #334155;
}
.about-tab-pane {
  display: none;
}
.about-tab-pane.active {
  display: block;
  animation: fadeInTab 0.15s ease-out;
}
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.about-prose h4 {
  font-size: 1.05rem;
  color: #0f172a;
  margin: 0 0 8px;
  font-weight: 700;
}
.about-prose p {
  margin: 0 0 14px;
  color: #475569;
}
.about-rule-box {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  padding: 12px 0;
  margin-bottom: 0;
}
.about-rule-box:last-child {
  border-bottom: 0;
}
.about-rule-box h5 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-rule-box p {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
}
.about-tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
@media (max-width: 580px) {
  .about-tech-grid { grid-template-columns: 1fr; }
}
.about-tech-item {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
}
.about-tech-item strong {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.about-tech-item span {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
  display: block;
}
.about-modal-footer {
  padding: 14px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* =========================================================================
   TRYB NAUCZYCIELA: INTERAKTYWNA INSPEKCJA WIRTUALNEJ MASZYNY UCZNIA
   ========================================================================= */

.teacher-vm-inspect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #1e293b 100%);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
  color: #f8fafc;
}

.teacher-vm-inspect-info {
  flex: 1;
}

.teacher-vm-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.teacher-vm-title {
  margin: 0 0 4px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.teacher-vm-desc {
  margin: 0;
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.teacher-override-alert {
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.15);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 0.84rem;
  color: #fbbf24;
}

.btn-teacher-inspect-vm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
}

.btn-teacher-inspect-vm:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
}

/* Modal inspekcji nauczyciela */
.modal-teacher-inspect {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: fadeInInspect 0.2s ease-out;
}

@keyframes fadeInInspect {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-inspect-backdrop {
  position: absolute;
  inset: 0;
}

.modal-inspect-window {
  position: relative;
  z-index: 2;
  width: 98vw;
  max-width: 1460px;
  height: 94vh;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-inspect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  gap: 16px;
}

.modal-inspect-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-inspect-badge {
  font-size: 0.70rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.m-inspect-heading {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
}

.m-inspect-heading b {
  color: #60a5fa;
}

.m-inspect-sub {
  font-size: 0.78rem;
  color: #94a3b8;
}

.modal-inspect-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.m-score-tag {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.88rem;
  color: #94a3b8;
}

.m-score-tag b {
  color: #22c55e;
  font-weight: 800;
}

.btn-close-inspect {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid #475569;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-close-inspect:hover {
  background: #dc2626;
  border-color: #ef4444;
  color: #ffffff;
}

/* Pasek szybkiej korekty w oknie inspekcji */
.modal-inspect-gradebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #172554;
  border-bottom: 2px solid #3b82f6;
  gap: 20px;
  flex-wrap: wrap;
}

.m-gradebar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.m-gb-icon {
  font-size: 1.5rem;
}

.m-gradebar-left strong {
  font-size: 0.95rem;
  color: #bfdbfe;
}

.m-gradebar-inputs {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.m-gb-pts-label,
.m-gb-cmt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #e2e8f0;
}

.inp-modal-pts {
  width: 80px !important;
  background: #0f172a !important;
  border: 1px solid #3b82f6 !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.inp-modal-pts:focus {
  outline: none;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
}

.m-gb-max {
  color: #93c5fd;
  font-weight: 700;
  font-size: 0.88rem;
}

.inp-modal-cmt {
  min-width: 280px;
  max-width: 440px;
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.88rem !important;
}

.btn-modal-save-grade {
  background: #22c55e !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35) !important;
  transition: all 0.15s ease !important;
}

.btn-modal-save-grade:hover {
  background: #16a34a !important;
  transform: translateY(-1px) !important;
}

.modal-inspect-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: relative;
  background: #f8fafc;
  padding: 0;
  display: block !important;
}

.modal-inspect-body .vm-lab-card {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 100%;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

.modal-inspect-body .vm-studio-navbar {
  position: sticky;
  top: 0;
  z-index: 30;
}

.modal-inspect-body .vm-panel-netlab {
  height: calc(94vh - 170px);
}

/* Wiersz oceny VM w głównym formularzu */
.vm-grade-row {
  margin-top: 14px;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

.vm-grade-notice {
  font-size: 0.88rem;
  color: #1e293b;
  margin-bottom: 10px;
  line-height: 1.4;
}

.tag-override {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 6px;
}

.tag-auto-match {
  display: inline-block;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #86efac;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 6px;
}

/* Karta bezprzewodowa WLAN w zatoce portów urządzenia */
.wlan-port-unit {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5px;
  transition: transform 0.15s ease;
}
.wlan-port-unit:hover {
  transform: translateY(-1px);
}
.wlan-chip-slot {
  width: 27px;
  height: 24px;
  background: linear-gradient(180deg, #1e1b4b 0%, #090d16 100%);
  border: 1.5px solid #4338ca;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}
.wlan-port-unit:hover .wlan-chip-slot {
  border-color: #818cf8;
  background: #2e1065;
  box-shadow: 0 0 8px rgba(129, 140, 248, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.8);
}
.wlan-port-unit.wlan-connected .wlan-chip-slot,
.wlan-port-unit.wlan-ap-unit .wlan-chip-slot {
  border-color: #22c55e;
  background: linear-gradient(180deg, #064e3b 0%, #022c22 100%);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.8);
}
.wlan-antenna-icon {
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.rj45-port-name.name-wlan-active {
  color: #4ade80 !important;
  font-weight: 700;
}

/* ISP Transmission & Data Flow Animation */
@keyframes ispPacketFlow {
  0% { left: -15%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}
@keyframes ispPulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.25); }
}
@keyframes ispArrowMove {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(4px); opacity: 1; }
}
.isp-pulse-green {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: ispPulseGreen 1.4s ease-in-out infinite;
}
.isp-arrow-stream {
  display: inline-block;
  letter-spacing: -2px;
  animation: ispArrowMove 1s ease-in-out infinite;
}
.isp-cable-track {
  position: relative;
  overflow: hidden;
}
.isp-packet {
  position: absolute;
  top: 1px;
  height: 5px;
  width: 24px;
  border-radius: 3px;
  background: linear-gradient(90deg, #38bdf8, #22c55e);
  box-shadow: 0 0 8px #38bdf8, 0 0 4px #22c55e;
  animation: ispPacketFlow 1.6s linear infinite;
}
.isp-pkt-1 { animation-delay: 0s; }
.isp-pkt-2 { animation-delay: 0.53s; }
.isp-pkt-3 { animation-delay: 1.06s; }

/* In-OS Wi-Fi Configuration (Windows & Ubuntu Desktop) */
.win11-tray-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.76rem;
  transition: all 0.15s ease;
}
.win11-tray-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.win11-wifi-flyout {
  position: absolute;
  bottom: 46px;
  right: 12px;
  width: 360px;
  max-height: 480px;
  background: #1c1c1c;
  border: 1px solid #383838;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  color: #f1f5f9;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  animation: winFlyoutIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes winFlyoutIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.win-flyout-header {
  padding: 12px 16px;
  background: #252525;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}
.win-flyout-body {
  padding: 12px 14px;
  overflow-y: auto;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.win-flyout-footer {
  padding: 8px 14px;
  background: #202020;
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.win-flyout-link-btn {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.76rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.win-wifi-item {
  background: #262626;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.win-wifi-item:hover {
  background: #2f2f2f;
  border-color: #4f4f4f;
}
.win-wifi-item.is-connected {
  background: #0f291e;
  border-color: #15803d;
}
.win-wifi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.win-wifi-expand {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #3a3a3a;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.win-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.win-toggle-switch input { opacity: 0; width: 0; height: 0; }
.win-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #4b5563;
  transition: .3s;
  border-radius: 20px;
}
.win-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
.win-toggle-switch input:checked + .win-toggle-slider {
  background-color: #2563eb;
}
.win-toggle-switch input:checked + .win-toggle-slider:before {
  transform: translateX(16px);
}

/* Ubuntu Quick Network Dropdown & Settings Tabs */
.ubuntu-tray-net-btn {
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.ubuntu-tray-net-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.ubuntu-net-dropdown {
  position: absolute;
  top: 30px;
  right: 10px;
  width: 290px;
  background: #2c001e;
  border: 1px solid #5e2750;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  color: #fff;
  z-index: 100;
  padding: 8px 0;
  font-size: 0.82rem;
}
.ubuntu-net-item {
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.ubuntu-net-item:hover {
  background: #77216f;
}
.ub-net-tabs {
  display: flex;
  background: #eaeaea;
  border-bottom: 1px solid #ccc;
}
.ub-net-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.78rem;
  color: #4b5563;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
.ub-net-tab-btn.active {
  color: #e95420;
  border-bottom-color: #e95420;
  background: #ffffff;
}
.wire-wifi-link {
  stroke-dasharray: 6 4;
  animation: wifiDash 1s linear infinite;
}
@keyframes wifiDash {
  to { stroke-dashoffset: -20; }
}
.win11-ncpa-win {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.win11-ncpa-win .win-ncpa-top-bar,
.win11-ncpa-win .win-ncpa-toolbar,
.win11-ncpa-win .win-ncpa-adapters-bar {
  flex-shrink: 0;
}

.win11-ncpa-win .win11-w-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.win-ncpa-top-bar {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #475569;
}

.win-ncpa-top-bar .ncpa-folder-ico {
  font-size: 13px;
}

.win-ncpa-top-bar .ncpa-path {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
}

.win-ncpa-adapters-bar {
  display: flex;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  padding: 8px 10px 0;
  gap: 8px;
}

.ncpa-adapter-chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.ncpa-adapter-chip:hover {
  background: #edf2f7;
}

.ncpa-adapter-chip.active {
  background: #ffffff;
  border-color: #94a3b8;
  border-bottom: 2px solid #0284c7;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}

.ncpa-adapter-chip .chip-ico {
  font-size: 20px;
  line-height: 1;
}

.ncpa-adapter-chip .chip-details {
  display: flex;
  flex-direction: column;
}

.ncpa-adapter-chip .chip-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
}

.ncpa-adapter-chip .chip-status {
  font-size: 9.5px;
  margin-top: 1px;
}

.chip-status.status-conn,
.hdr-status.status-conn {
  color: #16a34a;
  font-weight: 600;
}

.chip-status.status-disconn,
.hdr-status.status-disconn {
  color: #94a3b8;
}

.win-ncpa-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.win-ncpa-card-header .hdr-ico {
  font-size: 26px;
}

.win-ncpa-card-header .hdr-title {
  font-size: 12.5px;
  color: #0f172a;
}

.win-ncpa-card-header .hdr-model {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

.win-ncpa-card-header .hdr-status {
  font-size: 10.5px;
  margin-top: 2px;
}

.win-ncpa-prop-subhead {
  font-weight: 700;
  color: #0284c7;
  font-size: 11.5px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* ==========================================================================
   TP-LINK OMADA ER706W · PORTY SFP / USB / WAN & SCHEMAT TRYBU WAN MODE
   ========================================================================== */

/* --- KLATKA OPTYCZNA SFP (Small Form-factor Pluggable Cage 1:1) --- */
.rj45-socket-jack.jack-sfp {
  border: 1.5px solid #94a3b8;
  border-radius: 2px;
  background: #030712;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(148, 163, 184, 0.25);
  padding: 1.5px 2px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
}

.rj45-socket-jack.jack-sfp.jack-wan {
  border-color: #38bdf8;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.95), 0 0 6px rgba(56, 189, 248, 0.45);
}

.rj45-port-unit:hover .rj45-socket-jack.jack-sfp {
  border-color: #67e8f9;
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.6), inset 0 2px 5px rgba(0, 0, 0, 0.95);
}

.sfp-cage-frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

/* Blaszki sprężyste uziemienia EMI na górnej krawędzi klatki SFP */
.sfp-emi-fingers {
  display: flex;
  gap: 2px;
  justify-content: center;
  width: 100%;
  margin-top: -1px;
}

.sfp-emi-fingers span {
  width: 3px;
  height: 2px;
  background: #cbd5e1;
  border-radius: 0.5px;
  opacity: 0.85;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

/* Wnętrze komory optycznej SFP z dwoma otworami optycznymi LC (Tx i Rx) */
.sfp-opt-cavity {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 11px;
  background: #090d16;
  border: 1px solid #334155;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.sfp-opt-barrel {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sfp-opt-core {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  display: block;
}

/* Nadajnik optyczny Tx (Laser / LED - czerwony akcent diody) */
.sfp-opt-barrel.opt-tx .sfp-opt-core {
  background: radial-gradient(circle, #f87171 30%, #991b1b 90%);
  box-shadow: 0 0 3px rgba(248, 113, 113, 0.8);
}

/* Odbiornik optyczny Rx (Fotodioda PIN - błękitny akcent) */
.sfp-opt-barrel.opt-rx .sfp-opt-core {
  background: radial-gradient(circle, #38bdf8 30%, #075985 90%);
  box-shadow: 0 0 3px rgba(56, 189, 248, 0.7);
}

/* Metalowa rączka zatrzasku SFP (Bail Latch release handle) na dole */
.sfp-bail-latch {
  width: 100%;
  height: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
}

.sfp-latch-bar {
  width: 16px;
  height: 2px;
  background: linear-gradient(90deg, #64748b 0%, #cbd5e1 50%, #64748b 100%);
  border-radius: 1px;
  border: 0.5px solid #94a3b8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Wpięta wtyczka światłowodowa LC Duplex w port SFP */
.sfp-inserted-plug {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  z-index: 2;
}

/* Światłowód wielomodowy OM3/OM4 (turkusowy / aqua) */
.sfp-inserted-plug.plug-fiber-mm {
  background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%);
  border: 1px solid #22d3ee;
}

/* Światłowód jednomodowy SMF (żółty) */
.sfp-inserted-plug.plug-fiber-sm {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 100%);
  border: 1px solid #facc15;
}

.lc-duplex-body {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  margin-bottom: 1px;
}

.lc-ferrule {
  width: 4px;
  height: 8px;
  background: #f8fafc;
  border-radius: 1px;
  border: 1px solid #94a3b8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.lc-latch-clip {
  width: 10px;
  height: 3px;
  background: #f1f5f9;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* --- PORT USB 3.0 TYPE-A (Modem LTE) --- */
.rj45-socket-jack.jack-usb {
  border: 1.5px solid #64748b;
  border-radius: 2px;
  background: #020617;
  padding: 2px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.usb-jack-frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}

/* Charakterystyczny niebieski blok izolatora USB 3.0 */
.usb-blue-tongue {
  width: 20px;
  height: 6px;
  background: #0284c7;
  border-radius: 1px 1px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* 4 złote piny stykowe USB */
.usb-pins {
  display: flex;
  gap: 2.5px;
}

.usb-pins span {
  width: 1.5px;
  height: 4px;
  background: #facc15;
  border-radius: 0.5px;
}

/* Pustka pod języczkiem USB */
.usb-lower-cavity {
  width: 20px;
  height: 6px;
  background: #090d16;
  border: 1px solid #1e293b;
  border-top: none;
  border-radius: 0 0 1px 1px;
}

/* Wpięty modem LTE USB */
.usb-inserted-modem {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid #94a3b8;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.usb-modem-body {
  font-size: 7.5px;
  font-weight: 800;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}

/* Etykiety pod portami specjalnymi */
.rj45-port-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 14px;
}

.rj45-port-name .p-num {
  display: block;
  line-height: 1;
}

.rj45-port-name .p-sub {
  display: block;
  font-size: 6.5px;
  line-height: 1;
  margin-top: 1.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.rj45-port-name .sfp-tag {
  color: #38bdf8;
}

.rj45-port-name .usb-tag {
  color: #a855f7;
}

.rj45-socket-jack.jack-disabled {
  opacity: 0.45;
  filter: grayscale(1);
}

.rj45-port-name.name-disabled {
  color: #64748b;
}

/* TP-Link WAN Mode Schemat w oknie routera */
.tp-slide-lights-wrap {
  background: #0b111e;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 16px 20px;
  max-width: 580px;
  margin: 12px 0 16px 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}
.tp-slide-lights-table {
  width: 100%;
  border-collapse: collapse;
}
.tp-slide-lights-table td {
  text-align: center;
  vertical-align: middle;
  padding: 4px 6px;
}
.tp-slide-lights-table .desc-row td {
  font-size: 11px;
  font-weight: 800;
  height: 22px;
  font-family: 'JetBrains Mono', monospace;
}
.tp-slide-lights-table .desc-wan {
  color: #f43f5e;
}
.tp-slide-lights-table .desc-lan {
  color: #06b6d4;
}
.tp-slide-lights-table .desc-dis {
  color: #64748b;
}
.tp-slide-lights-table .icon-row td {
  height: 36px;
}
.light-icon {
  display: inline-block;
  width: 26px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid;
  position: relative;
  vertical-align: middle;
  transition: all 0.2s ease;
}
.light-icon.light-wan {
  background: linear-gradient(180deg, #db2777 0%, #9d174d 100%);
  border-color: #f43f5e;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
}
.light-icon.light-lan {
  background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%);
  border-color: #06b6d4;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.light-icon.light-disable {
  background: #334155;
  border-color: #64748b;
  opacity: 0.65;
}
.tp-slide-lights-table .num-row td {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  padding-top: 6px;
}
.tp-slide-lights-table .sub-label {
  font-size: 9px;
  color: #94a3b8;
  font-weight: normal;
  display: block;
}
.tp-lights-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #cbd5e1;
  flex-wrap: wrap;
}
.tp-lights-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tp-wan-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 6px 0 16px 0;
  width: 100%;
  max-width: 580px;
  box-sizing: border-box;
}
.tp-wan-chk-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #f1f5f9;
  user-select: none;
  min-width: 135px;
}
.tp-wan-chk-label.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ==========================================================================
   AUTHENTIC BIOS / UEFI APTIO SETUP UTILITY SIMULATOR
   ========================================================================== */
.utk-bios-wrapper {
  background: #0000a8;
  color: #ffffff;
  font-family: 'Courier New', Consolas, 'Lucida Console', Monaco, monospace;
  font-size: 13px;
  line-height: 1.4;
  border: 3px double #aaaaaa;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.utk-bios-header {
  background: #aaaaaa;
  color: #0000a8;
  font-weight: 900;
  padding: 5px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #555555;
  font-size: 12px;
}

.utk-bios-tabbar {
  display: flex;
  background: #0000a8;
  border-bottom: 2px solid #55aaff;
  padding: 6px 12px 0 12px;
  gap: 8px;
}

.utk-bios-tab {
  padding: 5px 16px;
  background: transparent;
  color: #c0c0c0;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  transition: all 0.15s ease;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.utk-bios-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.utk-bios-tab.active {
  background: #ffffff;
  color: #0000a8;
  font-weight: 900;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
}

.utk-bios-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  flex: 1;
  min-height: 400px;
  border-bottom: 2px solid #55aaff;
}

.utk-bios-left {
  padding: 14px 20px;
  border-right: 2px solid #55aaff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 440px;
}

.utk-bios-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 2px;
}

.utk-bios-row:hover,
.utk-bios-row.focused {
  background: #ffffff;
  color: #0000a8;
  font-weight: 800;
}

.utk-bios-row.section-title {
  color: #55ffff;
  font-weight: 900;
  cursor: default;
  background: transparent !important;
  margin-top: 10px;
  border-bottom: 1px dashed rgba(85, 255, 255, 0.4);
  padding-bottom: 3px;
  font-size: 12.5px;
}

.utk-bios-val {
  color: #55ffff;
  font-weight: 700;
}

.utk-bios-row:hover .utk-bios-val,
.utk-bios-row.focused .utk-bios-val {
  color: #0000a8;
}

.utk-bios-right {
  padding: 14px;
  background: rgba(0, 0, 80, 0.25);
  display: flex;
  flex-direction: column;
}

.utk-bios-help-box {
  border: 1px solid #55aaff;
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 120, 0.2);
}

.utk-bios-help-title {
  color: #ffff55;
  font-weight: 900;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(85, 170, 255, 0.5);
  padding-bottom: 5px;
  font-size: 13px;
}

.utk-bios-help-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #f1f5f9;
}

.utk-bios-footer {
  background: #aaaaaa;
  color: #000000;
  font-size: 11px;
  padding: 6px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #555555;
}

.utk-bios-key-pill {
  background: #0000a8;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 800;
  margin-right: 4px;
  cursor: pointer;
}

.utk-bios-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn 0.1s ease;
}

.utk-bios-modal {
  background: #0000a8;
  border: 3px double #aaaaaa;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.7);
  min-width: 340px;
  max-width: 480px;
  color: #ffffff;
}

.utk-bios-modal-head {
  background: #aaaaaa;
  color: #0000a8;
  font-weight: 900;
  padding: 4px 10px;
  text-align: center;
  font-size: 12px;
  border-bottom: 1px solid #000000;
}

.utk-bios-modal-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.utk-bios-modal-opt {
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
}

.utk-bios-modal-opt:hover,
.utk-bios-modal-opt.selected {
  background: #ffffff;
  color: #0000a8;
  font-weight: 900;
}







/* =========================================================================
   UTK - PRACOWNIA MONTAŻU I MODERNIZACJI PC W 3D (REAL MOTHERBOARD SUPERMICRO X13)
   ========================================================================= */

.utk-assembly-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #070b12;
  border-radius: 12px;
  padding: 18px;
  color: #f8fafc;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.7);
  font-family: inherit;
}

.utk-assembly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.utk-assembly-layout {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1150px) {
  .utk-assembly-layout {
    grid-template-columns: 1fr;
  }
}

/* 3D Workbench & Viewport */
.pc-bench-viewport {
  position: relative;
  min-height: 680px;
  background: radial-gradient(circle at 50% 35%, #182234 0%, #04060a 100%);
  border: 1px solid #334155;
  border-radius: 14px;
  overflow: hidden;
  perspective: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 15px;
  user-select: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.85);
}

.pc-bench-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* 3D Chassis Base */
.pc-chassis-3d {
  width: 720px;
  height: 570px;
  background: #111722;
  border-radius: 14px;
  border: 4px solid #27364b;
  box-shadow: 
    0 45px 85px rgba(0, 0, 0, 0.9),
    inset 0 0 0 2px #090e17,
    inset 0 0 40px rgba(0, 0, 0, 0.9);
  position: relative;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}

/* Real Motherboard PCB with Photo Texture */
.pc-mb-real-pcb {
  position: absolute;
  left: 20px;
  top: 18px;
  width: 480px;
  height: 460px;
  background-image: url('/assets/motherboard_x13.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  border: 2px solid #334155;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 10px rgba(0, 0, 0, 0.4);
  transform: translateZ(12px);
  transform-style: preserve-3d;
}

/* Hotspot targeting layers on the real motherboard */
.pc-mb-hotspot {
  position: absolute;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  transform-style: preserve-3d;
}

.pc-mb-hotspot.awaiting-target {
  outline: 2px dashed #38bdf8;
  animation: hotspotPulse 1.2s infinite ease-in-out;
  background: rgba(56, 189, 248, 0.25);
  cursor: crosshair;
}

@keyframes hotspotPulse {
  0% { box-shadow: 0 0 4px #38bdf8; background: rgba(56, 189, 248, 0.2); }
  50% { box-shadow: 0 0 20px #38bdf8, inset 0 0 10px #38bdf8; background: rgba(56, 189, 248, 0.4); }
  100% { box-shadow: 0 0 4px #38bdf8; background: rgba(56, 189, 248, 0.2); }
}

/* 3D CPU Cooler sitting on CPU socket */
.pc-real-cooler-3d {
  position: absolute;
  left: 45%;
  top: 40%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
  background: radial-gradient(circle, #222d3d 30%, #0d141e 100%);
  border: 3px solid #64748b;
  border-radius: 50%;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.85),
    0 0 0 2px #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  transform: translateZ(48px);
  pointer-events: none;
}
.pc-real-cooler-fan {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2px dashed #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-weight: 900;
  font-size: 10px;
  font-family: monospace;
}
.pc-real-cooler-fan.spinning {
  animation: fanSpin 0.5s linear infinite;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

/* 3D RAM Stick in Slot */
.pc-real-ram-3d {
  position: absolute;
  top: 29%;
  height: 55%;
  width: 14px;
  background: linear-gradient(180deg, #1e293b 0%, #0284c7 45%, #0f172a 100%);
  border: 1px solid #38bdf8;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.8);
  transform: translateZ(26px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: auto;
  cursor: pointer;
}
.pc-real-ram-3d.dimma2 { left: 79.5%; }
.pc-real-ram-3d.dimmb2 { left: 86.5%; }

/* 3D GPU in PCIe x16 Slot */
.pc-real-gpu-3d {
  position: absolute;
  left: 23%;
  top: 15%;
  width: 82px;
  height: 290px;
  background: linear-gradient(90deg, #182230 0%, #0a0f18 100%);
  border: 2px solid #475569;
  border-radius: 6px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.95);
  transform: translateZ(44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 10px 4px;
  z-index: 22;
  cursor: pointer;
}
.pc-real-gpu-fan {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px dashed #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #94a3b8;
  background: #0a0f18;
}
.pc-real-gpu-fan.spinning {
  animation: fanSpin 0.4s linear infinite;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}

/* 3D PCIe Wi-Fi 6 Card */
.pc-real-nic-3d {
  position: absolute;
  left: 17%;
  top: 18%;
  width: 44px;
  height: 180px;
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid #38bdf8;
  border-radius: 4px;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.85);
  transform: translateZ(32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 6px 2px;
  z-index: 21;
  cursor: pointer;
}

/* Right Side: Drive Bays & 2.5" SSD Tray */
.pc-chassis-side-cages {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 185px;
  height: 460px;
  background: #0f1520;
  border: 1px solid #222d3d;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateZ(8px);
  transform-style: preserve-3d;
}

/* Real 2.5" SSD Caddy */
.pc-real-ssd-tray {
  background: linear-gradient(135deg, #1a2332 0%, #0d131d 100%);
  border: 2px solid #334155;
  border-radius: 6px;
  padding: 12px;
  position: relative;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  transform: translateZ(18px);
}
.pc-real-ssd-tray.installed {
  border-color: #0284c7;
}

/* Physical SATA Cable connecting Drive to Motherboard */
.pc-cable-sata-data {
  position: absolute;
  left: -90px;
  bottom: 25px;
  width: 130px;
  height: 8px;
  background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.6);
  transform: rotate(28deg) translateZ(16px);
  pointer-events: none;
}

.pc-cable-sata-power {
  position: absolute;
  left: -70px;
  bottom: 12px;
  width: 100px;
  height: 6px;
  background: linear-gradient(90deg, #0f172a 0%, #334155 100%);
  border: 1px solid #64748b;
  border-radius: 3px;
  transform: rotate(32deg) translateZ(14px);
  pointer-events: none;
}

/* Component Rack on Right Column */
.pc-inventory-rack {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 720px;
  overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.pc-item-card {
  background: #090e17;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}
.pc-item-card:hover {
  border-color: #38bdf8;
  background: #0c1422;
}
.pc-item-card.selected {
  border-color: #38bdf8;
  background: #0c1a2e;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}
.pc-item-card.installed {
  border-color: #059669;
  background: #061c15;
}

.btn-item-action {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}
.btn-item-action.select {
  background: #0284c7;
  color: #fff;
}
.btn-item-action.select:hover {
  background: #0369a1;
}
.btn-item-action.selected {
  background: #38bdf8;
  color: #0f172a;
}
.btn-item-action.remove {
  background: #334155;
  color: #cbd5e1;
}
.btn-item-action.remove:hover {
  background: #dc2626;
  color: #fff;
}

/* 3D Camera Controls Toolbar */
.pc-camera-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #090d16;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 6px 12px;
}
.btn-camera-view {
  background: #172033;
  color: #94a3b8;
  border: 1px solid #28374f;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-camera-view:hover,
.btn-camera-view.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}

@keyframes fanSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* --- PC ASSEMBLY WORKBENCH SIMULATOR --- */
.pc-assembly-wrapper {
  background: #090d16;
  border-radius: 12px;
  border: 1px solid #1e293b;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  padding: 18px;
  color: #f1f5f9;
  font-family: 'Segoe UI', system-ui, sans-serif;
  margin-bottom: 24px;
}

.pc-assembly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e293b;
  margin-bottom: 16px;
}

.pc-assembly-title {
  font-size: 1.12rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #38bdf8;
  letter-spacing: -0.01em;
}

.pc-assembly-badge {
  background: #0284c7;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  text-transform: uppercase;
}

.pc-assembly-score-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  border: 1px solid #334155;
  padding: 6px 14px;
  border-radius: 8px;
}

.pc-score-pill {
  font-size: 0.95rem;
  font-weight: 800;
  color: #38bdf8;
  font-family: monospace;
}

/* 2-Column Responsive Layout */
.pc-workbench-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(360px, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .pc-workbench-layout {
    grid-template-columns: 1fr;
  }
}

/* Left: 3D Rig Viewport */
.pc-rig-viewport-container {
  background: #020617;
  border-radius: 12px;
  border: 1px solid #1e293b;
  position: relative;
  overflow: hidden;
  height: 680px;
  min-height: 680px;
  width: 100%;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

.pc-rig-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}

.pc-rig-toolbar > * {
  pointer-events: auto;
}

.pc-tilt-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  font-size: 0.72rem;
  color: #94a3b8;
}

.pc-tilt-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pc-tilt-btn:hover {
  color: #f8fafc;
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
}

.pc-tilt-btn.active {
  background: #0284c7;
  color: #fff;
  border-color: #38bdf8;
}

.pc-tilt-slider {
  width: 80px;
  height: 4px;
  cursor: pointer;
  accent-color: #38bdf8;
}

.pc-rot-val {
  font-family: monospace;
  font-weight: 700;
  color: #38bdf8;
  min-width: 28px;
}

.pc-view-btn-group {
  display: flex;
  gap: 4px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #334155;
}

.pc-view-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pc-view-btn:hover {
  color: #f8fafc;
  background: rgba(56, 189, 248, 0.15);
}

.pc-view-btn.active {
  background: #0284c7;
  color: #fff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
}

.pc-rig-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #0c1017;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-rig-canvas.angle-iso {
  background-image: url('/assets/rig_view_iso.jpg?v=20261015_09');
}

.pc-rig-canvas.angle-top {
  background-image: url('/assets/rig_view_top.jpg?v=20261015_09');
}

.pc-rig-canvas.angle-front {
  background-image: url('/assets/rig_view_front.jpg?v=20261015_09');
}

.pc-rig-canvas.angle-right {
  background-image: url('/assets/rig_view_right.jpg?v=20261015_09');
}

/* Real 3D WebGL Viewport Container */
.pc-rig-3d-viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  background: #0c1017;
  border-radius: 8px;
  overflow: hidden;
}

.pc-rig-3d-viewport canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* 3D Navigation Overlay Help Pill */
.pc-3d-help-badge {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 25;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.35);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.73rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.pc-3d-help-badge b {
  color: #38bdf8;
}

.pc-3d-hover-tag {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 25;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}

.pc-rig-canvas.zoom-mb {
  transform: rotateX(var(--rotX, 0deg)) scale(1.55) translate(8%, -6%);
}

.pc-rig-canvas.zoom-storage {
  transform: rotateX(var(--rotX, 0deg)) scale(1.55) translate(-22%, -14%);
}

/* Photorealistic Component Overlay Layers */
.pc-rig-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.pc-rig-layer.visible {
  opacity: 1;
}

/* Hotspots on top of the 3D rig: COMPLETELY UNGUIDED (NO HINTS, NO PULSING) */
.pc-rig-hotspot {
  position: absolute;
  border-radius: 6px;
  cursor: pointer;
  z-index: 20;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pc-rig-hotspot:hover {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.pc-rig-hotspot.info-only {
  z-index: 12;
}

/* Instruction Banner */
.pc-target-instruction-banner {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 9px 15px;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
  animation: bannerSlideUp 0.25s ease-out;
}

@keyframes bannerSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Right: Parts & Cabling Catalog */
.pc-parts-catalog-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-catalog-scroll-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 635px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 #0f172a;
}

.pc-catalog-scroll-block::-webkit-scrollbar {
  width: 6px;
}

.pc-catalog-scroll-block::-webkit-scrollbar-track {
  background: #0b0f19;
  border-radius: 4px;
}

.pc-catalog-scroll-block::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
  border: 1px solid #1e293b;
}

.pc-catalog-scroll-block::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
}

.pc-catalog-card {
  background: #0f172a;
  border-radius: 8px;
  border: 1px solid #1e293b;
  padding: 11px;
  transition: all 0.2s ease;
}

.pc-catalog-card.installed {
  border-color: #059669;
  background: rgba(6, 78, 59, 0.12);
}

.pc-catalog-card.selected {
  border-color: #38bdf8;
  background: rgba(14, 116, 144, 0.2);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}

.pc-catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.pc-catalog-title {
  font-weight: 800;
  font-size: 0.82rem;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pc-catalog-desc {
  font-size: 0.71rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-bottom: 8px;
}

.pc-catalog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.btn-catalog-action {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-catalog-action.select {
  background: #0284c7;
  color: #fff;
}

.btn-catalog-action.select:hover {
  background: #0369a1;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}

.btn-catalog-action.selected {
  background: #eab308;
  color: #0f172a;
}

.btn-catalog-action.remove {
  background: #dc2626;
  color: #fff;
}

.btn-catalog-action.remove:hover {
  background: #b91c1c;
}

/* POST Verification Box */
.pc-post-section {
  margin-top: 16px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 14px;
}

.btn-post-run {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #fff;
  border: none;
  font-weight: 800;
  font-size: 0.84rem;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.btn-post-run:hover {
  background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
  transform: translateY(-1px);
}

.pc-post-report {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  background: #020617;
  border: 1px solid #334155;
}

.pc-post-report.success {
  border-color: #059669;
  background: rgba(6, 78, 59, 0.2);
}

.pc-post-report.error {
  border-color: #dc2626;
  background: rgba(127, 29, 29, 0.2);
}

/* Product Thumbnail in Hardware Catalog */
.pc-catalog-thumb-box {
  position: relative;
  width: 100%;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background: #090d16;
  border: 1px solid #1e293b;
  margin-bottom: 8px;
}

.pc-catalog-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.pc-catalog-card:hover .pc-catalog-thumb-img {
  transform: scale(1.03);
}

.pc-catalog-status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.pc-catalog-status-badge.installed {
  background: rgba(6, 78, 59, 0.9);
  border-color: #10b981;
  color: #6ee7b7;
}

.pc-catalog-spec {
  font-size: 0.72rem;
  color: #38bdf8;
  font-weight: 700;
  margin: 3px 0 6px;
}

/* ==========================================================================
   DESKTOP OS INTERACTIVITY (DRAGGABLE WINDOWS, CONTEXT MENU, PERSONALIZATION)
   ========================================================================== */
.win11-w-head, .ubuntu-w-head {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.win11-w-head:active, .ubuntu-w-head:active {
  cursor: grabbing;
}
.win11-window, .ubuntu-window {
  transition: box-shadow 0.15s ease;
}
.win11-window:hover, .ubuntu-window:hover {
  box-shadow: 0 20px 45px rgba(0,0,0,0.6) !important;
}

/* Desktop right-click context menu */
.desktop-ctx-menu {
  position: absolute;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65);
  padding: 6px 0;
  min-width: 220px;
  font-size: 13px;
  color: #f1f5f9;
  animation: ctxFadeIn 0.15s ease-out;
}
@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.desktop-ctx-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
}
.desktop-ctx-menu .ctx-item:hover {
  background: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}
.desktop-ctx-menu .ctx-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 5px 0;
}

/* Personalizacja Wallpaper Cards */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.wallpaper-card {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  text-align: center;
  padding-bottom: 6px;
}
.wallpaper-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25);
}
.wallpaper-card.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}
.wallpaper-thumb {
  height: 70px;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.wallpaper-title {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  margin-top: 6px;
  padding: 0 4px;
}

/* --- CKE Task Tables and Student Interactive Inputs --- */
.cke-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 16px 0 20px 0;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.cke-task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: #0f172a;
}
.cke-task-table th {
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 2px solid #cbd5e1;
  border-right: 1px solid #e2e8f0;
  text-align: left;
}
.cke-task-table th:last-child {
  border-right: none;
}
.cke-task-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  vertical-align: middle;
}
.cke-task-table td:last-child {
  border-right: none;
}
.cke-task-table tr:hover td {
  background: #f8fafc;
}
.cke-task-table td.td-editable {
  padding: 4px 6px;
  background: #fdfdfd;
}
.student-table-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  font-size: 0.84rem;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.student-table-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
  background: #f0f9ff;
}

/* --- CKE Network Schematic Diagram Box --- */
.cke-schemat-box {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  margin: 16px 0 24px 0;
  padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.cke-schemat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cke-schemat-badge {
  background: #0284c7;
  color: #ffffff;
  font-size: 0.70rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cke-schemat-head strong {
  font-size: 0.88rem;
  color: #0f172a;
}
.cke-schemat-content {
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
}
.cke-schemat-img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  transition: transform 0.2s ease;
  cursor: zoom-in;
}
.cke-schemat-img:hover {
  transform: scale(1.01);
}

/* ==========================================================================
   INTERAKTYWNA KARTA OCENY CKE (T / N DLA EGZAMINATORA I UCZNIA)
   ========================================================================== */
.oke-rubric-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.oke-rubric-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 12px;
  border-bottom: 2px solid #cbd5e1;
}
.oke-rubric-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.86rem;
  vertical-align: middle;
}
.rubric-row {
  transition: background-color 0.15s ease;
}
.rubric-row:hover {
  background-color: #f8fafc;
}
.rubric-row.row-passed {
  background-color: #f0fdf4 !important;
}
.rubric-row.row-failed {
  background-color: #fef2f2 !important;
}
.rubric-row.row-passed td {
  border-bottom-color: #bbf7d0;
}
.rubric-row.row-failed td {
  border-bottom-color: #fecaca;
}

/* Official CKE Rubric Card: Read-only report view (Podgląd raportu CKE) */
.badge-tn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 46px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  user-select: none;
  line-height: 1;
}
.badge-tn .badge-tn-icon {
  font-size: 0.85rem;
  font-weight: 900;
}
.badge-tn.badge-t {
  background: #dcfce7;
  color: #15803d;
  border: 1.5px solid #86efac;
  box-shadow: 0 1px 2px rgba(22, 101, 52, 0.08);
}
.badge-tn.badge-n {
  background: #fee2e2;
  color: #b91c1c;
  border: 1.5px solid #fca5a5;
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.08);
}

.rubric-row.row-passed {
  background: #f0fdf4 !important;
}
.rubric-row.row-failed {
  background: #fff5f5 !important;
}
.rubric-row:hover {
  filter: brightness(0.98);
}

/* Examiner Rubric Toolbar: Report mode */
.examiner-rubric-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.rubric-summary-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  padding: 5px 12px;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.3;
}
.pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.pill-dot.dot-t {
  background: #16a34a;
}
.pill-dot.dot-n {
  background: #dc2626;
}
.stat-pill.stat-t {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.stat-pill.stat-n {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.stat-pill.stat-pct {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  font-weight: 700;
}
.stat-pill.stat-verdict-pass {
  background: #ecfdf5;
  color: #065f46;
  border: 1.5px solid #6ee7b7;
  font-weight: 700;
  margin-left: auto;
}
.stat-pill.stat-verdict-fail {
  background: #fff1f2;
  color: #9f1239;
  border: 1.5px solid #fecdd3;
  font-weight: 700;
  margin-left: auto;
}

/* =========================================================================
   INF.03 STUDIO: SPLIT MODE (CODE EDITOR + LIVE WEB BROWSER SIDE-BY-SIDE)
   ========================================================================= */
.vm-lab-card.vm-split-mode {
  display: flex;
  flex-direction: column;
}

.vm-lab-card.vm-split-mode .vm-studio-navbar {
  flex: 0 0 auto;
}

.vm-lab-card.vm-split-mode .vm-panel-editor,
.vm-lab-card.vm-split-mode .vm-panel-browser {
  display: flex !important;
}

@media (min-width: 992px) {
  .vm-lab-card.vm-split-mode {
    position: relative;
    overflow: hidden;
  }
  .vm-lab-card.vm-split-mode > .vm-panel-editor {
    width: 50% !important;
    float: left;
    height: calc(100vh - 220px);
    min-height: 560px;
    border-right: 2px solid #334155;
  }
  .vm-lab-card.vm-split-mode > .vm-panel-browser {
    width: 50% !important;
    float: right;
    height: calc(100vh - 220px);
    min-height: 560px;
  }
}

.btn-gimp-transparent {
  background: #0284c7;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-gimp-transparent:hover {
  background: #0369a1;
}

.vm-editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.vm-editor-tab.active {
  background: #0f172a;
  color: #38bdf8;
  border-color: #38bdf8;
  font-weight: bold;
}
.vm-editor-tab .tab-close {
  opacity: 0.6;
  font-size: 11px;
}
.vm-editor-tab .tab-close:hover {
  opacity: 1;
  color: #ef4444;
}

.vm-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.vm-tree-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.vm-tree-item.active {
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
}

.cke-tests-filter-bar #tests_search_input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
  background: #ffffff !important;
}
/* ==========================================================================
   SYSTEM PROJEKTOWY UX/UI — UJEDNOLICENIE KOLORÓW, TYPOGRAFII, HIERARCHII
   ORAZ ERGONOMII PRACOWNI EGZAMINACYJNEJ I WIDOKU MOBILNEGO
   ========================================================================== */

/* 1. Usunięcie zbędnych dekoracji, kolorowych pasków i poświat */
.top-accent-line,
.card-accent-bar,
.rules-header-card::before,
.eyebrow-dot,
.vm-tab-icon,
.os-hub-icon,
.sheet-toggle-icon,
.admin-crown-icon {
  display: none !important;
}

/* 2. Karty, kontenery i narożniki */
.card,
.entry-card,
.rules-card,
.student-Lookup-card,
.testcard,
.cke-briefing-card,
.cke-files-guide-card,
.cke-schemat-box,
.review-code-box,
.review-email-box,
.exam-split-breakdown,
.teacher-cke-rubric-wrap {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  background: #ffffff;
}

.card {
  padding: 20px 24px;
}

.entry-card {
  padding: 24px 28px !important;
}

.card-header {
  text-align: left !important;
  margin-bottom: 18px !important;
}

.card-header.center {
  text-align: left !important;
}

.card-header h1 {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.015em !important;
}

.card-desc {
  font-size: 0.9rem !important;
  color: #475569 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* 3. Formularze i pola wejściowe */
input:not([type="checkbox"]):not([type="radio"]):not(.vm-input):not(.terminal-input):not(.win11-cmd-input):not(.ubuntu-term-input):not(.pc-cmd-input):not(.browser-url-input),
select,
textarea:not(.vm-editor-textarea):not(.pma-sql-input) {
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.92rem;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not(.vm-input):not(.terminal-input):not(.win11-cmd-input):not(.ubuntu-term-input):not(.pc-cmd-input):not(.browser-url-input):focus,
select:focus,
textarea:not(.vm-editor-textarea):not(.pma-sql-input):focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
}

.codeinput {
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
}

.entry-divider {
  margin: 18px 0 !important;
}

.student-Lookup-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 16px !important;
}

.lookup-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.lookup-icon {
  color: #475569 !important;
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  padding: 2px 0 0 0 !important;
  box-shadow: none !important;
}

/* 4. Hierarchia przycisków: jeden główny akcent (#2563eb), spokojne przyciski pomocnicze */
.button,
button.primary,
button.secondary,
button.danger,
.primary-btn,
.outline-btn,
.btn-tc-results,
.btn-tc-test,
#finishBtn,
.btn-finish-nav,
#ovStartBtn,
#ovWarnBtn,
#ovConfirmYes,
#ovConfirmNo,
.linkbtn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
  padding: 8px 14px;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

button.primary,
.button.primary,
.primary-btn,
#finishBtn,
.btn-finish-nav,
#ovStartBtn,
#ovWarnBtn,
#ovConfirmYes,
.btn-tc-results {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

button.primary:hover,
.button.primary:hover,
.primary-btn:hover,
#finishBtn:hover,
.btn-finish-nav:hover,
#ovStartBtn:hover,
#ovWarnBtn:hover,
#ovConfirmYes:hover,
.btn-tc-results:hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

button.secondary,
.button.secondary,
.outline-btn,
.btn-tc-test,
#ovConfirmNo {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
}

button.secondary:hover,
.button.secondary:hover,
.outline-btn:hover,
.btn-tc-test:hover,
#ovConfirmNo:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
  text-decoration: none !important;
}

button.danger,
.button.danger,
.linkbtn.danger {
  background: #ffffff !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  box-shadow: none !important;
}

button.danger:hover,
.button.danger:hover,
.linkbtn.danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

button.big,
.button.big {
  padding: 10px 18px !important;
  font-size: 0.94rem !important;
}

/* 5. Spokojny pasek administratora na stronie głównej */
.admin-quick-test-banner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid #2563eb !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

.admin-qt-header {
  margin-bottom: 10px !important;
}

.admin-qt-title-wrap h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 2px 0 !important;
}

.admin-qt-title-wrap p {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

.admin-qt-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 0.86rem !important;
}

.btn-qt-launch {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-qt-launch:hover {
  background: #1d4ed8 !important;
}

.btn-qt-Secondary {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
}

.btn-qt-Secondary:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 6. Karta zasad przed sprawdzianem (?view=rules) */
.rules-header-card {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 18px 22px !important;
}

.rules-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 6px 0 4px !important;
}

.exam-part-banner {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid #2563eb !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  margin: 12px 0 16px !important;
  box-shadow: none !important;
}

.exam-part-banner strong {
  color: #0f172a !important;
  font-size: 0.88rem !important;
}

.exam-part-banner p {
  color: #475569 !important;
  font-size: 0.82rem !important;
}

.rules-stat-item {
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}

.stat-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
}

.rules-alert-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 3px solid #d97706 !important;
  color: #92400e !important;
}

.rules-alert-info {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 3px solid #475569 !important;
  color: #334155 !important;
}

/* 7. Ujednolicone odznaki kwalifikacji wg branż CKE, typów i statusów */
.tc-qual-pill,
.qual-badge,
.tag.qual-inf02,
.tag.qual-inf03,
.tag.qual-inf04,
.badge-qual-tag {
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.25;
}
.qual-branch-inf02, .tag.qual-inf02, .badge.qual-inf02 { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.qual-branch-inf03, .tag.qual-inf03, .tag.qual-inf04, .badge.qual-inf03, .badge.qual-inf04 { background: #eef2ff !important; color: #4338ca !important; border: 1px solid #c7d2fe !important; }
.qual-branch-ele { background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.qual-branch-elm, .tag.qual-elm03, .badge.qual-elm03 { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }
.qual-branch-mot { background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
.qual-branch-spl { background: #f0fdfa !important; color: #0f766e !important; border: 1px solid #99f6e4 !important; }
.qual-branch-aud { background: #fdf2f8 !important; color: #be185d !important; border: 1px solid #fbcfe8 !important; }
.qual-branch-eka { background: #f0f9ff !important; color: #0369a1 !important; border: 1px solid #bae6fd !important; }
.qual-branch-bud { background: #fefce8 !important; color: #854d0e !important; border: 1px solid #fef08a !important; }
.qual-branch-hgt { background: #f7fee7 !important; color: #3f6212 !important; border: 1px solid #d9f99d !important; }
.qual-branch-med { background: #ecfeff !important; color: #0e7490 !important; border: 1px solid #a5f3fc !important; }
.qual-branch-gen { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }

.badge-Part-prac,
.badge-Part-theo,
.badge-cke-tag,
.tag.tag-practice,
.tag.tag-theory,
.tag.tag-mixed,
.badge.tag-practice,
.badge.tag-theory,
.badge.tag-mixed,
.qpart-badge,
.qpart-badge.part-prac,
.qpart-badge.part-theo {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

/* Statusy semantyczne: zielony (otwarty/zaliczony), czerwony (zablokowany/niezaliczony), pomarańczowy (weryfikacja/ostrzeżenie) */
.badge.green,
.status-open-pill {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.badge.red {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.badge.yellow,
.badge.orange {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.badge.muted,
.status-closed-pill {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* 8. Panel nauczyciela: pasek narzędzi, wyszukiwarka, filtry i karty sprawdzianów */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px !important;
}

.bar h1 {
  font-size: 1.45rem !important;
  margin: 0 !important;
}

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px !important;
}

.cke-tests-filter-bar {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
}

.filter-tab,
.filter-tab.tab-qual-inf02,
.filter-tab.tab-qual-inf03,
.filter-tab.tab-qual-inf04 {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.filter-tab:hover,
.filter-tab.tab-qual-inf02:hover,
.filter-tab.tab-qual-inf03:hover,
.filter-tab.tab-qual-inf04:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

.filter-tab.active,
.filter-tab.tab-qual-inf02.active,
.filter-tab.tab-qual-inf03.active,
.filter-tab.tab-qual-inf04.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.tests {
  gap: 14px !important;
}

.testcard {
  padding: 16px 18px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s ease !important;
}

.testcard:hover {
  border-color: #cbd5e1 !important;
  transform: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

.testcard h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 6px 0 8px !important;
}

.testcard h2 a {
  color: #0f172a !important;
}

.testcard h2 a:hover {
  color: #2563eb !important;
}

.tc-code-pill {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.tc-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.btn-tc-results,
.btn-tc-test {
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-align: center;
  box-shadow: none !important;
}

.tc-admin-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
}

.tc-admin-tools .button,
.tc-admin-tools button,
.tc-admin-tools a.button {
  padding: 4px 8px !important;
  font-size: 0.74rem !important;
  border-radius: 5px !important;
  flex: 1 1 auto !important;
  text-align: center !important;
  justify-content: center !important;
}

/* 9. Pracownia egzaminacyjna (?view=exam) — maksymalizacja miejsca na zadanie i narzędzia */
main.wrap.examwrap {
  max-width: 1580px !important;
  padding: 8px 14px 20px !important;
}

/* Zwarty pasek administratora w widoku egzaminu */
.admin-exam-banner {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 36px !important;
}

.admin-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.admin-banner-text strong {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.01em !important;
}

.admin-banner-tools {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.btn-admin-pill {
  background: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
  border-radius: 4px !important;
  padding: 3px 9px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-admin-pill:hover {
  background: #475569 !important;
  color: #ffffff !important;
}

.btn-admin-pill.btn-admin-fill {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* Zwarty nagłówek egzaminu (.examtop i .examtop-practical) */
.examtop,
.examtop-practical {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 7px 12px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 42px !important;
}

.prac-top-main {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.prac-title-text {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.prac-pts-badge,
.qpts.prac-pts-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  box-shadow: none !important;
}

.prac-who-meta,
.prac-who-meta b {
  font-size: 0.8rem !important;
  color: #334155 !important;
}

.prac-top-meters,
.examtop .meters {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.examtop .pill,
.examtop-practical .pill {
  font-size: 0.75rem !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

.examtop .timer,
.examtop-practical .timer {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.85rem !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  background: #0f172a !important;
  color: #ffffff !important;
}

.btn-sheet-toggle {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-sheet-toggle:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* Zwarty pasek danych dostępowych i przeorganizowana treść zadania (.prac-sheet-body) */
.prac-sheet-drawer.open {
  background: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
  padding: 10px 14px !important;
}

.cke-schemat-box {
  margin: 0 0 8px 0 !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.cke-schemat-head {
  margin-bottom: 6px !important;
  padding-bottom: 4px !important;
  font-size: 0.82rem !important;
}

.cke-schemat-content {
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cke-schemat-img {
  max-height: 155px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.qmedia,
.prac-sheet-body .qmedia {
  margin: 8px 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.qmedia img,
.prac-sheet-body img {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.cke-files-guide-card {
  margin: 0 0 8px 0 !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
}

.prac-sheet-body {
  padding: 4px 0 6px !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

.cke-briefing-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 7px 12px;
  margin-bottom: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #334155;
}

.cke-briefing-bar-label {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cke-briefing-bar-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.cke-cred-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cred-inline-os {
  color: #0f172a;
  font-weight: 700;
}

.cred-inline-k {
  color: #64748b;
  font-size: 0.76rem;
}

.cke-cred-sep {
  color: #cbd5e1;
  font-weight: 400;
}

.cred-copy-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 8px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  font-size: 0.78rem !important;
  cursor: pointer;
}

.cred-copy-pill:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

.cred-copy-pill .cred-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #0f172a;
}

.cred-copy-pill .copy-hint {
  font-size: 0.68rem;
  font-weight: 600;
  color: #2563eb;
}

/* Kontener kroków zadania */
.cke-steps-container {
  display: block;
  font-size: 0.89rem;
  line-height: 1.52;
  color: #1e293b;
}

/* Karta pojedynczego kroku (KROK 1, KROK 2...) */
.cke-step-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  margin-top: 10px;
}

.cke-step-card:first-child {
  margin-top: 0;
}

.cke-step-card .cke-step-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  background: #f1f5f9 !important;
  border-left: 3px solid #2563eb !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
}

.cke-step-badge {
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  flex-shrink: 0;
}

.cke-step-title {
  margin: 0 !important;
  font-size: 0.91rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
}

.cke-step-body {
  padding: 9px 14px 11px !important;
  font-size: 0.89rem !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
}

/* Lista punktowana wewnątrz kroku zadania */
.cke-task-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cke-task-list + .cke-table-section,
.cke-task-list + .cke-table-wrapper,
.cke-task-list + .rich-h4 {
  margin-top: 10px !important;
}

.cke-task-li {
  position: relative;
  padding-left: 16px !important;
  margin: 0 !important;
  color: #1e293b !important;
  font-size: 0.89rem !important;
  line-height: 1.48 !important;
  max-width: 115ch;
}

.cke-task-li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.56em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2563eb;
}

.cke-task-subli {
  padding-left: 32px !important;
  font-size: 0.855rem !important;
  color: #334155 !important;
}

.cke-task-subli::before {
  left: 18px;
  top: 0.62em;
  width: 5px;
  height: 1.5px;
  border-radius: 1px;
  background: #64748b;
}

/* Wyróżnienia nazw wierszy / kolumn i parametrów w treści zadania */
.cke-term {
  font-style: normal;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  border-bottom: 1px dashed #94a3b8;
  padding: 0 2px;
}

.prac-sheet-body code {
  display: inline !important;
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

/* Zintegrowana sekcja tabeli (nagłówek tabeli + tabela bez pustej przerwy) */
.cke-table-section {
  margin: 10px 0 6px !important;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.cke-table-section + .cke-table-section {
  margin-top: 10px !important;
}

.cke-table-caption,
.prac-sheet-body .rich-h4 {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

.cke-table-section .cke-table-wrapper {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.prac-sheet-body .cke-table-wrapper {
  margin: 6px 0 8px 0;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-shadow: none !important;
}

.prac-sheet-body .cke-task-table {
  font-size: 0.83rem !important;
}

.prac-sheet-body .cke-task-table th {
  padding: 6px 10px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 0.78rem !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

.prac-sheet-body .cke-task-table td {
  padding: 5px 10px !important;
  line-height: 1.4 !important;
}

.prac-sheet-body .student-table-input {
  padding: 4px 8px !important;
  font-size: 0.82rem !important;
  min-height: 28px !important;
}

/* Karta pytania praktycznego i pasek zakładek symulatora */
.card.question.is-practical-card {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

.vm-lab-card {
  margin: 8px 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}

.vm-studio-navbar {
  padding: 6px 10px !important;
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
  gap: 8px !important;
}

.vm-studio-tab-btn {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  gap: 4px !important;
}

.os-hub-header {
  padding: 6px 12px !important;
  min-height: 40px !important;
}

.os-hub-title h3 {
  font-size: 0.85rem !important;
  margin: 0 !important;
}

.os-hub-title p {
  display: none !important;
}

.btn-os-device-tab {
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 5px !important;
}

/* 10. Tabele i zestawienia wyników */
table.tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.86rem;
}

table.tbl th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 9px 12px !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

table.tbl td {
  padding: 9px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a;
  vertical-align: middle;
}

/* 11. Dopracowanie widoku telefonu (Mobile Responsiveness & Ergonomics) */
@media (max-width: 768px) {
  .top-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .brand {
    gap: 8px !important;
  }

  .brand-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .brand-name {
    font-size: 1rem !important;
  }

  .brand-sub {
    font-size: 0.338rem !important;
  }

  .brand-tag {
    display: none !important;
  }

  .top-nav {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .nav-pill {
    padding: 5px 9px !important;
    font-size: 0.76rem !important;
    border-radius: 5px !important;
  }

  main.wrap,
  main.wrap.examwrap {
    padding: 10px 10px 24px !important;
  }

  .card,
  .entry-card {
    padding: 16px 14px !important;
  }

  /* Czytelne pola formularzy na telefonie (zapobiega auto-zoomowi iOS) */
  input:not([type="checkbox"]):not([type="radio"]):not(.vm-input):not(.terminal-input):not(.browser-url-input),
  select,
  textarea:not(.vm-editor-textarea):not(.pma-sql-input) {
    font-size: 16px !important;
    min-height: 40px;
  }

  /* Pasek narzędzi nauczyciela na telefonie */
  .bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .toolbar .button {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    text-align: center;
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }

  /* Poziome przewijanie zakładek filtrów i zakładek pracowni */
  .cke-filter-tabs,
  .vm-studio-tabs,
  .utk-tabs-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
    gap: 6px !important;
    max-width: 100%;
  }

  .cke-filter-tabs .filter-tab,
  .vm-studio-tabs .vm-studio-tab-btn,
  .utk-tabs-bar .btn-utk-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Karty sprawdzianów na telefonie */
  .tc-footer-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tc-footer-actions .btn-tc-results,
  .tc-footer-actions .btn-tc-test {
    width: 100% !important;
  }

  /* Pracownia egzaminacyjna na telefonie */
  .admin-exam-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .admin-banner-tools {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
  }

  .btn-admin-pill {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .examtop,
  .examtop-practical {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .prac-top-meters,
  .examtop .meters {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .btn-sheet-toggle {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }

  .vm-studio-navbar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 6px 8px !important;
  }

  .vm-lab-actions {
    margin-left: 0 !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Poprawne przewijanie tabel i okien modalnych na telefonie */
  .table-responsive,
  .pma-table-responsive,
  .oke-res-table-wrap,
  .teacher-rubric-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  table.tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .cke-modal-card,
  .netlab-device-modal,
  .modal-inspect-window {
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* Dopasowanie stanowisk montażu okablowania UTK (Koniec A i Koniec B) oraz widoku podzielonego (Split View) */
.card.question.vm-split-screen {
  grid-template-columns: minmax(310px, 32%) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.card.question.vm-split-screen .qhead {
  padding: 7px 14px !important;
}

.card.question.vm-split-screen .prac-sheet-drawer,
.card.question.vm-split-screen .vm-lab-card {
  max-height: calc(100vh - 140px) !important;
  height: calc(100vh - 140px) !important;
  min-height: 500px !important;
}

.card.question.vm-split-screen .prac-sheet-drawer {
  padding: 10px 12px !important;
}

.card.question.vm-split-screen .prac-sheet-drawer .qbody,
.card.question.vm-split-screen .prac-sheet-drawer .prac-sheet-body {
  padding: 4px 2px !important;
}

.card.question.vm-split-screen .cke-cred-sep {
  display: none !important;
}

.card.question.vm-split-screen .cke-briefing-bar-items {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
}

.card.question.vm-split-screen .vm-studio-navbar {
  padding: 4px 8px !important;
  gap: 4px 6px !important;
  flex-wrap: nowrap !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
}

.card.question.vm-split-screen .vm-studio-navbar .vm-badge-os {
  display: none !important;
}

.card.question.vm-split-screen .vm-studio-navbar .vm-studio-tabs {
  flex: 0 1 auto !important;
  width: auto !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.card.question.vm-split-screen .vm-studio-tab-btn {
  padding: 4px 7px !important;
  font-size: 0.69rem !important;
  white-space: nowrap !important;
}

.card.question.vm-split-screen .vm-lab-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
  padding-top: 0 !important;
}

.card.question.vm-split-screen .vm-lab-actions button {
  padding: 3px 6px !important;
  font-size: 0.67rem !important;
  height: auto !important;
  white-space: nowrap !important;
  gap: 3px !important;
}

/* Dopasowanie Mapy sieci (NetLab) w widoku podzielonym */
.card.question.vm-split-screen .vm-panel-netlab.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.netlab-topbar {
  padding: 4px 8px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.netlab-toolbar {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

.card.question.vm-split-screen .netlab-tool-label,
.card.question.vm-split-screen .netlab-tool-divider {
  display: none !important;
}

.netlab-toolbar .btn-cable-mode {
  padding: 2px 5px !important;
  height: 22px !important;
  font-size: 0.63rem !important;
  white-space: nowrap !important;
}

.netlab-toolbar .btn-netlab-ping-pair,
.netlab-toolbar .btn-netlab-ping-all,
.netlab-toolbar .btn-netlab-clear,
.netlab-toolbar .btn-netlab-schemat {
  padding: 0 5px !important;
  height: 22px !important;
  font-size: 0.63rem !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

.netlab-toolbar-right {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
}

.netlab-status-badge {
  height: 20px !important;
  padding: 0 5px !important;
  font-size: 0.61rem !important;
  white-space: nowrap !important;
}

.card.question.vm-split-screen .netlab-workspace {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

.card.question.vm-split-screen .netlab-canvas-container {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

.netlab-sidebar-palette {
  width: 66px !important;
  flex: 0 0 66px !important;
  padding: 5px 3px !important;
  gap: 3px !important;
}

.sidebar-palette-items {
  gap: 4px !important;
}

.sidebar-palette-btn {
  width: 56px !important;
  height: 44px !important;
  padding: 2px 2px !important;
  gap: 2px !important;
  border-radius: 7px !important;
}

.sidebar-palette-btn .sp-icon {
  font-size: 1.1rem !important;
}

.sidebar-palette-btn .sp-label {
  font-size: 0.55rem !important;
  max-width: 52px !important;
}

/* Dopasowanie stanowisk montażu okablowania UTK (Koniec A i Koniec B) */
.utk-hub-header,
.os-hub-header {
  padding: 5px 10px !important;
  min-height: 34px !important;
  flex-shrink: 0 !important;
}

.utk-hub-header .btn-utk-tab {
  padding: 4px 10px !important;
  font-size: 0.74rem !important;
}

.utk-content-viewport {
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}

.utk-card-head {
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.utk-card-head > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.utk-card-head > div:last-child {
  flex-shrink: 0 !important;
}

.utk-unified-body {
  padding: 10px !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.utk-unified-body > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.utk-unified-body > div:nth-child(2) > div {
  min-width: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.utk-unified-body > div:nth-child(2) > div > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.utk-unified-body > div:nth-child(2) > div > div:first-child > div:first-child {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.utk-mode-selector {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.utk-mode-selector .btn-utk-type {
  flex: 1 1 0% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 5px 6px !important;
  font-size: 0.70rem !important;
  white-space: nowrap !important;
}

.utk-patch-panel-casing {
  margin: 0 6px !important;
  width: auto !important;
  padding: 8px !important;
}

.utk-pp-idc-strip {
  gap: 3px !important;
  padding: 5px 4px !important;
}

.utk-contacts-head,
.utk-pin-slots-row {
  gap: 3px !important;
}

.utk-pin-slot {
  min-width: 0 !important;
  width: 100% !important;
}

.utk-rack-ears-left {
  left: -6px !important;
  width: 6px !important;
}

.utk-rack-ears-right {
  right: -6px !important;
  width: 6px !important;
}

.utk-keystone-banks {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px !important;
}

.utk-idc-bank {
  min-width: 0 !important;
}

.utk-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 5px !important;
}

.utk-action-row > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.utk-action-row button {
  padding: 5px 8px !important;
  font-size: 0.69rem !important;
  white-space: nowrap !important;
}

.utk-cable-selector-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.utk-cable-option {
  padding: 8px 10px !important;
}

@media (max-width: 1024px) {
  .utk-unified-body > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  .utk-cable-selector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- Panel administracyjny i środowisko A/B ---------- */
.adm-header {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.adm-header-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.adm-header-sub {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}
.adm-ver-pill {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
}
.adm-commit-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 5px;
}
.adm-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 0;
}
.adm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.adm-tab:hover {
  color: #0f172a;
  border-bottom-color: #94a3b8;
  text-decoration: none;
}
.adm-tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  font-weight: 700;
}
.adm-tab-count {
  background: #dc2626;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1080px) {
  .adm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .adm-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.adm-kpi-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 16px;
}
.adm-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.adm-kpi-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-top: 3px;
}
.adm-kpi-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}
.adm-console {
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.55;
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid #1e293b;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 340px;
  overflow-y: auto;
}
.adm-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 768px) {
  .adm-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Środowisko A/B */
.ab-staging-banner {
  background: #1e293b;
  color: #f8fafc;
  padding: 6px 18px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 2px solid #d97706;
}
.ab-staging-banner a {
  color: #e2e8f0;
  text-decoration: none;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid #475569;
  font-size: 11.5px;
}
.ab-staging-banner a:hover {
  background: #334155;
  text-decoration: none;
}
.ab-staging-banner a.ab-back-btn {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
  font-weight: 600;
}
.ab-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ab-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.ab-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.ab-card-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #64748b;
}
.ab-meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 12px;
}
.ab-meta-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.ab-meta-table td:first-child {
  color: #64748b;
  width: 150px;
  font-weight: 500;
}
.ab-checks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ab-check-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
}
.ab-check-box.ok {
  border-left: 3px solid #16a34a;
}
.ab-check-box.fail {
  border-left: 3px solid #dc2626;
}
.ab-check-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 3px;
}
.ab-check-detail {
  font-size: 11.5px;
  color: #64748b;
}
.ab-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ab-editor-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #0f172a;
  color: #cbd5e1;
  padding: 8px 14px;
  border-radius: 6px 6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.ab-editor-textarea {
  width: 100%;
  min-height: 440px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid #0f172a;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 14px;
  resize: vertical;
  tab-size: 4;
}
.ab-diff-pre {
  margin: 10px 0 0;
  padding: 12px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  overflow-x: auto;
  max-height: 300px;
  line-height: 1.45;
}

/* ===== A/B Workspace Sub-Navigation, Database Studio & AI Panel ===== */
.ab-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.ab-subnav-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ab-subnav-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ab-subnav-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ab-subnav-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.ab-subnav-badge {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.2);
}
.ab-subnav-btn.active .ab-subnav-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.ab-studio-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ab-studio-layout.with-ai {
  grid-template-columns: 250px minmax(0, 1fr) 360px;
}
@media (max-width: 1180px) {
  .ab-studio-layout,
  .ab-studio-layout.with-ai {
    grid-template-columns: 1fr;
  }
}

.ab-sidebar-panel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
.ab-sidebar-head {
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ab-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #334155;
  margin: 0;
}
.ab-db-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.ab-db-switch button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-align: center;
}
.ab-db-switch button.active-b {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ab-db-switch button.active-a {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}

.ab-table-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 520px;
  overflow-y: auto;
}
.ab-table-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  color: #334155;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.ab-table-item:hover {
  background: #f8fafc;
  color: #0f172a;
}
.ab-table-item.active {
  background: #eff6ff;
  color: #1d4ed8;
  border-left-color: #2563eb;
  font-weight: 600;
}
.ab-table-cnt {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
}

.ab-sql-box {
  width: 100%;
  min-height: 115px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 10px 12px;
  resize: vertical;
}
.ab-grid-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  max-height: 480px;
  overflow-y: auto;
}
.ab-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ab-data-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ab-data-table th:hover {
  background: #f1f5f9;
}
.ab-data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-data-table tr:hover td {
  background: #f8fafc;
}
.ab-null-val {
  color: #94a3b8;
  font-style: italic;
}

.ab-ai-panel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ab-ai-head {
  padding: 10px 14px;
  background: #0f172a;
  color: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ab-ai-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.ab-ai-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.ab-ai-mode-btn {
  appearance: none;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: left;
}
.ab-ai-mode-btn.active {
  background: #1e293b;
  color: #ffffff;
  border-color: #1e293b;
}
.ab-ai-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-ai-output {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #1e293b;
  max-height: 440px;
  overflow-y: auto;
  line-height: 1.5;
}
.ab-ai-code {
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 8px 0;
  white-space: pre-wrap;
}
.ab-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ab-chip {
  appearance: none;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: #334155;
  cursor: pointer;
}
.ab-chip:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ab-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ab-modal-backdrop[hidden] {
  display: none !important;
}
.ab-modal-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
}
.ab-modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ab-modal-body {
  padding: 16px;
  overflow-y: auto;
}
.ab-modal-foot {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =========================================================
   Rozszerzenia Panelu Ucznia, Nauczyciela i Administratora
   ========================================================= */

/* Monitor i odznaki w tabeli prób */
.badge.badge-navback {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}
.tag-pass {
  display: inline-block;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.tag-fail {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.mon-severe-note {
  color: #991b1b;
  font-weight: 600;
  background: #fef2f2;
  padding: 2px 6px;
  border-radius: 4px;
  border-left: 3px solid #dc2626;
}

/* ---------- Panel Ucznia (stu-*) ---------- */
.stu-pagehead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.stu-id-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stu-login-pill {
  font-size: 12px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2px 8px;
  border-radius: 4px;
}
.stu-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.stu-recovery-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.stu-recovery-title {
  margin: 0 0 4px;
  color: #92400e;
  font-size: 0.98rem;
  font-weight: 700;
}
.stu-recovery-desc {
  margin: 0 0 8px;
  color: #78350f;
  font-size: 0.86rem;
}
.stu-recovery-code {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #ffffff;
  color: #b45309;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #f59e0b;
}

.stu-active-banner {
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.stu-active-banner.is-active {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #16a34a;
}
.stu-active-banner.is-locked {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
}
.stu-active-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
}
.stu-active-meta {
  font-size: 0.84rem;
  color: #475569;
  margin-top: 3px;
}

.stu-top-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .stu-top-grid {
    grid-template-columns: 1fr;
  }
}
.stu-start-card {
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.stu-card-title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}
.stu-card-desc {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: #475569;
}
.stu-pin-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.stu-pin-input {
  flex: 1;
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.stu-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stu-kpi-card {
  margin: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stu-kpi-val {
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
}
.stu-kpi-val.is-green { color: #15803d; }
.stu-kpi-val.is-blue  { color: #1d4ed8; }
.stu-kpi-val small {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}
.stu-kpi-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 4px;
}

.stu-section-card {
  margin-bottom: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.stu-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.stu-section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
}
.stu-qual-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stu-qual-summary-pill {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 6px;
}

.stu-mastery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.stu-mastery-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
}
.stu-mastery-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.stu-mastery-code {
  font-size: 0.86rem;
  color: #0f172a;
  margin-left: 4px;
}
.stu-mastery-name {
  display: block;
  font-size: 0.78rem;
  color: #475569;
  margin-top: 2px;
}
.stu-mastery-right {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.stu-mastery-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.stu-mastery-status.is-high { background: #dcfce7; color: #166534; }
.stu-mastery-status.is-mid  { background: #dbeafe; color: #1e40af; }
.stu-mastery-status.is-low  { background: #fee2e2; color: #991b1b; }
.stu-mastery-pct {
  font-size: 0.9rem;
  color: #0f172a;
}
.stu-progress-track {
  height: 7px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.stu-progress-fill {
  height: 100%;
  border-radius: 999px;
}
.stu-progress-fill.is-high { background: #16a34a; }
.stu-progress-fill.is-mid  { background: #2563eb; }
.stu-progress-fill.is-low  { background: #dc2626; }
.stu-mastery-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #64748b;
}

.stu-filter-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.stu-search-inp {
  margin: 0;
  width: 230px;
  padding: 6px 10px;
  font-size: 0.84rem;
}
.stu-empty-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 18px;
  text-align: center;
  color: #64748b;
}
.stu-revcode-pill {
  font-size: 0.8rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
}

.stu-revision-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.stu-revision-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.stu-revision-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  padding: 12px 14px;
}
.stu-revision-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.stu-revision-qbody {
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.stu-revision-ans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.stu-rev-ans-box {
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 0.84rem;
}
.stu-rev-ans-box.is-wrong {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.stu-rev-ans-box.is-correct {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.stu-rev-lbl {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
  opacity: 0.85;
}
.stu-revision-why {
  margin-top: 8px;
  font-size: 0.84rem;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 6px 10px;
}
.stu-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  align-items: start;
}
.stu-recovery-inline-box {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.84rem;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* ---------- Panel Nauczyciela: Widok Testu i Monitor (tea-*) ---------- */
.tea-bulk-bar {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.tea-bulk-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}
.tea-bulk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tea-mon-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tea-mon-search {
  margin: 0;
  width: 220px;
  padding: 6px 10px;
  font-size: 0.84rem;
}
.tea-mon-select {
  margin: 0;
  width: auto;
  min-width: 145px;
  padding: 6px 10px;
  font-size: 0.84rem;
}

.tea-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.tea-analytics-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
}
.tea-analytics-title {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}
.tea-hist-row {
  display: grid;
  grid-template-columns: 76px 1fr 78px;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 6px;
}
.tea-hist-lbl {
  color: #334155;
  font-weight: 600;
}
.tea-hist-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.tea-hist-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 999px;
}
.tea-hist-val {
  text-align: right;
  color: #0f172a;
}

/* ---------- Panel Administratora: szuflady operacyjne i kompaktowe tabele ---------- */
.adm-drawer-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.adm-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.adm-grid-2.adm-overview-grid {
  grid-template-columns: minmax(340px, 40%) minmax(0, 60%);
  align-items: start;
}
@media (max-width: 1080px) {
  .adm-grid-2,
  .adm-grid-2.adm-overview-grid {
    grid-template-columns: 1fr;
  }
}

.adm-grid-2 > .card,
.adm-compact-card {
  padding: 16px 18px;
  min-width: 0;
  overflow: hidden;
}

table.simple {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.4;
}
table.simple th {
  padding: 7px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
}
table.simple td {
  padding: 7px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
}
table.simple tr:last-child td {
  border-bottom: 0;
}
table.simple code {
  font-size: 11.5px;
  padding: 1px 5px;
  word-break: break-word;
}
table.simple .badge {
  font-size: 10.5px;
  padding: 2px 7px;
  white-space: nowrap;
}
table.simple .tag {
  font-size: 10px;
  padding: 1px 5px;
  white-space: nowrap;
}
table.simple .button.small {
  padding: 4px 9px;
  font-size: 11.5px;
  height: auto;
  line-height: 1.25;
}

.adm-fit-table {
  table-layout: auto;
  width: 100%;
}
.adm-live-student {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  line-height: 1.25;
}
.adm-live-student strong {
  font-size: 12.5px;
  color: #0f172a;
}
.adm-live-test-link {
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  display: inline-block;
}
.adm-live-rem {
  display: inline-block;
  font-size: 11px;
  color: #64748b;
  margin-left: 4px;
}

@media print {
  .stu-head-actions,
  .stu-top-grid .stu-start-card,
  .stu-filter-controls,
  .stu-bottom-grid,
  .tea-bulk-bar,
  .tea-mon-filters {
    display: none !important;
  }
}

/* ---------- Widok: Zobacz system (shw-*) ---------- */
.shw-hero {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 24px 26px;
  margin-bottom: 18px;
  background: #ffffff;
}
@media (max-width: 920px) {
  .shw-hero {
    grid-template-columns: 1fr;
  }
}
.shw-kicker {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1d4ed8;
  margin-bottom: 6px;
}
.shw-title {
  margin: 0 0 10px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.28;
  color: #0f172a;
}
.shw-lead {
  margin: 0 0 18px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #334155;
}
.shw-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.shw-fact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
}
.shw-fact strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.shw-fact span {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}
.shw-hero-cta {
  display: flex;
}
.shw-cta-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.shw-cta-box h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}
.shw-cta-box p {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #475569;
}
.shw-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shw-cta-btns .button {
  text-align: center;
  justify-content: center;
}
.shw-teacher-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d4ed8;
}

.shw-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.shw-filter-lbl {
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
}
.shw-zoom-hint {
  margin-left: auto;
  font-size: 0.8rem;
}

.shw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
.shw-item {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: start;
  padding: 20px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
@media (max-width: 960px) {
  .shw-item {
    grid-template-columns: 1fr;
  }
}
.shw-img-wrap {
  position: relative;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #0f172a;
  cursor: zoom-in;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.shw-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.2s ease;
}
.shw-img-wrap:hover img {
  transform: scale(1.015);
}
.shw-zoom-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(15, 23, 42, 0.86);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
}
.shw-body h2 {
  margin: 8px 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.shw-body p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #334155;
}
.shw-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.shw-points {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #475569;
}
.shw-points li {
  margin-bottom: 5px;
}

.shw-bottom-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.shw-bottom-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.shw-lightbox[hidden] {
  display: none !important;
}
.shw-lightbox-inner {
  max-width: 95vw;
  max-height: 92vh;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.shw-lightbox-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid #334155;
}
.shw-lightbox-close {
  appearance: none;
  background: #334155;
  color: #ffffff;
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.shw-lightbox-close:hover {
  background: #475569;
}
.shw-lightbox-body {
  padding: 12px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shw-lightbox-body img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}

/* Terminal Ubuntu na stacji PC1: wygląd jak prawdziwy terminal (jedna linia prompt + polecenie, fiolet Ubuntu) */
.ubuntu-term-body {
  font-family: 'JetBrains Mono', 'Ubuntu Mono', Consolas, 'Courier New', monospace;
  font-size: 13px;
  padding: 12px 14px;
  background: #300a24;
}
.ubuntu-term-body .ubuntu-term-log {
  background: transparent !important;
  color: #f1f1f1 !important;
  line-height: 1.55;
  font-family: inherit;
  padding: 0;
}
.ubuntu-term-body .ubuntu-term-in-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: transparent;
}
.ubuntu-term-body .ubuntu-prompt {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #8ae234;
  font-weight: 700;
}
.ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input,
.ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input:focus {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
  font: inherit;
  outline: none !important;
}

html body .vm-lab-card .ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input,
html body .vm-lab-card .ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input:hover,
html body .vm-lab-card .ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input:focus,
html body .vm-lab-card .ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input:focus-visible,
html body .vm-lab-card .ubuntu-term-body .ubuntu-term-in-row input.ubuntu-term-input:active {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Terminal Ubuntu na stacji PC1: ta sama powłoka co na serwerze, w fiolecie Ubuntu */
.pc1-ub-term .linux-server-tty-wrap { background: #300a24 !important; min-height: 0 !important; height: 100% !important; }
.pc1-ub-term #srv_tty_container { min-height: 0 !important; height: 100%; padding: 10px 14px !important; }
.pc1-ub-term #srv_tty_container > div:first-child { display: none !important; }
.pc1-ub-term #srv_tty_screen { max-height: none !important; min-height: 0; }
.pc1-ub-term #srv_tty_output { color: #f1f1f1 !important; }
.pc1-ub-term #srv_tty_prompt { color: #8ae234 !important; }
.pc1-ub-term #srv_tty_prompt_row { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; }
.pc1-ub-term #srv_nano_overlay { background: #300a24 !important; }
.pc1-ub-term #srv_nano_editor { background: #300a24 !important; }


/* ---------- MONITORING ROZSZERZONY DLA NAUCZYCIELA ---------- */
body.mode-teacher .wrap {
  max-width: 1540px !important;
  width: calc(100% - 48px) !important;
  padding: 24px 24px 90px !important;
}

.tablewrap {
  overflow-x: auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

table.monitor {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1050px;
}

table.monitor th {
  padding: 12px 14px;
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

table.monitor td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.monitor tr.st-locked { background: #fef2f2 !important; }
table.monitor tr.away { background: #fff7ed !important; }

table.monitor td.note {
  font-size: 0.82rem;
  color: #334155;
  min-width: 220px;
  max-width: 340px;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.mon-severe-note {
  color: #991b1b;
  font-weight: 600;
  font-size: 11.5px;
  background: #fef2f2;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  border-left: 3.5px solid #dc2626;
  max-height: 125px;
  overflow-y: auto;
  line-height: 1.45;
}

/* Kolumna akcji nauczyciela - zawsze widoczna (sticky right), nieobcięta */
table.monitor th:last-child {
  position: sticky;
  right: 0;
  background: #f8fafc;
  z-index: 3;
  text-align: right;
  padding-right: 18px;
  box-shadow: -4px 0 8px rgba(15, 23, 42, 0.05);
}

table.monitor td.acts {
  position: sticky;
  right: 0;
  background: #ffffff;
  z-index: 3;
  text-align: right;
  padding-right: 18px;
  min-width: 230px;
  box-shadow: -4px 0 8px rgba(15, 23, 42, 0.05);
  vertical-align: middle;
  white-space: normal;
}

table.monitor tr:hover td.acts {
  background: #f8fafc;
}

table.monitor tr.st-locked td.acts {
  background: #fef2f2 !important;
}

table.monitor tr.away td.acts {
  background: #fff7ed !important;
}

.mon-acts-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

table.monitor td.acts button.small {
  height: 32px;
  padding: 0 11px;
  font-size: 0.82rem;
  white-space: nowrap;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-waiting-rebind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.unlock-form {
  display: inline-block;
  margin: 0;
}

.unlock-group {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
  box-sizing: border-box;
}

.unlock-prefix {
  padding: 0 2px 0 6px;
  font-weight: 700;
  font-size: 13px;
  color: #64748b;
}

.unlock-input {
  width: 32px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  padding: 0;
  height: 100%;
  color: #0f172a;
  background: transparent;
  outline: none;
}

.unlock-suffix {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  padding-right: 6px;
}

.unlock-btn {
  height: 100%;
  background: #1e40af;
  color: #ffffff;
  border: none;
  padding: 0 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}

.unlock-btn:hover {
  background: #1d4ed8;
}

.unlock-form.is-locked .unlock-btn,
.btn-unlock-alert {
  background: #dc2626 !important;
}

.unlock-form.is-locked .unlock-btn:hover,
.btn-unlock-alert:hover {
  background: #b91c1c !important;
}

/* ========== JASNY MOTYW STANOWISKA EGZAMINACYJNEGO & WYDRUK (@media print) ========== */
.vm-lab-card.voc-workbench-card {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden;
}

.vm-lab-card.voc-workbench-card .vm-studio-navbar {
  background: #f1f5f9 !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  padding: 8px 14px !important;
}

.vm-lab-card.voc-workbench-card .vm-studio-tab-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.vm-lab-card.voc-workbench-card .vm-studio-tab-btn:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.vm-lab-card.voc-workbench-card .vm-studio-tab-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25) !important;
}

.vm-lab-card.voc-workbench-card .vm-studio-tab-btn.active .vm-tab-title {
  color: #ffffff !important;
}

/* Wyraźniejsza treść pytań teoretycznych i praktycznych na egzaminie */
.card.question .qbody {
  color: #0f172a !important;
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

.card.question .opt {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

.card.question .opt:hover {
  background: #f8fafc !important;
  border-color: #64748b !important;
}

/* Kompleksowy arkusz wydruku (@media print) dla egzaminu, arkuszy CKE i podglądu prac */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  html, body, main.wrap, main.wrap.examwrap {
    background: #ffffff !important;
    color: #000000 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  header.top,
  footer.foot,
  .no-print,
  .admin-exam-banner,
  .ab-staging-banner,
  .vm-studio-navbar,
  .voc-sheet-topbar a.button,
  #cke_floating_calc,
  .qnav,
  .exam-actions-bar,
  .btn-sheet-toggle {
    display: none !important;
  }

  /* Odblokowanie wszystkich kontenerów ze scrollbarem (brak ucinania treści na wydruku) */
  .voc-panels-wrapper,
  .voc-studio-panel,
  .voc-sheet-text-wrap,
  .cke-scenario-box,
  .vm-proto-review-pre,
  .vm-code-review-pre,
  .dlv-card,
  .dlv-body {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Podczas wydruku aktywnego egzaminu pokaż zarówno arkusz, jak i wypełnione dokumenty/tabele */
  .voc-studio-panel.voc-panel-sheet,
  .voc-studio-panel.voc-panel-doc {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
  }

  .cke-native-exam-brief {
    max-width: 100% !important;
    width: 100% !important;
    color: #000000 !important;
  }

  .cke-brief-hero,
  .cke-brief-card,
  .cke-step-card,
  .dlv-card,
  .card.question {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.5px solid #0f172a !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
  }

  .cke-brief-card [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .cke-brief-card img,
  .qmedia img {
    max-width: 100% !important;
    max-height: 250px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .dlv-card table,
  .cke-brief-card table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
  }

  .dlv-card th,
  .dlv-card td,
  .cke-brief-card th,
  .cke-brief-card td {
    border: 1px solid #0f172a !important;
    color: #000000 !important;
    background: #ffffff !important;
  }

  .dlv-card input,
  .dlv-card textarea,
  .voc-studio-panel input,
  .voc-studio-panel textarea,
  .voc-studio-panel select {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #0f172a !important;
  }
}


/* Jasny, czytelny styl boksu weryfikacji stanowiska i zakładek w modalu nauczyciela (.gradeform) */
.vm-review-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.vm-review-title {
  color: #1e3a8a !important;
  font-size: 0.95rem !important;
}
.vm-review-score {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
.teacher-vm-inspect-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #93c5fd !important;
  color: #0f172a !important;
}
.teacher-vm-title {
  color: #1e3a8a !important;
}
.teacher-vm-desc {
  color: #334155 !important;
}
.vm-checklist-items.review-mode .vm-crit-item {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.vm-checklist-items.review-mode .vm-crit-item.passed {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}
.vm-checklist-items.review-mode .vm-crit-item.failed {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}
.vm-checklist-items.review-mode .vm-crit-label {
  color: #0f172a !important;
  font-weight: 600 !important;
}
.gradeform .vm-lab-card.voc-workbench-card .vm-studio-tab-btn:not(.active),
.modal-inspect-body .vm-lab-card.voc-workbench-card .vm-studio-tab-btn:not(.active) {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1.5px solid #cbd5e1 !important;
}
.gradeform .vm-lab-card.voc-workbench-card .vm-studio-tab-btn:not(.active) .vm-tab-title,
.modal-inspect-body .vm-lab-card.voc-workbench-card .vm-studio-tab-btn:not(.active) .vm-tab-title {
  color: #1e293b !important;
}
.gradeform .vm-lab-card.voc-workbench-card .vm-studio-tab-btn.active,
.modal-inspect-body .vm-lab-card.voc-workbench-card .vm-studio-tab-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1.5px solid #1d4ed8 !important;
}
.gradeform .vm-lab-card.voc-workbench-card .vm-studio-tab-btn.active .vm-tab-title,
.modal-inspect-body .vm-lab-card.voc-workbench-card .vm-studio-tab-btn.active .vm-tab-title {
  color: #ffffff !important;
}

/* Maskowanie haseł w symulatorze bez wywoływania menedżera haseł przeglądarki Chrome/Edge */
input.sim-masked-pass {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

/* Brak zagnieżdżonych suwaków wewnątrz zakładek stanowiska CKE — pełna wysokość na ekranie i w modalu nauczyciela */
.vm-lab-card.voc-workbench-card,
.voc-panels-wrapper,
.voc-studio-panel,
.voc-sheet-text-wrap,
.cke-scenario-box,
.vm-proto-review-pre,
.vm-panel-key {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Czysta typografia UI (bez dziedziczenia czcionki terminalowej monospace z .vm-lab-card) */
.vm-lab-card.voc-workbench-card,
.vm-lab-card.voc-workbench-card .vm-studio-navbar,
.vm-lab-card.voc-workbench-card .vm-studio-tab-btn,
.vm-lab-card.voc-workbench-card .voc-panel-doc,
.vm-lab-card.voc-workbench-card .dlv-card,
.vm-lab-card.voc-workbench-card .dlv-card table,
.vm-lab-card.voc-workbench-card .dlv-card input,
.vm-lab-card.voc-workbench-card .dlv-card textarea,
.vm-lab-card.voc-workbench-card .dlv-card button {
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, sans-serif !important;
}