/* Počítačové sítě – mobilní webová aplikace */
:root, [data-theme="teal"] {
  --dark: #07333D; --prim: #028090; --acc: #02C39A; --bg: #EEF5F5; --tint: #DCEDEE;
}
[data-theme="wine"] { --dark: #3B1428; --prim: #6E2A45; --acc: #E8B44A; --bg: #F7F1EC; --tint: #EFE3E6; }
[data-theme="blue"] { --dark: #14213D; --prim: #1F4E8C; --acc: #F2A541; --bg: #EEF2F8; --tint: #DDE6F3; }
[data-theme="green"] { --dark: #1E3A2B; --prim: #2F6B4F; --acc: #E9C46A; --bg: #F1F5EF; --tint: #E0EBDF; }
:root {
  --ink: #1D2528; --muted: #66757A; --line: #D9E1E3; --card: #fff;
  --ok: #1F8A5B; --ok-bg: #E3F4EB; --bad: #B83A2E; --bad-bg: #FBE9E6; --mid: #B7791F; --mid-bg: #FCF1DC;
  --r: 14px; --head: Cambria, "Iowan Old Style", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Calibri, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); min-height: 100dvh; }
a { color: var(--prim); }
h1, h2, h3 { font-family: var(--head); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .big { font-size: 1.15rem; } .strong { font-weight: 700; }
.center { text-align: center; } .nowrap { white-space: nowrap; }
.ic { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.ic svg { width: 100%; height: 100%; }
.ic.big { width: 48px; height: 48px; color: var(--muted); }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

/* horní lišta */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; height: 56px;
  padding: 0 max(8px, env(safe-area-inset-left)); background: var(--dark); color: #fff; }
.bar-title { flex: 1; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.bar-actions { display: flex; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 0 6px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--acc); color: var(--dark); font: 700 .85rem var(--body); }
.brand-name { font-family: var(--head); font-weight: 700; font-size: 1.05rem; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.bar .icon-btn { color: #fff; }
.icon-btn:hover { background: rgba(127,127,127,.15); }
.icon-btn.sm { width: 36px; height: 36px; color: var(--muted); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.icon-btn.danger:hover { color: var(--bad); }

.main { max-width: 680px; margin: 0 auto; padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
.main.wide { max-width: 1100px; }
.loading { display: grid; place-items: center; min-height: 50vh; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--tint); border-top-color: var(--prim); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 48px 16px; }

/* tlačítka a formuláře */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: 600 1rem var(--body); text-decoration: none; cursor: pointer; transition: transform .08s, background .15s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--prim); border-color: var(--prim); color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.inp, .sel { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: 1rem var(--body); }
.inp.mono { font-family: var(--mono); font-size: .95rem; }
textarea.inp { min-height: 96px; resize: vertical; line-height: 1.45; }
.inp:focus, .sel:focus { outline: none; border-color: var(--prim); box-shadow: 0 0 0 3px var(--tint); }
.fld { display: grid; gap: 6px; margin-bottom: 14px; }
.fld > span { font-size: .875rem; font-weight: 600; color: var(--muted); }
.form-err { color: var(--bad); font-size: .9rem; min-height: 0; }
.form-err:not(:empty) { margin: 0 0 10px; }
.card { background: var(--card); border-radius: var(--r); padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.actions .sel { width: auto; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row3 { display: grid; gap: 0 12px; }
@media (min-width: 640px) { .row3 { grid-template-columns: 2fr 1fr 1fr; } .span2 { grid-column: span 2; } .row3:has(.span2) { grid-template-columns: 1fr 1fr 1fr; } }

/* přihlášení */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 20% 10%, var(--prim), var(--dark) 60%); }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 20px; padding: 28px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.login-mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--dark); color: var(--acc); font-weight: 800; margin-bottom: 14px; }

/* úvod žáka */
.hero { background: linear-gradient(135deg, var(--dark), var(--prim)); color: #fff; border-radius: 20px; padding: 20px; margin-bottom: 24px; }
.hero-kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); font-weight: 700; margin-bottom: 4px; }
.hero h1 { color: #fff; margin-bottom: 14px; }
.hero-prog { display: flex; align-items: baseline; gap: 8px; }
.hero-num { font-size: 1.1rem; } .hero-num strong { font-size: 2rem; font-family: var(--head); }
.hero-lbl { opacity: .8; }
.hero-btn { margin-top: 16px; width: 100%; justify-content: space-between; background: #fff; border-color: #fff; color: var(--dark); text-align: left; padding: 10px 16px; }
.hero-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hero-done { margin-top: 14px; display: flex; gap: 8px; align-items: center; color: var(--acc); font-weight: 600; }
.pbar { height: 8px; border-radius: 99px; background: var(--tint); overflow: hidden; flex: 1; }
.pbar.light { background: rgba(255,255,255,.2); margin-top: 8px; }
.pbar-fill { height: 100%; background: var(--acc); border-radius: 99px; transition: width .3s; }

.unit { font-family: var(--body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 4px 8px; }
.lesson-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lesson { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border-radius: var(--r); text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); min-height: 64px; transition: transform .08s; }
.lesson:active { transform: scale(.99); }
.lesson-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--prim); font-weight: 700; }
.lesson.done .lesson-num { background: var(--prim); color: #fff; }
.lesson-body { flex: 1; min-width: 0; }
.lesson-title { font-weight: 600; line-height: 1.3; }
.lesson-meta { font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson.locked { background: transparent; box-shadow: none; border: 1.5px dashed var(--line); color: var(--muted); }
.lesson.locked .lesson-num { background: transparent; color: var(--muted); }
.lesson.locked .ic { width: 18px; height: 18px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--tint); color: var(--prim); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.mid { background: var(--mid-bg); color: var(--mid); }
.chip.low { background: var(--bad-bg); color: var(--bad); }
.chip.new { background: var(--acc); color: var(--dark); }
.chip .ic { width: 14px; height: 14px; }

/* látka */
.lesson-head { padding: 8px 2px 16px; }
.lead { color: var(--muted); font-size: 1.05rem; }
.sec { font-family: var(--body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 8px 2px 10px; }
.acts { margin-bottom: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.act { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.act-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--prim); }
.act-ic .ic { width: 22px; height: 22px; }
.act-body { flex: 1; min-width: 0; }
.act-title { font-weight: 600; }
.act-meta { font-size: .85rem; color: var(--muted); }
.act-go { color: var(--muted); }
.score { flex: none; font-weight: 800; font-size: .95rem; padding: 4px 10px; border-radius: 99px; }
.score.ok { background: var(--ok-bg); color: var(--ok); } .score.mid { background: var(--mid-bg); color: var(--mid); } .score.low { background: var(--bad-bg); color: var(--bad); }

.prose { min-width: 0; overflow-wrap: anywhere; background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.prose h2, .prose h3 { margin-top: 1.1em; } .prose h2:first-child, .prose > div > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 .9em; } .prose li { margin-bottom: .3em; }
.prose code { background: var(--tint); padding: 1px 5px; border-radius: 5px; }
.code { background: #0E2A31; color: #D8F3EE; font: .85rem/1.5 var(--mono); padding: 12px 14px; border-radius: 10px; overflow-x: auto; white-space: pre; margin: 0 0 12px; }
[data-theme="wine"] .code { background: #2B1520; color: #F3E6D0; }
.tbl { overflow-x: auto; margin: 0 0 12px; -webkit-overflow-scrolling: touch; }
.tbl table { overflow-wrap: normal; word-break: normal; }
.tbl code { white-space: nowrap; }
@media (max-width: 560px) { .tbl table { font-size: .84rem; } .tbl th, .tbl td { padding: 6px 7px; } }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--tint); color: var(--dark); font-weight: 700; }
.tip { border-left: 4px solid var(--acc); background: var(--tint); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 0 0 12px; }

/* přehrávač aktivit */
.main.play { padding-bottom: 0; }
.intro { background: var(--card); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.player { display: flex; flex-direction: column; min-height: calc(100dvh - 56px - 32px); }
.player.try { min-height: 0; }
.play-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.play-body { flex: 1; }
.play-foot { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.play-foot:empty { display: none; }
.q { background: var(--card); border-radius: var(--r); padding: 18px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.q-text { font-size: 1.12rem; font-weight: 600; }
.q-text p:last-child { margin: 0; }
.q-text.big { font-size: 1.25rem; font-family: var(--head); }
.q .code { margin: 12px 0 0; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 1rem var(--body); cursor: pointer; }
.opt:not(:disabled):hover { border-color: var(--prim); }
.opt:disabled { cursor: default; }
.opt-key { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--prim); font-weight: 700; font-size: .85rem; }
.opt.right { border-color: var(--ok); background: var(--ok-bg); } .opt.right .opt-key { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); } .opt.wrong .opt-key { background: var(--bad); color: #fff; }
.opt:disabled:not(.right):not(.wrong) { opacity: .55; }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-btn { justify-content: center; font-weight: 700; font-size: 1.05rem; min-height: 64px; }
.fb { border-radius: var(--r); padding: 14px 16px; margin-top: 12px; animation: pop .2s ease-out; }
.fb.ok { background: var(--ok-bg); } .fb.bad { background: var(--bad-bg); }
.fb-head { display: flex; gap: 8px; align-items: center; font-weight: 800; }
.fb.ok .fb-head { color: var(--ok); } .fb.bad .fb-head { color: var(--bad); }
.fb-extra { margin-top: 6px; font-weight: 600; }
.fb-text { margin-top: 6px; } .fb-text p:last-child { margin: 0; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

.ord { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.ord.picked { min-height: 60px; padding: 10px; border-radius: var(--r); background: var(--tint); }
.ord-empty { color: var(--muted); font-size: .9rem; padding: 8px; }
.ord-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 12px; text-align: left; border: 2px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink); font: .98rem var(--body); cursor: pointer; }
.ord-item.on { border-color: var(--prim); }
.ord-item.right { border-color: var(--ok); background: var(--ok-bg); } .ord-item.wrong { border-color: var(--bad); background: var(--bad-bg); }
.num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--prim); color: #fff; font-weight: 700; font-size: .85rem; }
.num.ghost { background: var(--tint); color: var(--prim); }
ol.plain { margin: 4px 0 0; padding-left: 1.3em; }

.match-row { display: grid; gap: 8px; padding: 14px; background: var(--card); border-radius: var(--r); margin-bottom: 8px; border: 2px solid transparent; }
.match-l { font-weight: 600; } .match-l p { margin: 0; }
.match-row.right { border-color: var(--ok); } .match-row.wrong { border-color: var(--bad); }
.match-fix, .fill-fix { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; color: var(--ok); font-weight: 600; font-size: .92rem; }
.fill-row { background: var(--card); border-radius: var(--r); padding: 14px; margin-bottom: 10px; display: grid; gap: 10px; }
.fill-q { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; } .fill-q p { margin: 0; }
.fill-row .code { margin: 0; }
.inp.right { border-color: var(--ok); background: var(--ok-bg); } .inp.wrong { border-color: var(--bad); background: var(--bad-bg); }

.result { text-align: center; padding: 24px 0; }
.ring { position: relative; width: 150px; height: 150px; margin: 8px auto 16px; }
.ring svg { width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ring-bg { stroke: var(--tint); }
.ring-fg { stroke: var(--ok); transition: stroke-dasharray .6s ease-out; }
.ring-fg.mid { stroke: var(--mid); } .ring-fg.low { stroke: var(--bad); }
.ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font: 800 2.2rem var(--head); }
.ring-num small { font-size: 1rem; }
.result-btns { display: grid; gap: 10px; max-width: 360px; margin: 20px auto 0; }

/* profil */
.profile { display: flex; gap: 14px; align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--prim); color: #fff; font-weight: 800; font-size: 1.2rem; flex: none; }

/* vyučující */
.page-head { margin: 8px 2px 16px; }
.kicker { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--prim); font-weight: 700; }
.class-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 20px; }
.class-card { display: block; padding: 18px; border-radius: 18px; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--dark), var(--prim)); min-height: 140px; }
.class-code { font: 800 2rem var(--head); color: var(--acc); }
.class-title { opacity: .9; margin-bottom: 14px; }
.class-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; opacity: .85; }
details.more > summary { cursor: pointer; color: var(--prim); font-weight: 600; padding: 8px 2px; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { padding: 10px 16px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tab.on { color: var(--prim); border-color: var(--prim); }
.help { margin: 0 2px 12px; }
.t-lessons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.t-lesson { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; background: var(--card); border-radius: 12px; padding: 10px 12px; }
.t-lesson.is-locked { background: rgba(255,255,255,.55); }
.t-move { display: flex; flex-direction: column; }
.t-title { display: grid; text-decoration: none; color: var(--ink); min-width: 0; }
.t-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inp.date { width: auto; min-height: 40px; padding: 6px 10px; }
.state { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.state.on { background: var(--ok-bg); color: var(--ok); } .state.off { background: #EEF0F1; color: var(--muted); }
@media (min-width: 760px) {
  .t-lesson { grid-template-columns: auto 1fr auto; }
  .t-ctrl { grid-column: auto; }
}
.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-ui { width: 46px; height: 28px; border-radius: 99px; background: #C9D2D4; position: relative; transition: background .15s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .switch-ui { background: var(--prim); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--acc); outline-offset: 2px; }
.t-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.t-act { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--bg); }
.t-stat { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.t-act .t-move { grid-row: 1 / span 2; grid-column: 3; }
.split { display: grid; gap: 12px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.preview { box-shadow: none; border: 1.5px solid var(--line); max-height: 520px; overflow: auto; }
.creds table td { padding: 6px 8px; }
.heatmap table { font-size: .85rem; }
.heatmap th { white-space: nowrap; }
.heatmap thead th { vertical-align: bottom; height: 150px; padding: 6px 4px; }
.vert { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 140px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.heat { text-align: center; font-weight: 700; min-width: 42px; }
.heat.ok { background: var(--ok-bg); color: var(--ok); } .heat.mid { background: var(--mid-bg); color: var(--mid); } .heat.low { background: var(--bad-bg); color: var(--bad); }
.heat.none { background: #F4F6F7; }
ol.hard { padding-left: 1.4em; margin: 0; } ol.hard li { margin-bottom: 12px; }
.hard-bar { height: 6px; background: var(--tint); border-radius: 99px; margin-bottom: 4px; overflow: hidden; max-width: 320px; }
.hard-bar div { height: 100%; background: var(--bad); }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; transition: .25s;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 50; font-weight: 600; max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.ok { background: var(--ok); } .toast.bad { background: var(--bad); }

@media (min-width: 720px) {
  h1 { font-size: 2rem; }
  .main { padding-top: 24px; }
  .opts { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* registrace a projektor */
.hero-kicker.dark { color: var(--prim); }
.username-big { font-size: 1.6rem; font-weight: 800; background: var(--tint); color: var(--dark); padding: 12px 16px; border-radius: 12px; text-align: center; margin: 4px 0 12px; word-break: break-all; }
.invite { display: grid; gap: 10px; }
.invite-code { font: 800 1.6rem var(--mono); letter-spacing: .12em; color: var(--dark); }
.projector { position: fixed; inset: 0; z-index: 100; background: var(--dark); color: #fff; display: grid; place-items: center; padding: 3vh 4vw; }
.projector-in { display: grid; grid-template-columns: auto 1fr; gap: 5vw; align-items: center; max-width: 1400px; width: 100%; }
.projector .qr { background: #fff; border-radius: 24px; padding: 2.5vh; width: min(70vh, 45vw); }
.projector .qr svg { width: 100%; height: auto; display: block; }
.projector h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 4.5rem); margin-bottom: 2vh; }
.projector .pk { color: var(--acc); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.6rem); }
.projector .pstep { font-size: clamp(1.1rem, 2vw, 2rem); margin: 1.2vh 0; opacity: .92; }
.projector .pcode { font: 800 clamp(2.5rem, 6vw, 6rem) var(--mono); letter-spacing: .14em; color: var(--acc); margin: 1vh 0; }
.projector .purl { font: clamp(1rem, 1.6vw, 1.6rem) var(--mono); opacity: .8; word-break: break-all; }
.projector .pcount { margin-top: 2vh; opacity: .7; font-size: clamp(1rem, 1.4vw, 1.4rem); }
.projector .pclose { position: absolute; top: 2vh; right: 2vw; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 12px; padding: 10px 16px; font: 600 1rem var(--body); cursor: pointer; }
@media (max-width: 800px) { .projector-in { grid-template-columns: 1fr; text-align: center; } .projector .qr { width: min(80vw, 50vh); margin: 0 auto; } }

/* trenažér Cisco CLI */
.cli-task { background: var(--card); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cli-task-text { font-weight: 600; font-size: 1.05rem; } .cli-task-text p { margin: 0; }
.term-wrap { background: #0B1F24; border-radius: 12px; padding: 10px 12px; font: .9rem/1.45 var(--mono); color: #D8F3EE; cursor: text; }
.term { max-height: 42vh; min-height: 120px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.term-line.out { color: #9FC7C0; } .term-line.err { color: #FF9C8A; } .term-line.help { color: #F6D57A; }
.term-in { display: flex; align-items: center; gap: 2px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; padding-top: 6px; }
.term-prompt { color: #6FE3C6; white-space: nowrap; }
.term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: 1rem var(--mono); padding: 6px 2px; caret-color: #6FE3C6; }
.cli-tools { margin-top: 8px; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: .9rem; }

/* generátory */
.subnet-ip { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-top: 4px; }
.ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.port, .sw-card { display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: 1rem var(--body); cursor: pointer; }
.port.on { border-color: var(--prim); background: var(--tint); }
.port:disabled:not(.right):not(.wrong) { opacity: .45; cursor: default; }
.port.right, .sw-card.right { border-color: var(--ok); background: var(--ok-bg); }
.port.wrong, .sw-card.wrong { border-color: var(--bad); background: var(--bad-bg); }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sw-card strong { font-size: 1.2rem; }
.mac-table .code { margin-top: 4px; }

/* dotazy */
.ask-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px; border-radius: 99px; border: 0; background: var(--dark); color: #fff; font: 700 .95rem var(--body); box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; }
.main:not(.play) .ask-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: grid; place-items: end center; padding: 0; }
.modal { width: 100%; max-width: 560px; background: var(--card); border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 92dvh; overflow: auto; }
@media (min-width: 640px) { .overlay { place-items: center; padding: 20px; } .modal { border-radius: 20px; } }
.ctx-box { background: var(--tint); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; max-height: 160px; overflow: auto; }
.ctx-box .code { font-size: .78rem; }
.chat-link { position: relative; }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #E5484D; color: #fff; font: 700 .7rem/18px var(--body); text-align: center; }
.q-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.q-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.q-item.unread { box-shadow: inset 4px 0 0 var(--acc), 0 1px 2px rgba(0,0,0,.05); }
.q-main { flex: 1; min-width: 0; } .q-subj { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; flex: none; }
.chip.st-open { background: var(--mid-bg); color: var(--mid); } .chip.st-answered { background: var(--ok-bg); color: var(--ok); } .chip.st-closed { background: #EEF0F1; color: var(--muted); }
.q-title { font-size: 1.3rem; margin: 0; }
.q-head .ctx { margin-top: 8px; } .q-head .ctx .code { font-size: .78rem; }
.thread { display: grid; gap: 10px; margin-bottom: 14px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.msg.mine { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--tint); }
.msg.teacher:not(.mine) { border-left: 3px solid var(--acc); }
.msg-who { color: var(--muted); margin-bottom: 2px; } .msg-body p:last-child { margin: 0; } .msg-body .code { font-size: .8rem; }
.reply { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); }
.dash-q { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.dash-q > .ic:first-child { width: 28px; height: 28px; color: var(--prim); }
.dash-q > div { flex: 1; }
.dash-q.hot { box-shadow: inset 4px 0 0 #E5484D, 0 1px 2px rgba(0,0,0,.05); }
.main:has(.ask-fab) { padding-bottom: 96px; }
.ask-row { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.ask-pill { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--prim); border-radius: 99px; padding: 6px 12px; font: 600 .85rem var(--body); cursor: pointer; }
.ask-pill .ic { width: 16px; height: 16px; }

/* herní prvky */
.game-slot:empty, .xp-slot:empty { display: none; }
.game-slot { margin: -12px 0 18px; }
.xp-slot { margin-top: 20px; text-align: left; }
.lvl-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.lvl-badge { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font: 800 1.4rem var(--head); color: var(--dark); background: linear-gradient(135deg, var(--acc), #FFE08A); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.lvl-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.lvl-name { font-weight: 700; line-height: 1.25; }
.lvl-xp { font-weight: 500; color: var(--muted); }
.lvl-side { flex: none; display: grid; justify-items: end; gap: 2px; }
.streak { font-weight: 800; color: var(--muted); filter: grayscale(1); opacity: .6; }
.streak.on { color: #D9480F; filter: none; opacity: 1; }
.hero-train { margin-top: 10px; width: 100%; background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.train-btn { margin: 14px 0 6px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge-card { background: var(--card); border-radius: var(--r); padding: 12px; text-align: center; opacity: .55; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.badge-card.got { opacity: 1; box-shadow: inset 0 0 0 2px var(--acc), 0 1px 2px rgba(0,0,0,.05); }
.badge-ic { font-size: 2rem; line-height: 1.2; }
.badge-name { font-weight: 700; margin: 4px 0 2px; }
.leader { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.leader li { display: grid; grid-template-columns: 2.2em 1fr auto auto; gap: 10px; align-items: center; background: var(--card); padding: 10px 14px; border-radius: 12px; }
.leader li.me { box-shadow: inset 0 0 0 2px var(--prim); }
.leader .rank { font-weight: 800; text-align: center; }
.leader .lname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.train-hero { background: linear-gradient(135deg, #3B1428, var(--prim)); color: #fff; border-radius: 20px; padding: 20px; margin-bottom: 8px; }
[data-theme="teal"] .train-hero { background: linear-gradient(135deg, var(--dark), var(--prim)); }
.train-hero h1 { color: #fff; } .train-hero p { opacity: .9; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.chip-btn { border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 8px 12px; font: 600 .88rem var(--body); cursor: pointer; }
.chip-btn.on { background: var(--prim); border-color: var(--prim); color: #fff; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg-btn { border: 0; background: var(--card); padding: 10px 20px; font: 700 1rem var(--body); cursor: pointer; color: var(--ink); }
.seg-btn.on { background: var(--prim); color: #fff; }
.hud { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 6px; }
.hud .combo { color: var(--muted); } .hud .combo.hot { color: #D9480F; animation: pulse .6s ease-in-out infinite alternate; }
.hud .xp { color: var(--prim); }
@keyframes pulse { to { transform: scale(1.08); } }
.tbar { height: 6px; background: var(--tint); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.tbar > div { height: 100%; background: var(--acc); transition: width .1s linear; }
.tbar.low > div { background: #E5484D; }
.play-body { position: relative; }
.xp-pop { position: absolute; right: 8px; top: 0; font: 800 1.3rem var(--body); color: var(--ok); animation: rise 1.2s ease-out forwards; pointer-events: none; }
@keyframes rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } }
.big-emoji { font-size: 4rem; line-height: 1.1; margin-bottom: 8px; }
.review { text-align: left; background: var(--card); border-radius: var(--r); padding: 10px 14px; margin: 16px 0 0; }
.review summary { cursor: pointer; font-weight: 600; }
.review li { margin: 8px 0; } .review li.ok { color: var(--ink); } .review li.bad { color: var(--bad); }
.review li p { margin: 0; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* =====================================================================
   Laboratoř – simulátor sítě
   ===================================================================== */
.hero-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-row .hero-train { flex: 1 1 140px; }
.main.lab { max-width: none; padding: 0; height: calc(100dvh - 56px); display: flex; flex-direction: column; overflow: hidden; }
.lab-top { position: relative; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); }
.lab-tools { display: flex; align-items: center; gap: 6px; padding: 8px 10px; flex-wrap: wrap; }
.lab-sp { flex: 1; }
.btn.sm { min-height: 38px; padding: 0 12px; font-size: .9rem; border-radius: 10px; }
.btn.sm .ic { width: 18px; height: 18px; }
.lab-mode.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.lab-save { min-width: 64px; text-align: right; }
.lab-chip { gap: 4px; }
.lab-pal { position: absolute; left: 10px; right: 10px; top: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 12px; max-width: 640px; display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.pal-gt { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 4px; }
.pal-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.pal-item { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; background: var(--bg); border: 1.5px solid transparent; border-radius: 12px; padding: 8px; cursor: pointer; font: inherit; color: inherit; }
.pal-item:hover { border-color: var(--prim); }
.pal-ic { grid-row: span 2; display: grid; place-items: center; }
.pal-l { font-weight: 700; font-size: .9rem; } .pal-m { font-size: .72rem; color: var(--muted); }
.lab-body { flex: 1; display: flex; min-height: 0; }
.lab-stagewrap { position: relative; flex: 1; min-width: 0; }
.sim-stage { position: absolute; inset: 0; }
.sim-canvas { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background-color: #F7FAFA; background-image: radial-gradient(#D5DFE1 1.2px, transparent 1.2px); background-size: 22px 22px; }
.sim-canvas:active { cursor: grabbing; }
.sim-canvas.cabling, .sim-canvas.cabling .dev { cursor: crosshair; }
.sim-canvas .link { stroke-width: 3.5; stroke-linecap: round; }
.sim-canvas .link.up { stroke: #3C4C52; }
.sim-canvas .link.down { stroke: #B9C3C6; stroke-dasharray: 7 6; }
.sim-canvas .link.blocked { stroke: #D49B2A; stroke-dasharray: 2 6; }
.sim-canvas .link-hit { stroke: transparent; stroke-width: 18; cursor: pointer; }
.sim-canvas .pdot.up { fill: #1F8A5B; } .sim-canvas .pdot.down { fill: #C8442F; } .sim-canvas .pdot.blk { fill: #E5A11B; }
.sim-canvas .pdot { stroke: #fff; stroke-width: 1.5; }
.sim-canvas .plabel { font: 600 10.5px var(--mono); fill: #54656B; paint-order: stroke; stroke: #F7FAFA; stroke-width: 3px; pointer-events: none; }
.sim-canvas .dev { cursor: pointer; outline: none; }
.sim-canvas .dev .tile { fill: #fff; stroke: var(--dc); stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.sim-canvas .dev:hover .tile, .sim-canvas .dev:focus-visible .tile { stroke-width: 3.2; }
.sim-canvas .dev .ico { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sim-canvas .dev .ico .fill { fill: currentColor; fill-opacity: .12; }
.sim-canvas .dev .ico .dot { fill: currentColor; }
.sim-canvas .dname { font: 700 13px var(--body); fill: var(--ink); paint-order: stroke; stroke: #F7FAFA; stroke-width: 4px; pointer-events: none; }
.sim-canvas .dsub { font: 600 11px var(--mono); fill: #5C6E74; paint-order: stroke; stroke: #F7FAFA; stroke-width: 4px; pointer-events: none; }
.sim-canvas .rubber { stroke: var(--prim); stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; }
.sim-canvas .pkt { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.sim-pop { position: absolute; z-index: 5; min-width: 210px; max-width: min(320px, calc(100% - 16px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 12px; display: grid; gap: 8px; }
.sim-pop.wide { max-width: min(360px, calc(100% - 16px)); }
.pop-title { font-weight: 800; }
.pp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; max-height: 46vh; overflow: auto; }
.pp { display: grid; gap: 1px; border: 1.5px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 7px; font: 600 .82rem var(--mono); cursor: pointer; text-align: left; color: var(--ink); }
.pp:hover:not(:disabled) { border-color: var(--prim); }
.pp.used, .pp:disabled { opacity: .55; cursor: default; }
.pp-u { font: 500 .68rem var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: var(--dark); color: #fff; padding: 6px 14px; border-radius: 99px; box-shadow: 0 4px 12px rgba(0,0,0,.2); pointer-events: none; }
.lab-side { width: 360px; flex: none; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--line); padding: 14px; display: grid; align-content: start; gap: 12px; }
.lab-sideclose { display: none; justify-self: end; }
.lab-sidebtn { display: none; }
.lab-intro { padding: 14px; }
.lab-intro p:last-child { margin: 0; }
.lab-sec { background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05); display: grid; gap: 10px; }
.lab-sec h3 { margin: 0; }
.lab-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lab-task { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.lab-task.ok { background: var(--ok-bg); }
.lab-tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #B8C4C7; display: grid; place-items: center; color: #fff; margin-top: 1px; }
.lab-task.ok .lab-tick { background: var(--ok); border-color: var(--ok); }
.lab-tick .ic { width: 16px; height: 16px; }
.lab-ttext p { margin: 0; }
.lab-ttext code { background: rgba(0,0,0,.06); padding: 0 4px; border-radius: 4px; }
.lab-thint { margin-top: 6px; padding: 8px 10px; background: var(--mid-bg); border-radius: 8px; }
.lab-thint p { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--prim); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lab-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.dotk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.lab-trace .fb { margin: 0 0 6px; padding: 8px 10px; }
.lab-hops { margin: 0; padding-left: 22px; display: grid; gap: 2px; max-height: 240px; overflow: auto; }
@media (max-width: 899px) {
  .lab-side { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; top: 30vh; width: auto; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.25); transform: translateY(110%); transition: transform .2s ease-out; }
  .main.lab.side-open .lab-side { transform: none; }
  .lab-sideclose, .lab-sidebtn { display: inline-flex; }
}

/* okno zařízení */
.dw-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(9,25,30,.42); display: grid; place-items: center; padding: 16px; }
.dw { width: min(940px, 100%); height: min(760px, calc(100dvh - 32px)); background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.dw-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.dw-ico { display: grid; place-items: center; }
.dw-title { flex: 1; min-width: 0; display: grid; }
.dw-name { font-weight: 800; font-size: 1.05rem; }
.dw-model { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-actions { display: flex; gap: 2px; }
.dw-tabs { display: flex; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dw-tab { border: 0; background: none; padding: 9px 12px; font: 600 .9rem var(--body); color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.dw-tab.on { color: var(--ink); border-bottom-color: var(--prim); }
.dw-body { flex: 1; overflow: auto; padding: 14px; min-height: 0; display: flex; flex-direction: column; }
.dw-body > * { flex: none; }
.dw-body > .sim-termbox { flex: 1; display: flex; flex-direction: column; min-height: 0; }
@media (max-width: 640px) { .dw-overlay { padding: 0; } .dw { width: 100%; height: 100dvh; border-radius: 0; } }
body.dw-open { overflow: hidden; }

/* terminál */
.sim-keys { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kbtn { min-width: 48px; min-height: 38px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--card); font: 700 .85rem var(--mono); cursor: pointer; color: var(--ink); }
.sim-ro { padding: 6px 2px 0; }
.sim-run { white-space: pre; max-height: none; }

/* Cisco – přední panel */
.pv-face { background: linear-gradient(#2E3A40, #1F282C); border-radius: 12px; padding: 12px; color: #C9D5D8; overflow-x: auto; }
.pv-brand { font: 700 .75rem var(--body); letter-spacing: .08em; display: block; margin-bottom: 8px; opacity: .8; }
.pv-grid { display: grid; grid-template-columns: repeat(13, minmax(40px, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 6px; min-width: 560px; }
.pv-grid.rt { grid-template-columns: repeat(3, 72px); grid-template-rows: auto; min-width: 0; }
.pv-port { position: relative; display: grid; justify-items: center; gap: 2px; background: #11181B; border: 1px solid #3B474C; border-radius: 6px; padding: 6px 2px 4px; color: #C9D5D8; font: 600 .72rem var(--mono); cursor: pointer; }
.pv-port:hover { border-color: #8FB3BC; }
.pv-led, .pv-legend i { width: 10px; height: 10px; border-radius: 50%; background: #4B575C; display: inline-block; }
.pv-port.up .pv-led, .pv-legend .up { background: #3DDC84; box-shadow: 0 0 6px #3DDC84; }
.pv-port.blk .pv-led, .pv-legend .blk { background: #F5B731; }
.pv-port.err .pv-led, .pv-legend .err { background: #FF6B57; }
.pv-port.off .pv-led, .pv-legend .off { background: #6B2B24; }
.pv-v { font-size: .62rem; color: #8FB3BC; }
.pv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0; }
.pv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pv-info { padding: 10px 12px; background: var(--bg); border-radius: 10px; }

/* PC */
.seg { display: inline-flex; background: var(--bg); border-radius: 12px; padding: 4px; gap: 4px; margin: 4px 0 14px; flex-wrap: wrap; }
.seg-b { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 600 .9rem var(--body); cursor: pointer; color: var(--muted); }
.seg-b.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.row-end { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ipf { max-width: 520px; }
.ip-status { margin-top: 16px; padding: 12px 14px; background: var(--bg); border-radius: 12px; display: grid; gap: 4px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.kv span { color: var(--muted); }
.br-bar { display: flex; gap: 8px; }
.br-marks { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.br-page { border: 1px solid var(--line); border-radius: 12px; min-height: 240px; padding: 22px; background: #fff; }
.br-empty { color: var(--muted); text-align: center; padding-top: 60px; }
.br-site h2 { font-size: 1.6rem; }
.br-err { text-align: center; padding-top: 20px; }
.br-dino { font-size: 3rem; filter: grayscale(1); }
.ex { display: grid; gap: 10px; align-content: start; }
.ex-path { font-weight: 700; padding: 8px 12px; background: var(--bg); border-radius: 10px; }
.ex-drives { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ex-drive { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ex-drive.local { cursor: default; }
.ex-drive:not(.local):hover { border-color: var(--prim); }
.ex-ic { font-size: 1.6rem; }
.ex-files { display: grid; gap: 4px; }
.ex-file { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.ex-fn { flex: 1; min-width: 0; word-break: break-all; }
.ex-up { display: flex; gap: 8px; }
.ex-up .inp { flex: 1; }
.svcs { display: grid; gap: 12px; }
.card.svc { margin: 0; display: grid; gap: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }
.sw-tog { width: 50px; height: 30px; border-radius: 99px; border: 0; background: #C9D2D4; position: relative; cursor: pointer; flex: none; }
.sw-tog span { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sw-tog.on { background: var(--ok); } .sw-tog.on span { transform: translateX(20px); }
.dns-recs { display: grid; gap: 4px; }
.dns-rec { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
.dns-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
@media (max-width: 560px) { .dns-add { grid-template-columns: 1fr; } }

/* MikroTik WinBox */
.wb { border: 1px solid #B9BFC3; border-radius: 8px; overflow: hidden; background: #ECEEEF; font-size: .9rem; display: flex; flex-direction: column; min-height: 420px; }
.wb-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: linear-gradient(#FDFDFD, #E1E4E6); border-bottom: 1px solid #B9BFC3; }
.wb-logo { font-weight: 800; color: #5B2A33; }
.wb-body { display: flex; flex: 1; min-height: 0; }
.wb-side { width: 190px; flex: none; background: #F6F7F8; border-right: 1px solid #C9CED1; overflow-y: auto; display: grid; align-content: start; padding: 4px; }
.wb-item { text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 4px; font: .86rem var(--body); cursor: pointer; color: #222; }
.wb-item:hover { background: #E3E8EB; } .wb-item.on { background: #2F6EA8; color: #fff; }
.wb-main { flex: 1; min-width: 0; padding: 10px; overflow: auto; display: grid; align-content: start; gap: 8px; background: #fff; }
.wb-title { font-weight: 800; }
.wb-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-tbl { font-size: .84rem; } .wb-tbl td, .wb-tbl th { padding: 5px 8px; } .wb-tbl tr.dis td { color: #999; }
.wb-act { white-space: nowrap; }
.wb-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 10px; padding: 10px; background: #F6F7F8; border: 1px solid #DDE1E3; border-radius: 6px; }
.wb-form .row-end { grid-column: 1 / -1; }
.wb-fld .inp { min-height: 38px; padding: 6px 8px; border-radius: 6px; }
.wb-pre { font: .8rem/1.45 var(--mono); background: #F6F7F8; padding: 8px; border-radius: 6px; overflow-x: auto; margin: 0; }
.wb-cli { color: #555; } .wb-cli code { background: #F0F1F2; padding: 1px 5px; border-radius: 4px; }
.wb-setup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px; border: 1px dashed #C9CED1; border-radius: 6px; }
.wb-setup .inp { width: auto; min-height: 36px; }
@media (max-width: 640px) { .wb-body { flex-direction: column; } .wb-side { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #C9CED1; } .wb-item { white-space: nowrap; } }

/* NAS */
.nas { display: grid; gap: 12px; align-content: start; }
.nas .card { margin: 0; display: grid; gap: 10px; }
.nas-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, #E7F1FB, #F4F8FC); font-weight: 700; color: #234; }
.nas-logo { background: #2E6B57; color: #fff; font: 800 .75rem var(--body); padding: 4px 8px; border-radius: 6px; letter-spacing: .05em; }
.nas-bays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nas-bay { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: 10px; background: #2B3236; color: #C9D2D5; font-size: .82rem; }
.nas-bay strong { color: #fff; }
.nas-led { width: 8px; height: 8px; border-radius: 50%; background: #55636A; }
.nas-bay.used .nas-led { background: #3DDC84; box-shadow: 0 0 6px #3DDC84; }
.nas-list { display: grid; gap: 6px; }
.nas-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 10px; background: var(--bg); border-radius: 10px; }
.nas-row > div:first-child { flex: 1; min-width: 140px; }
.nas-row.share { justify-content: space-between; }
.nas-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.nas-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; align-items: center; }
.nas-gs { display: flex; gap: 6px 12px; flex-wrap: wrap; }
.nas-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-x { border: 0; background: none; cursor: pointer; font-weight: 800; color: inherit; padding: 0 0 0 4px; }
.chk { display: inline-flex; gap: 6px; align-items: center; font-size: .92rem; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--prim); }
.perm-box { padding: 10px; display: grid; gap: 8px; }
.perm { font-size: .85rem; } .perm th { font-size: .78rem; text-align: center; } .perm td:not(:first-child) { text-align: center; }
.perm input { width: 18px; height: 18px; accent-color: var(--prim); }
.perm-eff { display: flex; gap: 6px; flex-wrap: wrap; }
.inet p { max-width: 640px; }

/* sledování labu učitelem */
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.mon-card { display: grid; gap: 6px; padding: 14px; background: var(--card); border-radius: var(--r); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1.5px solid transparent; }
a.mon-card:hover { border-color: var(--prim); }
.mon-card.none { opacity: .6; }
.mon-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mon-live { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
[hidden] { display: none !important; }

@media (max-width: 640px) { .lab-save { display: none; } }

/* ---------- terminál simulátoru (Cisco / RouterOS / Windows) ---------- */
.sim-termbox { display: flex; flex-direction: column; min-height: 260px; flex: 1; }
.sim-term { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px 10px; border-radius: 8px; font: .86rem/1.32 var(--mono); white-space: pre; cursor: text; }
.sim-term .t-line { min-height: 1.32em; }
.t-cur { display: flex; align-items: baseline; white-space: pre; }
.t-prompt { flex: none; }
.t-input { flex: 1; min-width: 4ch; background: transparent; border: 0; outline: none; padding: 0; margin: 0; font: inherit; color: inherit; caret-color: currentColor; }
.t-ro { opacity: .6; font-style: italic; padding-top: 4px; }
/* Cisco: čistá černobílá konzole jako PuTTY */
.sim-term.t-cisco { background: #000; color: #D9D9D9; font-family: "Courier New", "Lucida Console", var(--mono); }
.sim-term.t-cisco .t-input { color: #fff; }
.sim-term.t-cisco .t-cur .t-prompt:only-child, .sim-term.t-cisco .t-prompt { color: #D9D9D9; }
/* Windows: conhost */
.sim-term.t-win { background: #0C0C0C; color: #CCCCCC; font-family: Consolas, "Cascadia Mono", var(--mono); border-radius: 0; }
/* RouterOS terminál ve WinBoxu */
.sim-term.t-ros { background: #000; color: #C8C8C8; font-family: "DejaVu Sans Mono", Consolas, var(--mono); }
.t-ros .r-prompt, .t-ros .t-prompt { color: #C8C8C8; }
.t-ros .r-menu { color: #59A7FF; } .t-ros .r-cmd { color: #D27BFF; } .t-ros .r-arg { color: #5FD75F; } .t-ros .r-val { color: #E0E0E0; } .t-ros .r-find { color: #E5C07B; }
.t-ros .r-err, .t-line.r-err { color: #FF6B6B; }
.sim-keys { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kbtn.wide { min-width: 120px; }
@media (max-width: 640px) { .sim-term { font-size: .72rem; } .t-input { font-size: 16px; } }

.dw-body.full { padding: 0; overflow: hidden; }
.dw-body.full > * { flex: 1; min-height: 0; }

/* ---------- Windows 11 plocha ---------- */
.w11 { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 420px; overflow: hidden; font: 13px/1.4 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; color: #1b1b1b; }
.w-desk { flex: 1; position: relative; min-height: 0; background: radial-gradient(120% 90% at 70% 110%, #1D5FB8 0%, #2E7BD6 35%, #9CC3EA 70%, #DCE9F6 100%); overflow: hidden; }
.w-desk.srv { background: linear-gradient(160deg, #0F2B46, #1A4B78 60%, #2C6CA4); }
.w-icons { position: absolute; left: 8px; top: 8px; display: grid; gap: 6px; z-index: 1; }
.w-dicon { width: 84px; display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 4px; background: none; color: #fff; font: 12px/1.25 inherit; text-shadow: 0 1px 2px rgba(0,0,0,.7); cursor: default; text-align: center; }
.w-dicon:hover, .w-dicon:focus-visible { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); outline: none; }
.w-ai { display: inline-grid; place-items: center; color: #fff; border-radius: 6px; flex: none; }
.w-ai.lg { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.w-ai.sm { width: 22px; height: 22px; border-radius: 5px; }
.w-ai.sm svg { width: 15px; height: 15px; }
.w-win { position: absolute; inset: 10px 10px 10px 104px; display: flex; flex-direction: column; background: #F3F3F3; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.35); overflow: hidden; z-index: 2; }
.w-win.dark { background: #0C0C0C; }
.w-tb { display: flex; align-items: center; gap: 8px; height: 34px; padding-left: 10px; background: #EEF1F5; border-bottom: 1px solid #E0E0E0; flex: none; user-select: none; }
.w-win.dark .w-tb { background: #202020; color: #fff; border-color: #333; }
.w-tt { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-ctl { display: flex; height: 100%; }
.w-ctl button { width: 44px; height: 100%; border: 0; background: none; color: inherit; font-size: 12px; cursor: pointer; }
.w-ctl button:hover:not(:disabled) { background: rgba(127,127,127,.2); } .w-ctl button.x:hover { background: #C42B1C; color: #fff; }
.w-ctl button:disabled { opacity: .35; cursor: default; }
.w-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.w-body > .sim-termbox { padding: 0; min-height: 0; }
.w-body > .sim-termbox .sim-term { border-radius: 0; }
.w-body > .sim-termbox .sim-keys { background: #1b1b1b; margin: 0; padding: 6px; }
.w-body > .sim-termbox .kbtn { background: #2b2b2b; color: #eee; border-color: #444; }
.w-task { height: 46px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: rgba(238,242,247,.92); backdrop-filter: blur(20px); border-top: 1px solid rgba(0,0,0,.12); }
.w-desk.srv + .w-start + .w-task, .w11:has(.srv) .w-task { background: rgba(32,32,32,.92); color: #fff; }
.w-tc { flex: 1; display: flex; justify-content: center; gap: 4px; }
.w-tbtn { position: relative; width: 40px; height: 40px; border: 0; border-radius: 5px; background: none; display: grid; place-items: center; cursor: default; color: #0067C0; }
.w-tbtn:hover { background: rgba(127,127,127,.18); }
.w-tbtn.on::after { content: ""; position: absolute; bottom: 2px; left: 15px; right: 15px; height: 3px; border-radius: 2px; background: #0067C0; }
.w-tbtn.start { color: #0078D4; }
.w-tray { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.w-net { border: 0; background: none; color: inherit; display: grid; place-items: center; width: 32px; height: 36px; border-radius: 5px; position: relative; }
.w-net:hover { background: rgba(127,127,127,.18); }
.w-net.warn::after { content: "!"; position: absolute; right: 3px; bottom: 6px; width: 11px; height: 11px; border-radius: 50%; background: #FFB900; color: #000; font: 700 9px/11px sans-serif; text-align: center; }
.w-net.off { opacity: .8; }
.w-clock { display: grid; text-align: right; line-height: 1.25; padding: 0 4px; }
.w-start { position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%); width: min(520px, calc(100% - 16px)); background: rgba(243,243,243,.97); border: 1px solid rgba(0,0,0,.15); border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.35); padding: 22px 24px 0; z-index: 5; }
.w-st-h { font-weight: 600; margin-bottom: 10px; }
.w-st-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding-bottom: 18px; }
.w-st-a { display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 8px 2px; border-radius: 5px; font: 12px inherit; color: #1b1b1b; text-align: center; }
.w-st-a:hover { background: rgba(0,0,0,.06); }
.w-st-u { display: flex; align-items: center; gap: 8px; margin: 0 -24px; padding: 12px 24px; border-top: 1px solid #E5E5E5; background: #EBEBEB; border-radius: 0 0 8px 8px; }
.w-av { width: 30px; height: 30px; border-radius: 50%; background: #5B6B7A; color: #fff; display: grid; place-items: center; font-weight: 600; }
@media (max-width: 640px) {
  .w-icons { display: none; }
  .w-win { inset: 0; border-radius: 0; border: 0; }
  .w-tc { justify-content: flex-start; }
  .w-clock span:last-child { display: none; }
}
/* dialogy a formuláře */
.w-dlg { background: #F0F0F0; padding: 10px; display: grid; gap: 8px; align-content: start; max-width: 560px; }
.w-tabs { display: flex; gap: 2px; border-bottom: 1px solid #ADADAD; }
.w-tabs span { padding: 4px 12px; border: 1px solid #ADADAD; border-bottom: 0; background: #fff; border-radius: 2px 2px 0 0; margin-bottom: -1px; }
.w-pane { border: 1px solid #ADADAD; border-top: 0; background: #fff; padding: 12px; display: grid; gap: 8px; }
.w-note { margin: 0; color: #333; }
.w-radio, .w-chk { display: flex; align-items: center; gap: 8px; }
.w-radio input, .w-chk input { width: 15px; height: 15px; margin: 0; accent-color: #0067C0; }
.w-chk.big { font-weight: 600; margin: 4px 0 10px; }
.w-grid { display: grid; grid-template-columns: 200px auto; gap: 6px 10px; align-items: center; padding-left: 24px; justify-content: start; }
.w-ip { display: inline-flex; align-items: center; height: 24px; border: 1px solid #7A7A7A; background: #fff; padding: 0 2px; font-family: "Segoe UI", sans-serif; }
.w-ip.dis { background: #F0F0F0; border-color: #CCC; color: #999; }
.w-oct { width: 32px; border: 0; outline: none; text-align: center; font: inherit; background: transparent; padding: 0; color: inherit; }
.w-oct:focus { background: #CCE4F7; }
.w-err { color: #C42B1C; background: #FDE7E9; border: 1px solid #F1BBBC; padding: 6px 8px; border-radius: 4px; }
.w-btns { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.w-btns.l { justify-content: flex-start; }
.w-btn { min-width: 84px; height: 28px; padding: 0 12px; border: 1px solid #ADADAD; border-radius: 4px; background: #FDFDFD; font: 13px inherit; color: #1b1b1b; cursor: default; }
.w-btn:hover:not(:disabled) { background: #E5F1FB; border-color: #0078D4; }
.w-btn.pri { background: #0067C0; border-color: #0067C0; color: #fff; }
.w-btn.pri:hover { background: #1975C5; }
.w-btn:disabled { opacity: .5; }
.w-det { border: 1px solid #ADADAD; background: #fff; padding: 10px 12px; }
.w-det-t { font-weight: 600; margin-bottom: 6px; }
.w-det-g { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; font-size: 12px; }
.w-det-g .mono { font-family: Consolas, var(--mono); font-size: 12px; }
.w-in { height: 28px; border: 1px solid #ADADAD; border-bottom-color: #7A7A7A; border-radius: 4px; background: #fff; padding: 0 8px; font: 13px inherit; color: #1b1b1b; min-width: 0; }
textarea.w-in { height: auto; padding: 6px 8px; }
.w-in:focus { outline: none; border-bottom: 2px solid #0067C0; }
.w-in.mono { font-family: Consolas, var(--mono); }
.w-row { display: flex; gap: 6px; align-items: center; }
.w-row .w-in { flex: 1; }
.w-h { margin: 0; font-size: 18px; font-weight: 400; color: #003399; }
/* prohlížeč */
.w-br { display: flex; flex-direction: column; height: 100%; background: #F7F7F7; }
.w-tabsbar { display: flex; align-items: end; gap: 4px; padding: 6px 8px 0; background: #E9EAEC; }
.w-btab { display: flex; align-items: center; gap: 8px; max-width: 240px; min-width: 120px; padding: 7px 10px; background: #F7F7F7; border-radius: 8px 8px 0 0; font-size: 12px; white-space: nowrap; overflow: hidden; }
.w-btab > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.w-btab .x, .w-plus { color: #555; font-size: 11px; }
.w-plus { padding: 6px 8px; }
.w-nav { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid #E1E1E1; }
.w-nav > button { width: 32px; height: 30px; border: 0; background: none; border-radius: 5px; font-size: 15px; color: #333; }
.w-nav > button:hover:not(:disabled) { background: #E8E8E8; } .w-nav > button:disabled { color: #BBB; }
.w-urlbox { flex: 1; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #fff; border: 1px solid #D5D5D5; border-radius: 16px; min-width: 0; }
.w-urlbox:focus-within { border-color: #0067C0; box-shadow: 0 0 0 1px #0067C0; }
.w-url { flex: 1; min-width: 0; border: 0; outline: none; font: 13px inherit; background: none; }
.w-lock { font-size: 11.5px; color: #555; white-space: nowrap; } .w-lock.warn { color: #9A5B00; }
.w-page { flex: 1; overflow: auto; background: #fff; }
.w-ntp { padding: 50px 20px; text-align: center; background: linear-gradient(#EAF2FB, #fff); height: 100%; box-sizing: border-box; }
.w-ntp-s { font-size: 15px; color: #444; margin-bottom: 20px; }
.w-ntp-g { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.w-ntp-g button { display: grid; justify-items: center; gap: 6px; width: 110px; padding: 12px 4px; border: 0; border-radius: 8px; background: rgba(255,255,255,.8); box-shadow: 0 1px 3px rgba(0,0,0,.1); font: 12px inherit; }
.w-fav { width: 32px; height: 32px; border-radius: 50%; background: #0E7C86; color: #fff; display: grid; place-items: center; font-weight: 700; }
.w-fav.sm { width: 14px; height: 14px; font-size: 9px; background: #888; }
.w-site { max-width: 720px; margin: 0 auto; padding: 28px 24px; font: 16px/1.6 Georgia, serif; }
.w-site header { font: 700 28px/1.2 "Segoe UI", sans-serif; margin-bottom: 14px; }
.w-site footer { margin-top: 30px; border-top: 1px solid #eee; padding-top: 8px; font-family: "Segoe UI", sans-serif; }
.w-err-page { max-width: 560px; margin: 0 auto; padding: 50px 24px; color: #333; }
.w-err-ico { color: #888; margin-bottom: 14px; }
.w-err-page h2 { font: 600 24px "Segoe UI", sans-serif; margin: 0 0 10px; }
.w-err-page ul { padding-left: 18px; color: #555; }
.w-err-page code { color: #777; font-size: 12px; }
/* průzkumník */
.w-ex { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; }
.w-ex-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #F3F3F3; }
.w-ex-navb button { width: 32px; height: 30px; border: 0; background: none; border-radius: 5px; }
.w-ex-navb button:hover { background: #E5E5E5; }
.w-ex-addr { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #E0E0E0; background: #fff; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-ex-tb { display: flex; gap: 2px; padding: 4px 8px; border-bottom: 1px solid #E5E5E5; background: #F9F9F9; flex-wrap: wrap; min-height: 6px; }
.w-tbi { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 4px; background: none; font: 12.5px inherit; color: #1b1b1b; }
.w-tbi:hover:not(:disabled) { background: #E8E8E8; } .w-tbi:disabled { opacity: .4; }
.w-ex-main { flex: 1; display: flex; min-height: 0; }
.w-ex-nav { width: 190px; flex: none; padding: 6px 4px; border-right: 1px solid #EEE; overflow: auto; display: grid; align-content: start; gap: 1px; }
.w-ex-nav hr { border: 0; border-top: 1px solid #EEE; margin: 4px 6px; }
.w-ni { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 8px; border-radius: 4px; text-align: left; font: 12.5px inherit; color: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-ni:hover { background: #F0F0F0; } .w-ni.on { background: #E0EEF9; }
.w-ni-i { width: 18px; text-align: center; }
.w-ex-c { flex: 1; min-width: 0; overflow: auto; padding: 8px 14px; }
.w-sec { font-weight: 600; color: #333; margin: 6px 0 8px; border-bottom: 1px solid #EEE; padding-bottom: 4px; }
.w-drvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin-bottom: 12px; }
.w-drv { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 4px; background: none; text-align: left; font: inherit; color: inherit; }
.w-drv:hover:not(:disabled) { background: #E5F3FF; border-color: #CCE8FF; } .w-drv:disabled { opacity: 1; cursor: default; color: inherit; }
.w-drv-i { font-size: 30px; }
.w-drv-t { flex: 1; display: grid; gap: 3px; min-width: 0; }
.w-drv-t strong { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-cap { height: 12px; background: #E6E6E6; border: 1px solid #BCBCBC; }
.w-cap > span { display: block; height: 100%; background: #26A0DA; }
.w-tbl { display: grid; font-size: 12.5px; }
.w-tr { display: grid; grid-template-columns: minmax(180px, 2.4fr) 1.3fr 1.2fr 80px; gap: 10px; padding: 4px 6px; border: 1px solid transparent; align-items: center; }
.w-tr.c3 { grid-template-columns: 1fr 1fr 1.3fr; }
.w-tr.th { color: #4C607A; border-bottom: 1px solid #EEE; }
.w-tr:not(.th):hover { background: #E5F3FF; } .w-tr.is-sel { background: #CCE8FF; border-color: #99D1FF; }
.w-tr .r { text-align: right; }
.w-fn { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-empty { color: #666; padding: 20px 6px; }
.w-perm { margin-bottom: 6px; }
.w-ex-status { padding: 3px 10px; border-top: 1px solid #EEE; color: #555; }
.w-x { border: 0; background: none; color: #999; margin-left: 8px; } .w-x:hover { color: #C42B1C; }
.w-modal { position: absolute; inset: 0; background: rgba(0,0,0,.15); display: grid; place-items: center; z-index: 10; padding: 10px; }
.w-mdlg { width: min(470px, 100%); background: #fff; border: 1px solid #888; box-shadow: 0 16px 40px rgba(0,0,0,.35); border-radius: 8px; overflow: hidden; }
.w-mbody { padding: 16px 20px; display: grid; gap: 10px; }
.w-mdlg .w-btns { padding: 12px 20px; background: #F3F3F3; border-top: 1px solid #E5E5E5; }
.w-msg { display: flex; gap: 14px; } .w-msg p { margin: 0 0 6px; } .w-msg-i { font-size: 26px; }
.w-pick { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.w-pick-i { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border: 0; background: none; text-align: left; font: inherit; border-radius: 4px; }
.w-pick-i:hover { background: #E5F3FF; }
@media (max-width: 640px) { .w-ex-nav { display: none; } .w-tr { grid-template-columns: minmax(120px, 2fr) 0 0 70px; } .w-tr > span:nth-child(2), .w-tr > span:nth-child(3) { visibility: hidden; } .w-grid { padding-left: 0; grid-template-columns: 1fr; } }
/* Správce serveru */
.w-sm { display: flex; height: 100%; background: #F5F6F7; }
.w-sm-nav { width: 180px; flex: none; background: #2D3E50; padding: 8px 0; display: grid; align-content: start; }
.w-sm-i { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: #E6EEF5; padding: 8px 14px; text-align: left; font: 13px inherit; }
.w-sm-i:hover { background: rgba(255,255,255,.08); } .w-sm-i.on { background: #4A6782; }
.w-sm-dot { width: 8px; height: 8px; border-radius: 50%; } .w-sm-dot.ok { background: #6CCB5F; } .w-sm-dot.off { background: #E06C5A; }
.w-sm-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
.w-sm-h { margin: 0; font: 300 22px "Segoe UI", sans-serif; color: #1F3B57; }
.w-sm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.w-sm-tile { display: grid; gap: 4px; text-align: left; padding: 12px; background: #fff; border: 0; border-top: 4px solid #6CCB5F; font: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.w-sm-tile.off { border-top-color: #E06C5A; }
.w-props { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; background: #fff; padding: 12px; }
.w-props strong { font-weight: 400; color: #0067C0; }
.w-box { background: #fff; border: 1px solid #DDD; padding: 12px; display: grid; gap: 8px; }
.w-box-t { font-weight: 600; color: #1F3B57; }
.w-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; }
.w-fld { display: grid; gap: 3px; } .w-fld > span { color: #444; font-size: 12px; }
@media (max-width: 640px) { .w-sm { flex-direction: column; } .w-sm-nav { width: auto; display: flex; overflow-x: auto; padding: 0; } .w-sm-i { white-space: nowrap; } }

/* ---------- WinBox ---------- */
.wbx { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 420px; background: #D4D0C8; font: 12px/1.35 Tahoma, "Segoe UI", Verdana, sans-serif; color: #000; user-select: none; }
.wbx-title { background: linear-gradient(#FDFDFD, #E8E8E8); border-bottom: 1px solid #A0A0A0; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-bar { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: #ECE9E2; border-bottom: 1px solid #A0A0A0; }
.wbx-ub { width: 26px; height: 22px; border: 1px solid transparent; background: none; font-size: 14px; }
.wbx-safe { display: flex; gap: 4px; align-items: center; padding: 1px 8px; border: 1px solid #A0A0A0; background: #F7F6F3; }
.wbx-sess { margin-left: auto; color: #333; }
.wbx-main { flex: 1; display: flex; min-height: 0; }
.wbx-menu { display: flex; flex: none; background: #F2F1EE; border-right: 1px solid #A0A0A0; }
.wbx-vert { writing-mode: vertical-rl; transform: rotate(180deg); background: linear-gradient(90deg, #39424A, #5A6670); color: #fff; font-weight: 700; letter-spacing: .5px; padding: 8px 3px; text-align: right; }
.wbx-items { width: 150px; display: grid; align-content: start; padding: 2px 0; overflow-y: auto; }
.wbx-mi { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px; text-align: left; font: inherit; color: #000; cursor: default; }
.wbx-mi:hover, .wbx-mi:focus-visible { background: #316AC5; color: #fff; outline: none; }
.wbx-mic { width: 16px; height: 16px; display: grid; place-items: center; }
.wbx-arr { margin-left: auto; font-size: 10px; }
.wbx-pop { position: absolute; z-index: 9999; min-width: 150px; background: #F7F6F3; border: 1px solid #808080; box-shadow: 2px 2px 4px rgba(0,0,0,.3); padding: 2px 0; display: grid; }
.wbx-pi { border: 0; background: none; text-align: left; padding: 4px 18px; font: inherit; color: #000; cursor: default; white-space: nowrap; }
.wbx-pi:hover { background: #316AC5; color: #fff; }
.wbx-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wbx-strip { display: none; }
.wbx-mdi { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #808080; }
.wbx-win { position: absolute; display: flex; flex-direction: column; width: 520px; max-width: calc(100% - 8px); max-height: calc(100% - 8px); background: #ECE9E2; border: 1px solid #6E6E6E; box-shadow: 1px 2px 6px rgba(0,0,0,.45); }
.wbx-wh { display: flex; align-items: center; height: 22px; padding-left: 6px; background: linear-gradient(#9DB9EB, #7A96DF); color: #fff; font-weight: 700; cursor: move; flex: none; }
.wbx-win:not(.on) .wbx-wh { background: linear-gradient(#C2CFE5, #A9B8D2); color: #EEF; }
.wbx-wt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-wbtns button { width: 20px; height: 18px; margin-right: 2px; border: 1px solid #fff; border-radius: 3px; background: #D9542B; color: #fff; font-size: 10px; line-height: 1; padding: 0; }
.wbx-wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px; gap: 3px; overflow: auto; }
.wbx-wbody.wbx-term { padding: 0; }
.wbx-wbody.wbx-term .sim-termbox { min-height: 280px; } .wbx-wbody.wbx-term .sim-term { border-radius: 0; } .wbx-wbody.wbx-term .sim-keys { margin: 0; padding: 4px; }
.wbx-win.termwin { height: 340px; }
.wbx-tabs { display: flex; gap: 0; border-bottom: 1px solid #919B9C; padding-left: 2px; }
.wbx-tab { border: 1px solid #919B9C; border-bottom: 0; background: #F4F3EE; padding: 2px 10px; margin-right: -1px; font: inherit; color: #000; border-radius: 3px 3px 0 0; position: relative; top: 1px; }
.wbx-tab.on { background: #FCFCFE; border-top: 2px solid #E68B2C; padding-bottom: 3px; }
.wbx-tab:disabled { color: #8a8a8a; }
.wbx-tb { display: flex; align-items: center; gap: 2px; }
.wbx-tbtn { min-width: 24px; height: 22px; border: 1px solid #A0A0A0; background: linear-gradient(#FFF, #E3E3E3); border-radius: 2px; font: 700 14px/1 Tahoma, sans-serif; padding: 0 4px; }
.wbx-tbtn.plus { color: #1E8B1E; } .wbx-tbtn.minus { color: #C00; } .wbx-tbtn.ok { color: #1E8B1E; } .wbx-tbtn.no { color: #C00; }
.wbx-tbtn.txt { font: 12px Tahoma, sans-serif; color: #000; padding: 0 8px; }
.wbx-tbtn:disabled { color: #AAA !important; background: #EFEFEF; }
.wbx-tbtn:hover:not(:disabled) { border-color: #316AC5; }
.wbx-sp { flex: 1; }
.wbx-find { width: 130px; height: 20px; border: 1px solid #7F9DB9; padding: 0 4px; font: inherit; }
.wbx-grid { flex: 1; min-height: 120px; overflow: auto; background: #fff; border: 1px solid #7F9DB9; }
.wbx-tbl { border-collapse: collapse; width: 100%; font: inherit; }
.wbx-tbl th { position: sticky; top: 0; background: linear-gradient(#FFF, #EBEAE6); border-right: 1px solid #D0CFC9; border-bottom: 1px solid #C0BFB9; text-align: left; padding: 2px 6px; font-weight: 400; white-space: nowrap; }
.wbx-tbl td { padding: 1px 6px; white-space: nowrap; border-right: 1px solid #F0F0F0; cursor: default; }
.wbx-tbl .fl { width: 22px; color: #555; }
.wbx-tbl tr.dis td { color: #8a8a8a; }
.wbx-tbl tr.dyn td { color: #1F3FA0; }
.wbx-tbl tr.is-sel td { background: #316AC5; color: #fff; }
.wbx-tbl tr:focus { outline: 1px dotted #000; outline-offset: -1px; }
.wbx-foot { color: #333; padding: 1px 2px; border-top: 1px solid #fff; }
.wbx-empty { padding: 12px; color: #555; }
.wbx-dlg { display: flex; gap: 8px; }
.wbx-dmain { flex: 1; min-width: 0; display: grid; gap: 4px; align-content: start; }
.wbx-pane { display: grid; gap: 4px; padding: 8px 6px; background: #ECE9E2; border: 1px solid #919B9C; border-top: 0; }
.wbx-dmain > .wbx-pane:first-child { border-top: 1px solid #919B9C; }
.wbx-row { display: flex; align-items: center; gap: 6px; }
.wbx-row.top { align-items: start; }
.wbx-row.r { justify-content: flex-end; }
.wbx-lbl { width: 120px; flex: none; text-align: right; }
.wbx-in { flex: 1; min-width: 0; height: 20px; border: 1px solid #7F9DB9; padding: 0 4px; font: 12px Tahoma, sans-serif; background: #fff; color: #000; }
select.wbx-in { padding: 0 1px; }
.wbx-in:disabled { background: #F5F4EF; color: #333; }
.wbx-req { width: 12px; flex: none; color: #555; font-size: 10px; }
.wbx-dbtns { display: grid; gap: 4px; align-content: start; width: 92px; flex: none; }
.wbx-btn { height: 23px; min-width: 76px; border: 1px solid #003C74; border-radius: 3px; background: linear-gradient(#FFF, #ECEBE6); font: 12px Tahoma, sans-serif; color: #000; padding: 0 8px; }
.wbx-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #F8B636; }
.wbx-btn:disabled { color: #AAA; border-color: #C9C7BA; }
.wbx-dst { display: flex; gap: 0; border-top: 1px solid #A0A0A0; margin: 2px -4px -4px; }
.wbx-dst > span, .wbx-dst:not(:has(span)) { padding: 1px 6px; border-right: 1px solid #A0A0A0; min-width: 70px; }
.wbx-derr { color: #B00000; background: #FFF4F4; border: 1px solid #E8B5B5; padding: 3px 6px; user-select: text; }
.wbx-hint { margin: 2px 0 0; color: #444; font-size: 11.5px; user-select: text; }
.wbx-cb { display: flex; align-items: center; gap: 6px; }
.wbx-multi { flex: 1; display: grid; gap: 2px; min-width: 0; }
.wbx-mrow { display: flex; gap: 2px; }
.wbx-mini { width: 20px; height: 20px; border: 1px solid #A0A0A0; background: #F7F6F3; padding: 0; font-weight: 700; } .wbx-mini.sp { border: 0; background: none; }
.wbx-pout { margin: 4px 0 0; background: #fff; border: 1px solid #7F9DB9; padding: 4px; font: 11.5px/1.3 "Lucida Console", var(--mono); max-height: 200px; overflow: auto; user-select: text; }
.wbx-wiz { display: grid; gap: 8px; padding: 10px; }
.wbx-wq { margin: 0; font-weight: 700; }
.wbx-ask { padding: 12px; display: grid; gap: 10px; }
.wbx-ask p { margin: 0; }
.wbx-status { display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; border-top: 1px solid #A0A0A0; background: #ECE9E2; white-space: nowrap; overflow-x: auto; user-select: text; min-height: 22px; }
.wbx-st-k { font-weight: 700; color: #39424A; }
.wbx-status code { font: 11.5px "Lucida Console", var(--mono); background: #fff; border: 1px solid #ccc; padding: 0 4px; }
.wbx-st-e { color: #B00000; }
@media (max-width: 720px) {
  .wbx-title, .wbx-bar { display: none; }
  .wbx-main { flex-direction: column; }
  .wbx-menu { border-right: 0; border-bottom: 1px solid #A0A0A0; }
  .wbx-vert { display: none; }
  .wbx-items { width: auto; display: flex; overflow-x: auto; padding: 0; }
  .wbx-mi { white-space: nowrap; padding: 8px 10px; }
  .wbx-strip { display: flex; gap: 2px; overflow-x: auto; background: #B8B4AA; padding: 2px; }
  .wbx-sb { border: 1px solid #888; background: #E8E6E0; padding: 4px 8px; font: inherit; white-space: nowrap; }
  .wbx-sb.on { background: #fff; font-weight: 700; }
  .wbx-mdi { overflow: auto; background: #ECE9E2; }
  .wbx-win { position: static; width: auto !important; max-width: none; max-height: none; height: 100%; border: 0; box-shadow: none; display: none; }
  .wbx-win.on { display: flex; }
  .wbx-wh { cursor: default; }
  .wbx-dlg { flex-direction: column; }
  .wbx-dbtns { width: auto; display: flex; flex-wrap: wrap; }
  .wbx-lbl { width: 96px; }
  .wbx-in, .wbx-find { font-size: 16px; height: 30px; }
  .wbx-tbtn { min-width: 34px; height: 30px; }
  .wbx-btn { height: 32px; }
}

/* ---------- Wi-Fi v plánku ---------- */
.sim-canvas .link.wifi { stroke: #2E6F86; stroke-width: 2.2; stroke-dasharray: 2 6; opacity: .85; }
.sim-canvas .plabel.wifi { fill: #2E6F86; font-weight: 700; }
/* Wi-Fi panel ve Windows */
.w-fly { position: absolute; right: 8px; bottom: 54px; width: min(360px, calc(100% - 16px)); max-height: calc(100% - 70px); overflow: auto; background: rgba(243,243,243,.98); border: 1px solid rgba(0,0,0,.15); border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.35); z-index: 6; padding: 12px; display: grid; gap: 8px; align-content: start; }
.w-fly-h { display: flex; justify-content: space-between; align-items: center; }
.w-fly-n { margin: 0; color: #444; }
.w-wlist { display: grid; gap: 4px; }
.w-wn { border-radius: 6px; background: #fff; border: 1px solid #E5E5E5; }
.w-wn.on, .w-wn.open { border-color: #99C9EE; background: #F2F8FD; }
.w-wn-h { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 10px; text-align: left; font: inherit; color: inherit; }
.w-wn-t { flex: 1; display: grid; }
.w-wn-b { display: grid; gap: 8px; padding: 0 10px 10px 40px; }
.w-row.r { justify-content: flex-end; }
.w-lockic { font-size: 12px; opacity: .7; }

/* ---------- Domácí router: okno zařízení ---------- */
.hrd { display: grid; gap: 14px; align-content: start; }
.hrd-back { background: linear-gradient(#2B3238, #1D2226); border-radius: 12px; padding: 12px 14px; color: #C8D2D8; }
.hrd-title { margin-bottom: 8px; opacity: .8; }
.hrd-ports { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.hrd-port { display: grid; justify-items: center; gap: 4px; font: 700 11px var(--body); }
.hrd-jack { width: 38px; height: 30px; border-radius: 3px; background: #0F1215; border: 2px solid #3A444B; display: grid; place-items: end center; padding-bottom: 3px; position: relative; }
.hrd-jack i { width: 18px; height: 8px; background: #2A3136; border-radius: 1px; }
.hrd-port.wan .hrd-jack { border-color: #2E7FB0; }
.hrd-port.up .hrd-jack::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #3CD070; box-shadow: 0 0 6px #3CD070; }
.hrd-pwr { display: grid; justify-items: center; gap: 4px; font: 700 10px var(--body); margin-left: auto; }
.hrd-btnr { width: 12px; height: 12px; border-radius: 50%; background: #0F1215; border: 2px solid #555; }
.hrd-label { background: #fff; border: 1px dashed #B9C3C6; border-radius: 10px; padding: 12px 14px; max-width: 420px; font-size: .9rem; }
.hrd-lt { font-weight: 800; margin-bottom: 6px; }
.hrd-label dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; }
.hrd-label dt { color: var(--muted); } .hrd-label dd { margin: 0; font-family: var(--mono); }
.hrd-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.hrd > .hrw { min-height: 460px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

/* ---------- Domácí router: webová správa ---------- */
.hrw { display: flex; flex-direction: column; min-height: 100%; background: #F2F5F7; color: #1E2A32; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; }
.hrw-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #183B4A; color: #fff; }
.hrw-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #2E8AA8; }
.hrw-brand { font-weight: 700; font-size: 16px; }
.hrw-model { opacity: .65; font-size: 12px; }
.hrw-sp { flex: 1; }
.hrw-who { font-size: 12px; opacity: .8; }
.hrw-out { border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.hrw-body { flex: 1; display: flex; min-height: 0; }
.hrw-nav { width: 200px; flex: none; background: #fff; border-right: 1px solid #DDE4E8; padding: 8px; display: grid; align-content: start; gap: 2px; }
.hrw-ni { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 10px; border-radius: 8px; text-align: left; font: inherit; color: #33454F; cursor: pointer; }
.hrw-ni:hover { background: #EEF4F7; } .hrw-ni.on { background: #E0F0F5; color: #135A70; font-weight: 600; }
.hrw-main { flex: 1; min-width: 0; padding: 16px 18px; overflow: auto; display: grid; gap: 12px; align-content: start; }
.hrw-h { margin: 0; font-size: 20px; font-weight: 600; }
.hrw-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); display: grid; gap: 10px; }
.hrw-card h3 { margin: 0; font-size: 15px; }
.hrw-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hrw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hrw-big { font-size: 28px; font-weight: 700; color: #135A70; }
.hrw-f { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: start; }
.hrw-fl { padding-top: 7px; color: #45565F; }
.hrw-fc { display: grid; gap: 4px; max-width: 360px; }
.hrw-hint { font-size: 12px; color: #6A7B84; }
.hrw-in { height: 34px; border: 1px solid #C5D1D7; border-radius: 6px; padding: 0 10px; font: inherit; background: #fff; color: inherit; width: 100%; box-sizing: border-box; }
.hrw-in:focus { outline: none; border-color: #2E8AA8; box-shadow: 0 0 0 3px rgba(46,138,168,.18); }
.hrw-in:disabled { background: #F2F5F7; }
.hrw-row { display: flex; gap: 6px; }
.hrw-eye { border: 1px solid #C5D1D7; background: #fff; border-radius: 6px; width: 38px; }
.hrw-sub { display: grid; gap: 8px; padding: 10px 0 0 24px; }
.hrw-radio { display: flex; gap: 10px; align-items: start; padding: 6px 0; }
.hrw-radio input { margin-top: 4px; accent-color: #2E8AA8; }
.hrw-radio > span { display: grid; }
.hrw-actions { display: flex; justify-content: flex-end; gap: 8px; } .hrw-actions.l { justify-content: flex-start; flex-wrap: wrap; }
.hrw-btn { min-height: 34px; padding: 0 16px; border-radius: 6px; border: 1px solid #C5D1D7; background: #fff; font: 600 13px inherit; color: #1E2A32; cursor: pointer; }
.hrw-btn.pri { background: #2E8AA8; border-color: #2E8AA8; color: #fff; } .hrw-btn.pri:hover { background: #25768F; }
.hrw-btn.danger { color: #B3261E; border-color: #E3B4B0; }
.hrw-btn.wide { width: 100%; }
.hrw-err { color: #B3261E; background: #FCEDEC; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.hrw-warn { background: #FFF5D6; border: 1px solid #F0D27A; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.hrw-link { border: 0; background: none; color: #135A70; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.hrw-muted { color: #6A7B84; margin: 0; } .hrw-muted.small, .hrw .small { font-size: 12px; }
.hrw-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; }
.hrw-kv dt { color: #6A7B84; } .hrw-kv dd { margin: 0; font-weight: 600; } .hrw-kv dd.ok { color: #1E7A45; } .hrw-kv dd.bad { color: #B3261E; }
.hrw-map { display: flex; align-items: center; background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); overflow-x: auto; }
.hrw-node { display: grid; justify-items: center; gap: 2px; min-width: 110px; text-align: center; font-size: 12px; color: #6A7B84; }
.hrw-node > span:first-child { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #E0F0F5; color: #135A70; }
.hrw-node.bad > span:first-child { background: #FCEDEC; color: #B3261E; }
.hrw-node strong { color: #1E2A32; font-size: 13px; }
.hrw-line { flex: 1; min-width: 30px; height: 3px; border-radius: 2px; background: #3AA66B; margin-bottom: 30px; } .hrw-line.bad { background: repeating-linear-gradient(90deg, #D9534F 0 6px, transparent 6px 11px); }
.hrw-tog { width: 44px; height: 24px; border-radius: 12px; border: 0; background: #B9C6CC; position: relative; cursor: pointer; padding: 0; margin-top: 5px; }
.hrw-tog span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.hrw-tog.on { background: #2E8AA8; } .hrw-tog.on span { left: 23px; }
.hrw-tblw { overflow-x: auto; }
.hrw-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.hrw-tbl th { text-align: left; color: #6A7B84; font-weight: 600; border-bottom: 1px solid #DDE4E8; padding: 6px 8px; white-space: nowrap; }
.hrw-tbl td { padding: 6px 8px; border-bottom: 1px solid #EEF2F4; white-space: nowrap; }
.hrw-tbl td.ok { color: #1E7A45; font-weight: 600; } .hrw-tbl td.muted { color: #9AA8AF; }
.hrw .mono { font-family: Consolas, var(--mono); }
.hrw-ports { display: flex; gap: 8px; flex-wrap: wrap; }
.hrw-port { display: grid; justify-items: center; gap: 2px; padding: 8px 10px; border: 1px solid #DDE4E8; border-radius: 8px; min-width: 70px; }
.hrw-led { width: 9px; height: 9px; border-radius: 50%; background: #C9D2D6; } .hrw-port.up .hrw-led { background: #3AA66B; }
.hrw-port.wan { border-color: #9CC8DA; }
.hrw-login { flex: 1; display: grid; place-items: center; padding: 30px 16px; background: linear-gradient(160deg, #183B4A, #2E6F86); min-height: 420px; }
.hrw-lbox { width: min(360px, 100%); background: #fff; border-radius: 14px; padding: 26px 24px; display: grid; gap: 10px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.hrw-lbox h2 { margin: 0; font-size: 18px; }
.hrw-llogo { justify-self: center; color: #2E8AA8; }
@media (max-width: 640px) {
  .hrw-body { flex-direction: column; }
  .hrw-nav { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #DDE4E8; padding: 4px; }
  .hrw-ni { white-space: nowrap; }
  .hrw-f { grid-template-columns: 1fr; gap: 4px; } .hrw-fl { padding-top: 0; }
  .hrw-model, .hrw-who { display: none; }
  .hrw-grid3 { grid-template-columns: 1fr 1fr 1fr; } .hrw-big { font-size: 22px; }
  .hrw-in { font-size: 16px; }
}
.w-page > .hrw { min-height: 100%; }
.hrw h2, .hrw h3 { font-family: inherit; }

/* =================== správce oken (wm) =================== */
.w-area, .nw-area { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wm-win { position: absolute; display: flex; flex-direction: column; pointer-events: auto; background: #fff; border: 1px solid rgba(0,0,0,.28); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.28); overflow: hidden; min-width: 240px; }
.wm-win.on { box-shadow: 0 18px 46px rgba(0,0,0,.38); }
.wm-win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.wm-head { display: flex; align-items: center; gap: 8px; height: 32px; padding-left: 10px; flex: none; user-select: none; cursor: default; }
.wm-tt { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-ctl { display: flex; height: 100%; align-self: stretch; }
.wm-ctl button { width: 46px; border: 0; background: none; color: inherit; display: grid; place-items: center; cursor: default; }
.wm-ctl button:hover { background: rgba(127,127,127,.2); } .wm-ctl button.x:hover { background: #C42B1C; color: #fff; }
.wm-i { display: block; width: 10px; height: 10px; position: relative; }
.wm-i.min::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid currentColor; }
.wm-i.max { border: 1px solid currentColor; border-radius: 1px; }
.wm-i.x::before, .wm-i.x::after { content: ""; position: absolute; left: -1px; right: -1px; top: 4.5px; border-top: 1px solid currentColor; transform: rotate(45deg); }
.wm-i.x::after { transform: rotate(-45deg); }
.wm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.wm-grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.wm-win.max .wm-grip { display: none; }
.wm-shade { position: absolute; inset: 0; pointer-events: auto; background: rgba(0,0,0,.08); }
.wm-win.wm-modal { box-shadow: 0 20px 60px rgba(0,0,0,.45); }
@media (max-width: 720px) {
  .wm-win:not(.wm-modal) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; border: 0; }
  .wm-win.wm-modal { left: 6px !important; right: 6px; width: auto !important; max-height: calc(100% - 12px); top: 6px !important; }
  .wm-grip { display: none; }
}

/* =================== Windows 11 – plocha a okna =================== */
.w11 .w-desk { position: relative; }
.w11 .w-icons { z-index: 0; }
.w11w { background: #F3F3F3; color: #1b1b1b; font: 12.5px/1.4 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; border-color: rgba(0,0,0,.2); }
.w11w .wm-head { background: #EEF1F5; }
.w11w.on .wm-head { background: #E9EDF3; }
.w11w.dark { background: #0C0C0C; } .w11w.dark .wm-head { background: #202020; color: #fff; }
.w11w.dark .wm-body > .sim-termbox { flex: 1; min-height: 0; } .w11w.dark .sim-term { border-radius: 0; }
.w11w.dark .sim-keys { background: #1b1b1b; margin: 0; padding: 6px; } .w11w.dark .kbtn { background: #2b2b2b; color: #eee; border-color: #444; }
.wm-ico .w-ai.xs, .w-ai.xs { width: 16px; height: 16px; border-radius: 4px; } .w-ai.xs svg { width: 12px; height: 12px; }
.w-ai.md { width: 34px; height: 34px; border-radius: 50%; } .w-ai.md svg { width: 22px; height: 22px; }
.is-srv .w-task { justify-content: space-between; }
.w-task.srv { background: #1F2A36; color: #fff; } .w-task.srv .w-tc { justify-content: flex-start; } .w-task.srv .w-tbtn { color: #fff; } .w-task.srv .w-search { background: rgba(255,255,255,.12); color: #ddd; }
.w-search { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(255,255,255,.75); color: #555; font-size: 12px; margin: 0 6px; }
.w-tbtn.run::after { content: ""; position: absolute; bottom: 2px; left: 17px; right: 17px; height: 3px; border-radius: 2px; background: #8A8A8A; }
.w-tbtn.on::after { left: 13px; right: 13px; background: #0067C0; }
.w-tray-i { font-size: 11px; opacity: .75; display: grid; place-items: center; }
.w-st-s { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 17px; background: #fff; border: 1px solid #DDD; color: #666; margin-bottom: 16px; font-size: 12px; }
.w-st-pc { margin-left: auto; color: #666; font-size: 12px; }
.w-fly-f { border-top: 1px solid #E5E5E5; padding-top: 8px; }
.w-link { border: 0; background: none; color: #0067C0; font: inherit; padding: 0; cursor: pointer; text-decoration: none; }
.w-link:hover { text-decoration: underline; } .w-link.dis { color: #8a8a8a; }
@media (max-width: 640px) { .w-search, .w-tray-i { display: none; } }

/* společné prvky dialogů */
.w-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; background: #F3F3F3; border-top: 1px solid #E5E5E5; flex: none; margin-top: auto; }
.w11w .w-btn { min-width: 84px; }
.w-dlgw .wm-body { background: #F0F0F0; }
.w-dlgw .w-tabs { margin: 10px 10px 0; }
.w-dlgw .w-pane { margin: 0 10px 10px; display: grid; gap: 8px; }
.w-pane.flat { border: 0; background: none; margin: 10px; padding: 0; }
.w-tabs span.dis { color: #8a8a8a; background: #F0F0F0; }
.w-fs { border: 1px solid #D5D5D5; border-radius: 3px; padding: 8px 10px 10px; margin: 0; display: grid; gap: 6px; }
.w-fs legend { padding: 0 4px; }
.w-fs legend .w-radio { display: inline-flex; }
.w-kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px; }
.w-act { display: flex; justify-content: space-between; align-items: center; color: #555; padding: 4px 10px; }
.w-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .w-row.r { justify-content: flex-end; }
.w-hwbox { display: flex; align-items: center; gap: 8px; border: 1px solid #ADADAD; background: #fff; padding: 6px 8px; }
.w-ilist { border: 1px solid #ADADAD; background: #fff; max-height: 150px; overflow: auto; }
.w-ii { display: flex; gap: 8px; align-items: center; padding: 3px 6px; cursor: default; }
.w-ii.is-sel { background: #CCE8FF; } .w-ii input { margin: 0; }
.w-ptbl { border: 1px solid #ADADAD; background: #fff; max-height: 240px; overflow: auto; font-size: 12px; }
.w-ptr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 6px; white-space: pre-line; }
.w-ptr.th { background: #F5F5F5; border-bottom: 1px solid #DDD; position: sticky; top: 0; }
.w-msgw .wm-body { background: #fff; }
.w-msg { display: flex; gap: 14px; padding: 18px 18px 14px; }
.w-msg-t p { margin: 0 0 8px; } .w-msg-t p.first { color: #003399; font-size: 14px; }
.w-err { color: #C42B1C; background: #FDE7E9; border: 1px solid #F1BBBC; padding: 6px 8px; border-radius: 4px; }
.w-progress { height: 14px; background: #E6E6E6; border: 1px solid #BCBCBC; overflow: hidden; position: relative; }
.w-progress > span { position: absolute; top: 0; bottom: 0; width: 35%; background: #06B025; animation: wprog 1s linear infinite; }
.w-progress.det > span { animation: none; left: 0; transition: width .25s; }
@keyframes wprog { from { left: -35%; } to { left: 100%; } }
.w-copy { padding: 14px 16px; display: grid; gap: 8px; }
.w-copy p { margin: 0; }

/* Síťová připojení */
.w-addr { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border-bottom: 1px solid #E5E5E5; }
.w-navb { color: #666; letter-spacing: 4px; font-size: 13px; }
.w-crumb { flex: 1; border: 1px solid #DDD; padding: 4px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-srch { border: 1px solid #DDD; padding: 4px 8px; border-radius: 4px; color: #888; white-space: nowrap; }
.w-cmdbar { display: flex; gap: 4px; padding: 4px 8px; background: #F9F9F9; border-bottom: 1px solid #E5E5E5; flex-wrap: wrap; align-items: center; }
.w-cb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 0; border-radius: 4px; background: none; font: inherit; color: #1b1b1b; }
.w-cb:hover:not(:disabled) { background: #E8E8E8; } .w-cb:disabled { opacity: .4; }
.w-cbsep { width: 1px; height: 20px; background: #DDD; margin: 0 4px; } .w-cbsp { flex: 1; }
.w-nc-grid { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 10px; background: #fff; overflow: auto; }
.w-nc { display: flex; gap: 10px; align-items: center; width: 290px; padding: 8px; border: 1px solid transparent; border-radius: 3px; background: none; text-align: left; font: inherit; color: inherit; }
.w-nc:hover { background: #E5F3FF; } .w-nc.is-sel { background: #CCE8FF; border-color: #99D1FF; }
.w-nc-i { color: #2F5C9E; position: relative; } .w-nc-i.off { color: #8A8A8A; } .w-nc-i.off::after { content: "✕"; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: #C42B1C; color: #fff; font-size: 9px; display: grid; place-items: center; }
.w-nc-t { display: grid; } .w-nc-t .muted { color: #6d6d6d; } .w-nc-t .bad { color: #6d6d6d; }
.w-status { padding: 3px 10px; border-top: 1px solid #E5E5E5; background: #fff; color: #555; }

/* Průzkumník */
.w-ex { height: 100%; }
.w-ex-top { background: #F3F3F3; }
.w-ex-navb { display: flex; }
.w-ex-navb button { width: 30px; height: 30px; }
.w-ex-navb button:disabled { color: #BBB; }
.w-ex-addr { display: flex; align-items: center; cursor: text; }
.w-ex-crumb { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; width: 100%; }
.w-ex-sep { color: #888; } .w-ex-cp { padding: 0 2px; } .w-ex-ci { margin-right: 2px; }
.w-ex-ain { width: 100%; border: 0; outline: none; font: inherit; background: none; }
.w-ex-search { display: flex; align-items: center; gap: 6px; width: 200px; height: 30px; padding: 0 8px; border: 1px solid #E0E0E0; border-radius: 4px; background: #fff; color: #888; white-space: nowrap; overflow: hidden; }
.w-ex-cmd { display: flex; gap: 2px; padding: 4px 8px; border-bottom: 1px solid #E5E5E5; background: #F9F9F9; flex-wrap: wrap; align-items: center; }
.w-ex-c { outline: none; background: #fff; }
.w-ex-status { display: flex; gap: 18px; padding: 3px 12px; border-top: 1px solid #EEE; color: #555; background: #fff; }
.w-ex-perm { margin-left: auto; color: #0067C0; }
.w-drv { width: 100%; }
.w-drv-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-drv-s { color: #6d6d6d; font-size: 12px; }
.w-cap.bad > span { background: #C42B1C; }
.w-hint { color: #666; margin: 10px 4px; max-width: 520px; }
.w-infobar { background: #FFF4CE; border: 1px solid #F0D27A; padding: 6px 10px; margin-bottom: 8px; }
.w-qa { display: flex; flex-wrap: wrap; gap: 8px; }
.w-qa-i { display: grid; justify-items: center; gap: 4px; width: 110px; padding: 10px 4px; border: 1px solid transparent; border-radius: 4px; background: none; font: inherit; }
.w-qa-i:hover { background: #E5F3FF; } .w-qa-ic { font-size: 32px; }
.w-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.w-share { display: flex; gap: 10px; align-items: center; width: 230px; padding: 8px; border: 1px solid transparent; border-radius: 4px; background: none; text-align: left; font: inherit; }
.w-share:hover { background: #E5F3FF; } .w-share-i { font-size: 30px; } .w-share span:last-child { display: grid; }
.w-empty-i { font-size: 22px; margin-right: 8px; }

/* Průvodce (Připojit síťovou jednotku) */
.w-wiz .wm-body { background: #fff; }
.w-wiz-in { padding: 18px 28px; display: grid; gap: 10px; align-content: start; flex: 1; overflow: auto; }
.w-wiz-h { margin: 0 0 4px; font: 400 17px "Segoe UI", sans-serif; color: #003399; }
.w-wiz-in p { margin: 0; }
.w-wiz-g { display: grid; grid-template-columns: 90px 1fr; gap: 8px 10px; align-items: center; }
.w-wiz-g .w-row .w-in { flex: 1; }
.w-wiz-ex { color: #555; font-size: 12px; margin-top: -4px; }
.w-wiz-top { display: grid; gap: 2px; padding: 12px 20px; border-bottom: 1px solid #E5E5E5; background: #fff; }
.w-wiz-top span { color: #555; padding-left: 14px; }
.w-wiz-f { display: grid; grid-template-columns: 170px auto; gap: 8px; align-items: center; justify-content: start; }
.w-busy { display: flex; gap: 10px; align-items: center; color: #333; }
.w-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #0067C0; border-right-color: transparent; animation: wspin .8s linear infinite; }
@keyframes wspin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .w-wiz-g, .w-wiz-f, .w-kv { grid-template-columns: 1fr; } .w-wiz-in { padding: 14px; } .w-ex-search { display: none; } }

/* Zabezpečení Windows */
.w-sec { border-radius: 8px; }
.w-sec .wm-head { background: #fff !important; }
.w-sec .wm-body { background: #fff; }
.w-sec-in { padding: 6px 24px 14px; display: grid; gap: 10px; }
.w-sec-in h2 { margin: 0; font: 600 20px "Segoe UI", sans-serif; }
.w-sec-in p { margin: 0; }
.w-sec .w-in { height: 32px; border-radius: 4px; border-bottom: 2px solid #868686; }
.w-sec .w-in:focus { border-bottom-color: #0067C0; }
.w-pw { position: relative; } .w-pw .w-in { width: 100%; box-sizing: border-box; padding-right: 36px; }
.w-eye { position: absolute; right: 2px; top: 2px; width: 30px; height: 28px; border: 0; background: none; opacity: .6; }
.w-sec-err { color: #C42B1C; }
.w-sec-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 24px; background: #F3F3F3; }
.w-sec-foot .w-btn { height: 32px; }
.w-notepad .wm-body { background: #fff; }
.w-np-menu { padding: 3px 8px; border-bottom: 1px solid #E5E5E5; color: #444; }
.w-np-in { padding: 10px; display: grid; gap: 6px; flex: 1; }
.w-np-ta { min-height: 130px; font: 13px Consolas, var(--mono); border: 1px solid #DDD; padding: 6px; resize: vertical; }

/* =================== Windows Server: Správce serveru, konzole =================== */
.w-smw .wm-body { background: #fff; }
.smgr { position: relative; display: flex; flex-direction: column; height: 100%; }
.sm-top { display: flex; align-items: center; gap: 4px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #E5E5E5; }
.sm-crumb { font: 300 18px "Segoe UI", sans-serif; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-crumb strong { font-weight: 600; }
.sm-back { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2E5D8E; color: #fff; font-size: 14px; margin-right: 8px; vertical-align: middle; }
.sm-sp { flex: 1; } .sm-flag { color: #2E5D8E; margin-right: 8px; }
.sm-mb { border: 0; background: none; font: inherit; padding: 4px 8px; color: #333; }
.sm-mb:hover { background: #E5F1FB; }
.sm-menu { position: absolute; z-index: 5; background: #fff; border: 1px solid #CCC; box-shadow: 2px 4px 10px rgba(0,0,0,.2); display: grid; min-width: 260px; padding: 2px 0; }
.sm-mi { border: 0; background: none; text-align: left; padding: 6px 16px; font: inherit; }
.sm-mi:hover:not(:disabled) { background: #E5F1FB; } .sm-mi:disabled { color: #999; }
.sm-body { flex: 1; display: flex; min-height: 0; }
.sm-nav { width: 180px; flex: none; background: #F2F2F2; border-right: 1px solid #E0E0E0; padding: 4px 0; display: grid; align-content: start; }
.sm-ni { display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 7px 12px; text-align: left; font: inherit; color: #333; }
.sm-ni:hover { background: #E5F1FB; } .sm-ni.on { background: #CDE6F7; font-weight: 600; }
.sm-ni-i { width: 16px; color: #2E5D8E; }
.sm-main { flex: 1; min-width: 0; overflow: auto; padding: 12px 16px; display: grid; gap: 12px; align-content: start; }
.sm-welcome { display: grid; grid-template-columns: 220px 1fr; border: 1px solid #DDD; }
.sm-wl { background: #2E5D8E; color: #fff; padding: 14px; font: 600 14px "Segoe UI", sans-serif; letter-spacing: .5px; }
.sm-qs { display: grid; grid-template-columns: 110px 1fr; }
.sm-qs-l { background: #3F7FBF; color: #fff; padding: 14px 10px; font-weight: 600; }
.sm-steps { display: grid; gap: 4px; padding: 10px 14px; }
.sm-step { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; text-align: left; color: #1F5FA0; padding: 3px 0; cursor: pointer; }
.sm-step.dis { color: #999; cursor: default; }
.sm-step:hover:not(.dis) { text-decoration: underline; }
.sm-sn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2E5D8E; color: #fff; font-size: 12px; }
.sm-sec { font: 600 13px "Segoe UI", sans-serif; color: #333; border-bottom: 1px solid #DDD; padding-bottom: 4px; display: flex; gap: 14px; align-items: baseline; }
.sm-sub { font-weight: 400; color: #666; font-size: 12px; }
.sm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sm-tile { border: 1px solid #DDD; background: #fff; }
.sm-tile-h { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: #2E5D8E; color: #fff; padding: 8px 10px; font: inherit; text-align: left; cursor: pointer; }
.sm-tile.bad .sm-tile-h { background: #B33A3A; }
.sm-cnt { font-size: 18px; font-weight: 300; }
.sm-tr { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-top: 1px solid #F0F0F0; }
.sm-dot { width: 8px; height: 8px; border-radius: 50%; background: #2E9D4E; } .sm-tr.bad .sm-dot { background: #C42B1C; }
.sm-tr.bad { background: #FBE9E9; }
.sm-n { margin-left: auto; font-weight: 700; color: #C42B1C; }
.sm-props { display: grid; grid-template-columns: 240px 1fr; gap: 6px 16px; }
.sm-pk { color: #555; } .sm-pv { color: #1b1b1b; }
.sm-link { border: 0; background: none; padding: 0; color: #1F5FA0; font: inherit; text-align: left; cursor: pointer; }
.sm-link:hover { text-decoration: underline; }
.sm-hint { color: #666; max-width: 640px; margin: 0; }
.sm-grid { border: 1px solid #DDD; }
.sm-gr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 8px; }
.sm-gr.th { background: #F5F5F5; color: #555; border-bottom: 1px solid #DDD; }
.sm-gr.bad { background: #FBE9E9; }
.sm-row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .sm-nav { display: none; } .sm-welcome, .sm-qs, .sm-props { grid-template-columns: 1fr; } .sm-gr { grid-template-columns: repeat(2, 1fr); } }
/* průvodce rolemi */
.w-rw .wm-body { background: #fff; }
.rwz { flex: 1; display: flex; min-height: 0; }
.rw-steps { width: 170px; flex: none; padding: 60px 0 10px; display: grid; align-content: start; gap: 2px; }
.rw-s { padding: 4px 16px; color: #1F5FA0; } .rw-s.on { background: #CDE6F7; font-weight: 600; color: #1b1b1b; } .rw-s.done { color: #555; }
.rw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rw-head { display: flex; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; }
.rw-head h2 { margin: 0; font: 300 22px "Segoe UI", sans-serif; }
.rw-dest { text-align: right; font-size: 11px; color: #555; }
.rw-content { flex: 1; overflow: auto; padding: 4px 18px 14px; display: grid; gap: 8px; align-content: start; }
.rw-content p { margin: 0; }
.rw-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rw-list { border: 1px solid #DDD; max-height: 260px; overflow: auto; }
.rw-ri { display: flex; gap: 8px; align-items: center; padding: 3px 8px; } .rw-ri.dis { color: #999; } .rw-ri:hover { background: #E5F1FB; }
.rw-desc { color: #444; margin-top: 6px; }
.rw-grid { border: 1px solid #DDD; } .rw-gr { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; padding: 4px 8px; } .rw-gr.th { background: #F5F5F5; } .rw-gr.is-sel { background: #CDE6F7; }
.rw-conf li { margin: 4px 0; }
@media (max-width: 720px) { .rw-steps { display: none; } .rw-roles { grid-template-columns: 1fr; } }
/* MMC konzole */
.mmc { display: flex; flex-direction: column; height: 100%; background: #fff; }
.mmc-menu { display: flex; gap: 14px; padding: 3px 8px; border-bottom: 1px solid #E5E5E5; color: #333; }
.mmc-tb { display: flex; gap: 8px; padding: 3px 8px; border-bottom: 1px solid #E5E5E5; color: #666; }
.mmc-tbi { width: 22px; text-align: center; }
.mmc-body { flex: 1; display: grid; grid-template-columns: 230px 1fr 190px; min-height: 0; }
.mmc-tree { border-right: 1px solid #E0E0E0; overflow: auto; padding: 4px 0; }
.mmc-n { display: flex; align-items: center; gap: 4px; padding: 2px 6px; white-space: nowrap; cursor: default; }
.mmc-n:hover { background: #E5F3FF; } .mmc-n.is-sel { background: #CCE8FF; }
.mmc-tw { width: 14px; color: #666; text-align: center; } .mmc-ni { width: 18px; }
.mmc-list { overflow: auto; padding: 0; display: grid; align-content: start; }
.mmc-t { font-size: 12px; }
.mmc-tr { display: grid; gap: 8px; padding: 3px 8px; } .mmc-tr.th { background: #F5F5F5; border-bottom: 1px solid #DDD; color: #444; position: sticky; top: 0; }
.mmc-tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmc-empty { padding: 10px; color: #777; }
.mmc-tip { margin: 8px; padding: 6px 8px; background: #EEF6FC; border: 1px solid #CDE3F4; color: #1F4E79; }
.mmc-tip.bad { background: #FBE9E9; border-color: #F0C2C2; color: #8E1E1E; }
.mmc-act { border-left: 1px solid #E0E0E0; overflow: auto; background: #FAFAFA; display: grid; align-content: start; }
.mmc-ah { background: #E8ECF2; padding: 4px 8px; font-weight: 600; }
.mmc-ag { padding: 4px 8px; font-weight: 600; border-bottom: 1px solid #EEE; }
.mmc-a { border: 0; background: none; text-align: left; padding: 4px 14px; font: inherit; color: #1F5FA0; cursor: pointer; }
.mmc-a:hover:not(:disabled) { background: #E5F1FB; } .mmc-a:disabled, .mmc-a.dis { color: #999; cursor: default; }
.mmc-missing { display: flex; gap: 14px; padding: 24px; }
@media (max-width: 720px) { .mmc-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .mmc-tree { max-height: 140px; border-right: 0; border-bottom: 1px solid #E0E0E0; } .mmc-act { border-left: 0; border-top: 1px solid #E0E0E0; } }
.iis { display: flex; flex-direction: column; height: 100%; background: #fff; }
.iis-addr { display: flex; gap: 10px; padding: 5px 8px; border-bottom: 1px solid #E5E5E5; }
.iis-crumb { border: 1px solid #DDD; padding: 2px 8px; flex: 1; }
.iis-body { flex: 1; display: grid; grid-template-columns: 230px 1fr 190px; min-height: 0; }
.iis-conn { border-right: 1px solid #E0E0E0; overflow: auto; }
.iis-h { background: #E8ECF2; padding: 4px 8px; font-weight: 600; }
.iis-main { overflow: auto; padding: 10px; display: grid; gap: 8px; align-content: start; }
.iis-title { font: 300 18px "Segoe UI", sans-serif; }
.iis-grp { background: #EEF2F7; padding: 2px 8px; font-weight: 600; }
.iis-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.iis-f { display: grid; justify-items: center; gap: 2px; font-size: 11px; text-align: center; color: #333; }
.iis-fi { font-size: 22px; color: #2E5D8E; }
.iis-page { border: 1px dashed #BBB; padding: 8px; display: grid; gap: 4px; }
.iis-status { border-top: 1px solid #E5E5E5; padding: 3px 8px; color: #555; }
@media (max-width: 720px) { .iis-body { grid-template-columns: 1fr; } .iis-conn { display: none; } }

/* =================== NAS OS (webová správa) =================== */
.nw { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 460px; font: 13px/1.45 "Segoe UI", system-ui, sans-serif; color: #263238; background: #DCE6EE; }
.nw-login { flex: 1; display: grid; place-items: center; padding: 30px 16px; background: radial-gradient(120% 90% at 20% 0%, #5E9BC8 0%, #2C5C86 55%, #1C3A57 100%); min-height: 420px; position: relative; }
.nw-lbox { width: min(340px, 100%); background: rgba(255,255,255,.96); border-radius: 14px; padding: 28px 26px; display: grid; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.nw-lhost { font: 600 24px "Segoe UI", sans-serif; text-align: center; }
.nw-lsub { text-align: center; color: #78909C; margin-top: -8px; }
.nw-in { height: 36px; border: 1px solid #C5D1D9; border-radius: 6px; padding: 0 10px; font: inherit; background: #fff; color: inherit; width: 100%; box-sizing: border-box; }
.nw-in:focus { outline: none; border-color: #3D7DD8; box-shadow: 0 0 0 3px rgba(61,125,216,.18); }
.nw-in.sm { height: 30px; width: auto; }
.nw-in:disabled { background: #F2F5F8; }
.nw-step { display: grid; gap: 8px; }
.nw-who { font-weight: 600; }
.nw-lerr { color: #C62828; font-size: 12px; }
.nw-chk { display: flex; align-items: center; gap: 8px; } .nw-chk.big { font-weight: 600; }
.nw-arrow { justify-self: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #3D7DD8; color: #fff; font-size: 20px; cursor: pointer; }
.nw-link { border: 0; background: none; color: #3D7DD8; font: inherit; cursor: pointer; }
.nw-lfoot { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: 12px; }
.nw-top { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 6px; background: rgba(20,36,52,.85); color: #fff; flex: none; z-index: 2; }
.nw-mm { width: 36px; height: 32px; border: 0; border-radius: 6px; background: none; color: #fff; display: grid; place-items: center; }
.nw-mm:hover, .nw-tw:hover { background: rgba(255,255,255,.12); }
.nw-tw { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: #fff; font: inherit; max-width: 180px; }
.nw-tw span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nw-tw.on { background: rgba(255,255,255,.2); }
.nw-sp { flex: 1; }
.nw-user { font-size: 12px; opacity: .9; margin-right: 6px; }
.nw-out { border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 12px; }
.nw-desk { flex: 1; position: relative; min-height: 0; background: radial-gradient(120% 100% at 80% 100%, #4F8DBE 0%, #8DB7D8 45%, #D7E6F1 100%); overflow: hidden; }
.nw-icons { position: absolute; left: 10px; top: 10px; display: grid; gap: 4px; }
.nw-dicon { width: 92px; display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border: 0; border-radius: 8px; background: none; color: #fff; font: 12px/1.25 inherit; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.nw-dicon:hover { background: rgba(255,255,255,.18); }
.nw-ai { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.nw-ai.xs { width: 18px; height: 18px; border-radius: 4px; box-shadow: none; } .nw-ai.xs svg { width: 13px; height: 13px; }
.nw-widgets { position: absolute; right: 10px; top: 10px; width: 230px; display: grid; gap: 8px; }
.nw-wg { background: rgba(255,255,255,.85); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.nw-wgt { font-weight: 600; font-size: 12px; color: #546E7A; }
.nw-health { font-weight: 700; } .nw-health.ok { color: #2E7D32; } .nw-health.warn { color: #E65100; }
.nw-bar { height: 8px; border-radius: 4px; background: #E3EAF0; overflow: hidden; } .nw-bar > span { display: block; height: 100%; background: #3D7DD8; transition: width .25s; }
.nw-win { background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,.18); }
.nw-win .wm-head { background: #F4F7FA; border-bottom: 1px solid #E3EAF0; height: 34px; }
.nw-win .wm-tt { font-size: 13px; font-weight: 600; }
.nw-cp { flex: 1; display: flex; min-height: 0; }
.nw-side { width: 200px; flex: none; background: #F4F7FA; border-right: 1px solid #E3EAF0; padding: 8px; display: grid; align-content: start; gap: 2px; overflow: auto; }
.nw-sideh { font-size: 11px; color: #78909C; text-transform: uppercase; letter-spacing: .4px; padding: 8px 8px 2px; }
.nw-si { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 8px; border-radius: 6px; text-align: left; font: inherit; color: #37474F; }
.nw-si:hover { background: #E7EEF5; } .nw-si.on { background: #DCEAF9; color: #1D5DB5; font-weight: 600; }
.nw-main { flex: 1; min-width: 0; overflow: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.nw-pad { padding: 12px; display: grid; gap: 10px; }
.nw-tb { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nw-btn { height: 30px; padding: 0 14px; border-radius: 6px; border: 1px solid #C5D1D9; background: #fff; font: 600 12.5px inherit; color: #37474F; cursor: pointer; }
.nw-btn:hover:not(:disabled) { border-color: #3D7DD8; } .nw-btn:disabled { opacity: .45; cursor: default; }
.nw-btn.pri { background: #3D7DD8; border-color: #3D7DD8; color: #fff; } .nw-btn.danger { color: #C62828; border-color: #E8B4B4; }
.nw-grid { border: 1px solid #E3EAF0; border-radius: 6px; overflow: auto; background: #fff; }
.nw-gr { display: grid; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #F0F4F7; align-items: center; cursor: default; }
.nw-gr.th { background: #F4F7FA; color: #607D8B; font-weight: 600; position: sticky; top: 0; z-index: 1; }
.nw-gr:not(.th):hover { background: #F2F7FD; } .nw-gr.is-sel { background: #DCEAF9 !important; } .nw-gr.dim { color: #9AA8B1; }
.nw-gr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nw-gr.pm { grid-template-columns: 1.6fr repeat(3, 0.8fr); } .nw-gr.pm .c { text-align: center; }
.nw-gr.pm input { width: 16px; height: 16px; accent-color: #3D7DD8; }
.nw-empty { padding: 16px; color: #78909C; } .nw-empty.big { display: grid; justify-items: center; gap: 10px; padding: 40px; }
.nw-muted { color: #78909C; } .nw .small { font-size: 12px; }
.nw-card { background: #fff; border: 1px solid #E3EAF0; border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; }
.nw-card h4 { margin: 0; font-size: 14px; }
.nw-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0; } .nw-kv dt { color: #78909C; } .nw-kv dd { margin: 0; }
.nw-tabs { display: flex; gap: 2px; border-bottom: 1px solid #E3EAF0; padding: 0 10px; flex: none; }
.nw-tab { border: 0; background: none; padding: 9px 12px; font: 600 12.5px inherit; color: #78909C; border-bottom: 2px solid transparent; }
.nw-tab.on { color: #1D5DB5; border-bottom-color: #3D7DD8; }
.nw-banner { padding: 10px 12px; border-radius: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nw-banner.warn { background: #FFF3E0; border: 1px solid #FFCC80; color: #8D4A00; }
.nw-note { display: grid; gap: 6px; }
.nw-eff { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-chip { padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #ECEFF1; }
.nw-chip.rw { background: #E3F2E5; color: #1B5E20; } .nw-chip.ro { background: #FFF3E0; color: #8D4A00; } .nw-chip.none { background: #FDECEA; color: #B71C1C; }
.nw-f { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; }
.nw-fl { color: #546E7A; } .nw-fc { display: grid; gap: 3px; max-width: 360px; } .nw-hint { font-size: 11.5px; color: #90A4AE; }
.nw-sub { display: grid; gap: 8px; padding-left: 24px; }
.nw-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .nw-row.sp { justify-content: space-between; }
.nw-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #E3EAF0; background: #F8FAFC; flex: none; margin-top: auto; }
.nw-wiz .wm-body { background: #fff; }
.nw-wizb { flex: 1; display: flex; min-height: 0; }
.nw-wsteps { width: 170px; flex: none; background: #F4F7FA; border-right: 1px solid #E3EAF0; padding: 14px 10px; display: grid; align-content: start; gap: 6px; counter-reset: st; }
.nw-wsteps span { counter-increment: st; color: #90A4AE; padding: 4px 6px; border-radius: 6px; }
.nw-wsteps span::before { content: counter(st) ". "; } .nw-wsteps span.on { color: #1D5DB5; background: #DCEAF9; font-weight: 600; } .nw-wsteps span.done { color: #546E7A; }
.nw-wmain { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px; display: grid; gap: 10px; align-content: start; }
.nw-wmain.pad { padding: 14px 18px; }
.nw-wmain h3 { margin: 0; font-size: 15px; }
.nw-pscroll { max-height: 260px; overflow: auto; }
.nw-raids { display: grid; gap: 6px; }
.nw-raid { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid #E3EAF0; border-radius: 8px; cursor: pointer; }
.nw-raid.on { border-color: #3D7DD8; background: #F2F7FD; } .nw-raid > span { display: grid; gap: 1px; } .nw-raid input { margin-top: 3px; }
.nw-capbox { padding: 8px 10px; border-radius: 6px; background: #E8F5E9; color: #1B5E20; font-weight: 600; } .nw-capbox.bad { background: #FDECEA; color: #B71C1C; }
.nw-ovh { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 10px; } .nw-ovh.ok { background: #E8F5E9; } .nw-ovh.warn { background: #FFF3E0; }
.nw-ovi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; background: #2E7D32; } .nw-ovh.warn .nw-ovi { background: #EF6C00; }
.nw-bays { display: flex; gap: 6px; padding: 12px; background: linear-gradient(#37474F, #263238); border-radius: 10px; width: max-content; max-width: 100%; }
.nw-bay { display: grid; justify-items: center; gap: 2px; width: 62px; padding: 8px 4px; border-radius: 4px; background: #455A64; color: #CFD8DC; font-size: 11px; }
.nw-bay.used { background: #546E7A; color: #fff; }
.nw-led { width: 8px; height: 8px; border-radius: 50%; background: #78909C; } .nw-bay.used .nw-led { background: #66BB6A; box-shadow: 0 0 6px #66BB6A; }
.nw-bn { font-weight: 700; }
.nw-ok { color: #2E7D32; font-weight: 600; }
.nw-path { font-weight: 600; } .nw-perm { font-size: 12px; padding: 2px 8px; border-radius: 10px; } .nw-perm.rw { background: #E3F2E5; color: #1B5E20; } .nw-perm.ro { background: #FFF3E0; color: #8D4A00; }
.nw-pop { position: absolute; z-index: 20; background: #fff; border: 1px solid #C5D1D9; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: grid; gap: 2px; min-width: 240px; }
.nw-pop button { border: 0; background: none; text-align: left; padding: 6px 8px; border-radius: 4px; font: inherit; }
.nw-pop button:hover { background: #F2F7FD; }
.nw-msg .wm-body { background: #fff; }
.nw-msgb { display: flex; gap: 14px; padding: 16px; } .nw-msgb p { margin: 0 0 6px; }
.nw-mi { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: #C62828; } .nw-mi.warn { background: #EF6C00; } .nw-mi.info { background: #3D7DD8; }
@media (max-width: 720px) {
  .nw-widgets { display: none; } .nw-side { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #E3EAF0; padding: 4px; } .nw-sideh { display: none; } .nw-si { white-space: nowrap; }
  .nw-cp { flex-direction: column; } .nw-wsteps { display: none; } .nw-f { grid-template-columns: 1fr; gap: 4px; } .nw-in { font-size: 16px; } .nw-user { display: none; }
}
.w-page > .nw { min-height: 100%; height: 100%; }
/* přední panel NASu */
.nas-front { display: flex; gap: 14px; align-items: stretch; padding: 14px; background: linear-gradient(#2F3A40, #1E262A); border-radius: 12px; color: #B0BEC5; width: max-content; max-width: 100%; overflow-x: auto; }
.nas-fl { display: grid; grid-template-columns: auto auto; gap: 6px 8px; align-content: center; font-size: 10px; }
.nas-led2 { width: 9px; height: 9px; border-radius: 50%; background: #455A64; align-self: center; }
.nas-led2.ok { background: #66BB6A; box-shadow: 0 0 6px #66BB6A; } .nas-led2.warn { background: #FFA726; box-shadow: 0 0 6px #FFA726; } .nas-led2.idle { background: #546E7A; }
.nas-pwr { grid-column: span 2; font-size: 18px; color: #4FC3F7; text-align: center; }
.nas-baysF { display: flex; gap: 6px; }
.nas-trayF { display: grid; justify-items: center; gap: 4px; width: 56px; padding: 10px 4px; border-radius: 4px; background: repeating-linear-gradient(0deg, #3A464C 0 3px, #33404A 3px 6px); font-size: 11px; }
.nas-trayF.used { color: #fff; } .nas-cap { font-size: 10px; opacity: .8; }
.hrd > .nw { min-height: 480px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dw.wide { width: min(1280px, 100%); height: calc(100dvh - 32px); }
.nw-menu { position: absolute; left: 6px; top: 44px; z-index: 9999; width: min(420px, calc(100% - 12px)); background: rgba(255,255,255,.97); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.3); padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.nw-mi2 { display: grid; justify-items: center; gap: 6px; border: 0; background: none; border-radius: 8px; padding: 8px 4px; font: 12px inherit; color: #263238; text-align: center; }
.nw-mi2:hover { background: #EEF4FA; }

/* ---------- učebna (kiosk) ---------- */
.kiosk-box { display: grid; gap: 8px; padding: 14px; margin-bottom: 14px; border-radius: 14px; background: var(--prim-bg, #E6F4F1); border: 1.5px solid var(--prim); }
.kiosk-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.kiosk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok, #2E7D32); box-shadow: 0 0 0 4px rgba(46,125,50,.18); }
.kiosk-btn { min-height: 56px; font-size: 1.1rem; }
.kiosk-off { display: flex; gap: 10px; align-items: center; }
.kiosk-box:has(.kiosk-off) { background: var(--bg); border-color: var(--line); }
.kiosk-ov { position: fixed; inset: 0; z-index: 60; background: rgba(9,25,30,.5); display: grid; place-items: center; padding: 16px; }
.kiosk-pick { width: min(520px, 100%); background: var(--card); border-radius: 16px; padding: 20px; display: grid; gap: 12px; }
.kiosk-pick h2 { margin: 0; }
.kiosk-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.kiosk-seat { min-height: 52px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font: 700 1rem var(--mono); cursor: pointer; color: var(--ink); }
.kiosk-seat:hover, .kiosk-seat.on { border-color: var(--prim); background: var(--prim-bg, #E6F4F1); }
.kiosk-lab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--card); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1.5px solid transparent; margin-bottom: 8px; }
.kiosk-lab:hover { border-color: var(--prim); }
.kiosk-lab.big { padding: 20px; border-color: var(--prim); }
.kiosk-lab-i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--prim-bg, #E6F4F1); color: var(--prim); flex: none; }
.kiosk-lab-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.kiosk-lab.big strong { font-size: 1.2rem; }
.kiosk-tag { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--prim); }
.kiosk-lab-s { font-weight: 700; color: var(--muted); white-space: nowrap; }
.kiosk-h { font-size: 1rem; margin: 18px 0 8px; }
.kiosk-slots { display: grid; gap: 6px; }
.ks-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.8fr 1fr 44px; gap: 6px; align-items: center; }
.ks-row.th { font-size: .8rem; color: var(--muted); font-weight: 700; }
.ks-row .inp, .ks-row .sel { min-height: 40px; padding: 6px 8px; }
.kiosk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
@media (max-width: 640px) { .ks-row { grid-template-columns: 1fr 1fr 1fr; } .ks-row.th { display: none; } }
.kiosk-slots > .btn, .kiosk-ips > .btn { justify-self: start; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; }
.kiosk-ips { display: grid; gap: 8px; }

/* boční panel labu: křížek funguje i na širokém displeji (panel schová, tlačítko Info ho vrátí) */
.lab-side .lab-sideclose { display: inline-flex; justify-self: end; margin: -6px -6px -8px 0; }
.lab-tools .lab-sidebtn { display: none; }
.main.lab.side-closed .lab-tools .lab-sidebtn { display: inline-flex; }
@media (min-width: 900px) { .main.lab.side-closed .lab-side { display: none; } }
@media (max-width: 899px) { .lab-tools .lab-sidebtn { display: inline-flex; } }

/* hlavní panel Windows: ikony uprostřed celé lišty (jako Windows 11), Server zarovnaný vlevo */
.w-task { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.w-task .w-tc { grid-column: 2; flex: none; justify-content: center; align-items: center; }
.w-task .w-tray { grid-column: 3; justify-self: end; }
.w-task.srv { grid-template-columns: 1fr auto; }
.w-task.srv .w-tc { grid-column: 1; justify-content: flex-start; }
.w-task.srv .w-tray { grid-column: 2; }
.w-tbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 0; }
.w-tbtn > span { display: inline-flex; align-items: center; justify-content: center; }
.w-tbtn .w-ai.sm { width: 24px; height: 24px; }
.w-tbtn .w-ai.sm svg { width: 16px; height: 16px; display: block; }
.w-tbtn.start svg { display: block; }
.w-search { line-height: 1; }
@media (max-width: 640px) { .w-task { grid-template-columns: auto 1fr auto; } .w-task .w-tc { grid-column: 1 / 3; justify-content: flex-start; } }

/* ---------- Zachytávání (Wireshark) ---------- */
.lab-capbtn.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.cap { position: relative; flex: none; height: 44vh; min-height: 160px; display: flex; flex-direction: column; background: #fff; border-top: 1px solid var(--line); font: 12px/1.35 var(--body); color: #1d2a30; z-index: 2; }
.cap-grip { position: absolute; left: 0; right: 0; top: -4px; height: 8px; cursor: ns-resize; }
.cap-grip::after { content: ""; position: absolute; left: 50%; top: 2px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: #C9D3D6; }
.cap-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: #F6F8F9; }
.cap-top .btn.sm, .cap-top .icon-btn.sm { min-height: 32px; }
.cap-rec { gap: 6px; } .cap-dot { width: 10px; height: 10px; border-radius: 50%; background: #9AA6AA; }
.cap-rec.on .cap-dot { background: #D93025; box-shadow: 0 0 0 3px rgba(217,48,37,.2); animation: capblink 1.2s infinite; }
@keyframes capblink { 50% { opacity: .35; } }
.cap-filter { min-height: 32px !important; padding: 4px 10px !important; width: 260px; font: 12px var(--mono) !important; border-radius: 8px !important; }
.cap-dev { min-height: 32px !important; padding: 2px 8px !important; width: auto !important; font-size: 12px !important; border-radius: 8px !important; }
.cap-chips { display: flex; gap: 4px; }
.cap-chip { border: 1px solid #C9D3D6; background: #fff; border-radius: 99px; padding: 3px 9px; font: 600 11px var(--body); color: #8A979B; cursor: pointer; }
.cap-chip.on { background: var(--cc); color: #1d2a30; border-color: rgba(0,0,0,.18); }
.cap-stat { margin-left: 4px; }
.cap-body { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; }
.cap-list { overflow: auto; border-bottom: 3px solid #E3E9EB; outline: none; font-family: var(--mono); font-size: 11.5px; }
.cap-tr { display: grid; grid-template-columns: 48px 82px 150px 130px 130px 62px 52px minmax(260px, 1fr); gap: 8px; padding: 2px 8px; background: var(--pc, #fff); cursor: default; white-space: nowrap; }
.cap-tr span { overflow: hidden; text-overflow: ellipsis; }
.cap-tr.th { position: sticky; top: 0; z-index: 1; background: #EEF2F3; font: 700 11px var(--body); color: #4A5A60; border-bottom: 1px solid #DCE3E5; }
.cap-tr:not(.th):hover { filter: brightness(.96); }
.cap-tr.is-sel { background: #2F6FB3 !important; color: #fff; }
.cap-link { color: #4A5A60; } .cap-tr.is-sel .cap-link { color: #DDE8F5; }
.cap-empty { padding: 14px; color: #7A888C; font-family: var(--body); }
.cap-bottom { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.cap-detwrap { overflow: auto; border-right: 1px solid #E3E9EB; }
.cap-notes:not(:empty) { margin: 6px 8px 0; padding: 6px 8px; background: #FFF4D6; border: 1px solid #F0D27A; border-radius: 6px; display: grid; gap: 2px; }
.cap-det { padding: 4px 6px; }
.cap-ly summary { cursor: pointer; padding: 2px 4px; font-weight: 600; border-radius: 3px; }
.cap-ly summary:hover { background: #EEF4FA; }
.cap-f { padding: 1px 4px 1px 22px; cursor: default; border-radius: 3px; word-break: break-word; }
.cap-f.l1 { padding-left: 36px; }
.cap-f:hover { background: #EEF4FA; } .cap-f.on { background: #2F6FB3; color: #fff; }
.cap-f.note { color: #7A6000; background: #FFF8E1; margin: 2px 0 2px 22px; padding: 4px 6px; }
.cap-fn { color: #4A5A60; } .cap-f.on .cap-fn { color: #DDE8F5; }
.cap-hex { overflow: auto; padding: 6px 8px; font: 11.5px/1.5 var(--mono); white-space: pre; background: #FBFCFC; }
.cap-hl { display: flex; gap: 14px; }
.cap-off { color: #8A979B; }
.cap-hx span, .cap-as span { padding: 0 1px; } .cap-hx span + span { margin-left: 3px; } .cap-hx .gap { margin-left: 6px; }
.cap-hx .on, .cap-as .on { background: #2F6FB3; color: #fff; border-radius: 2px; }
@media (max-width: 899px) {
  .cap { height: 55vh; }
  .cap-filter { width: 100%; order: 10; }
  .cap-bottom { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .cap-hex { display: none; }
  .cap-tr { grid-template-columns: 40px 120px 62px minmax(220px, 1fr); }
  .cap-tr > span:nth-child(2), .cap-tr > span:nth-child(4), .cap-tr > span:nth-child(5), .cap-tr > span:nth-child(7) { display: none; }
}
.hrd-lock{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface-2,#f4f1f2);border:1px dashed var(--line,#d9d2d5);line-height:1.45}

/* ---------- kontextová nabídka (pravé tlačítko) ---------- */
.cm { position: fixed; z-index: 100000; min-width: 210px; max-width: min(340px, calc(100vw - 8px)); display: grid; user-select: none; -webkit-user-select: none; animation: cm-in .09s ease-out; }
@keyframes cm-in { from { opacity: 0; transform: translateY(-3px); } }
.cm-i { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 6px; text-align: left; border: 0; background: none; color: inherit; font: inherit; cursor: default; white-space: nowrap; }
.cm-i:focus { outline: none; }
.cm-ic { display: inline-flex; justify-content: center; font-size: .95em; opacity: .85; }
.cm-t { overflow: hidden; text-overflow: ellipsis; }
.cm-k { opacity: .6; font-size: .92em; padding-left: 18px; }
.cm-i.b .cm-t { font-weight: 600; }
.cm-i[disabled] { opacity: .42; }
/* Windows 11 */
.cm-w11 { background: #F9F9F9; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.16); padding: 4px; font: 13px/1.3 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; color: #1b1b1b; }
.cm-w11 .cm-i { min-height: 30px; padding: 0 10px 0 4px; border-radius: 4px; }
.cm-w11 .cm-i:not([disabled]):hover, .cm-w11 .cm-i:not([disabled]):focus, .cm-w11 .cm-i.open { background: rgba(0,0,0,.055); }
.cm-w11 .cm-sep { height: 1px; background: #E3E3E3; margin: 4px -4px; }
/* WinBox */
.cm-ros { background: #F0F0F0; border: 1px solid #8A8A8A; box-shadow: 2px 2px 4px rgba(0,0,0,.3); padding: 2px; font: 12px/1.2 Tahoma, Verdana, "Segoe UI", sans-serif; color: #000; min-width: 170px; }
.cm-ros .cm-i { min-height: 21px; padding: 0 8px 0 2px; grid-template-columns: 20px 1fr auto; }
.cm-ros .cm-i:not([disabled]):hover, .cm-ros .cm-i:not([disabled]):focus, .cm-ros .cm-i.open { background: #3399FF; color: #fff; }
.cm-ros .cm-sep { height: 1px; background: #A0A0A0; border-bottom: 1px solid #fff; margin: 2px 2px; }
/* NAS */
.cm-nas { background: #fff; border: 1px solid #D6DDE6; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,30,60,.18); padding: 4px 0; font: 13px/1.3 system-ui, "Segoe UI", sans-serif; color: #2A3540; }
.cm-nas .cm-i { min-height: 30px; padding: 0 14px 0 6px; }
.cm-nas .cm-i:not([disabled]):hover, .cm-nas .cm-i:not([disabled]):focus, .cm-nas .cm-i.open { background: #E9F2FC; color: #0A5FB4; }
.cm-nas .cm-sep { height: 1px; background: #E6EBF0; margin: 4px 0; }
/* plán labu a zachytávání */
.cm-app { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 5px; font: 14px/1.3 var(--body); color: var(--ink); }
.cm-app .cm-i { min-height: 34px; padding: 0 12px 0 4px; border-radius: 8px; }
.cm-app .cm-i:not([disabled]):hover, .cm-app .cm-i:not([disabled]):focus, .cm-app .cm-i.open { background: var(--tint); }
.cm-app .cm-sep { height: 1px; background: var(--line); margin: 4px 2px; }
@media (pointer: coarse) { .cm-w11 .cm-i, .cm-nas .cm-i, .cm-app .cm-i { min-height: 40px; } .cm-ros .cm-i { min-height: 32px; } }

/* Windows: velikost ikon na ploše, Spustit, Vlastnosti, zdrojový kód, Systém */
.w-icons.sz-l .w-dicon { width: 104px; } .w-icons.sz-l .w-ai.lg { transform: scale(1.25); margin: 6px 0; }
.w-icons.sz-s { grid-template-columns: repeat(2, auto); } .w-icons.sz-s .w-dicon { width: 70px; font-size: 11px; } .w-icons.sz-s .w-ai.lg { transform: scale(.75); margin: -4px 0; }
.w-run { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px 14px 6px; }
.w-run-i { color: #0067C0; }
.w-run + .w-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 6px 14px 12px; }
.w-dlgw .w-tabs button { padding: 4px 12px; border: 1px solid #ADADAD; border-bottom: 0; background: #F0F0F0; border-radius: 2px 2px 0 0; margin-bottom: -1px; font: inherit; color: inherit; cursor: default; }
.w-dlgw .w-tabs button.on { background: #fff; }
.w-dlgw .w-tabs button[disabled] { color: #8a8a8a; }
.w-dlgw .w-pane hr { border: 0; border-top: 1px solid #DADADA; margin: 2px 0; width: 100%; }
.w-dlgw .w-kv { grid-template-columns: 120px 1fr; }
.w-pp-h { display: flex; align-items: center; gap: 12px; } .w-pp-i { font-size: 28px; }
.w-pie { --p: 0; width: 96px; height: 96px; border-radius: 50%; margin: 6px auto 0; background: conic-gradient(#2A7FD4 calc(var(--p) * 1%), #C9E1F7 0); display: grid; place-items: center; }
.w-pie span { background: #fff; border-radius: 50%; width: 58px; height: 58px; display: grid; place-items: center; font-size: 12px; }
.w-src { display: flex; flex-direction: column; height: 100%; background: #fff; }
.w-src-h { padding: 6px 10px; border-bottom: 1px solid #E3E3E3; font: 12px var(--mono); }
.w-src-c { flex: 1; margin: 0; overflow: auto; padding: 8px 0; font: 12px/1.5 Consolas, var(--mono); color: #1b1b1b; }
.w-src-c .ln { display: inline-block; width: 40px; padding-right: 10px; text-align: right; color: #9a9a9a; user-select: none; }
.w-about h3 { font-family: inherit; margin: 0; }
.t-flash { position: sticky; bottom: 6px; left: 100%; float: right; background: rgba(255,255,255,.88); color: #000; font: 12px var(--body); padding: 3px 10px; border-radius: 6px; }

/* plán sítě: výběr více zařízení, obdélníkový výběr, přetažení z palety */
.sim-canvas:focus { outline: none; }
.sim-canvas .selbox { fill: none; stroke: none; }
.sim-canvas .dev.sel .selbox { fill: color-mix(in srgb, var(--prim) 12%, transparent); stroke: var(--prim); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.sim-canvas .marquee { fill: color-mix(in srgb, var(--prim) 10%, transparent); stroke: var(--prim); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.sim-canvas.marqmode { cursor: crosshair; }
.sim-canvas.drop { background-color: color-mix(in srgb, var(--prim) 6%, transparent); outline: 2px dashed var(--prim); outline-offset: -6px; }
.lab-selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pal-item[draggable=true] { cursor: grab; }
.lab-pal.dragging { opacity: .35; pointer-events: none; }
.lab-selbtn.on { background: var(--prim); color: #fff; }
.w-ni.drop { background: #CCE4F7; outline: 1px solid #99C9EF; }
.w-tr[draggable=true] { -webkit-user-drag: element; }
.rp-opt { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rp-opt input { width: 18px; height: 18px; margin-top: 3px; }
.rp-opt > span { display: grid; gap: 2px; }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.sim-canvas { cursor: default; }
.sim-canvas:active { cursor: default; }
.sim-canvas.panning, .sim-canvas.panning:active { cursor: grab; }
.wm-snap { position: absolute; z-index: 99990; border-radius: 8px; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.08), inset 0 0 30px rgba(255,255,255,.25); backdrop-filter: blur(6px); pointer-events: none; transition: all .12s ease-out; }
/* Windows: Poznámkový blok, firewall, UAC, zobrazit plochu */
.w-np { display: flex; flex-direction: column; height: 100%; background: #fff; position: relative; }
.w-np-menu { display: flex; gap: 2px; padding: 3px 6px; border-bottom: 1px solid #E5E5E5; }
.w-np-menu button { border: 0; background: none; padding: 4px 10px; border-radius: 4px; font: inherit; color: inherit; cursor: default; }
.w-np-menu button:hover:not([disabled]) { background: #F0F0F0; } .w-np-menu button[disabled] { color: #999; }
.w-np-pop { position: absolute; top: 32px; z-index: 5; min-width: 230px; background: #F9F9F9; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.16); padding: 4px; display: grid; }
.w-np-i { display: flex; justify-content: space-between; gap: 20px; border: 0; background: none; padding: 7px 10px; border-radius: 4px; font: inherit; color: inherit; text-align: left; cursor: default; }
.w-np-i:hover:not([disabled]) { background: rgba(0,0,0,.055); } .w-np-i[disabled] { color: #999; } .w-np-i .k { color: #777; }
.w-np-pop hr { border: 0; border-top: 1px solid #E3E3E3; margin: 3px -4px; }
.w-np-ta { flex: 1; min-height: 0; border: 0; outline: none; resize: none; padding: 8px 10px; font: 14px/1.45 Consolas, "Cascadia Mono", var(--mono); color: #111; background: #fff; white-space: pre; }
.w-np-st { display: flex; gap: 0; border-top: 1px solid #E5E5E5; font-size: 12px; color: #444; }
.w-np-st span { padding: 3px 14px; border-left: 1px solid #E5E5E5; } .w-np-st span:first-child { border-left: 0; flex: 1; }
.w-fw { padding: 14px 16px; display: grid; gap: 12px; background: #F3F3F3; height: 100%; overflow: auto; align-content: start; }
.w-fw-h { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1px solid #E5E5E5; border-radius: 8px; padding: 12px; }
.w-fw-h h3 { font: 600 15px "Segoe UI", system-ui; margin: 0; } .w-fw-h p { margin: 2px 0 0; }
.w-fw-sh.ok { color: #107C10; } .w-fw-sh.bad { color: #C42B1C; }
.w-fw-t { font-weight: 600; }
.w-fw-rules .w-ptr { grid-template-columns: 1fr 90px; align-items: center; cursor: default; }
.w-uac .wm-head { background: #1F5FAD; color: #fff; }
.w-uac-b { padding: 16px 18px 6px; background: #fff; }
.w-uac-q { font: 600 17px "Segoe UI", system-ui; margin: 0 0 14px; }
.w-uac-app { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.w-showdesk { width: 8px; align-self: stretch; margin-left: 6px; border: 0; border-left: 1px solid rgba(0,0,0,.12); background: none; cursor: default; }
.w-showdesk:hover { background: rgba(0,0,0,.06); }

/* Linux terminál + nano */
.sim-term.t-linux { background: #300A24; color: #EEEEEC; font-family: "Ubuntu Mono", "DejaVu Sans Mono", Consolas, var(--mono); border-radius: 0; }
.sim-term.t-linux .t-input { color: #fff; }
.t-linux .x-user { color: #8AE234; font-weight: 700; } .t-linux .x-path { color: #729FCF; font-weight: 700; }
.sim-termbox.lnx { position: relative; }
.nano { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #300A24; color: #EEEEEC; font: 14px/1.35 "Ubuntu Mono", "DejaVu Sans Mono", Consolas, var(--mono); }
.nano-hd { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; background: #EEEEEC; color: #300A24; padding: 1px 6px; white-space: pre; }
.nano-hd span:nth-child(2) { text-align: center; overflow: hidden; text-overflow: ellipsis; }
.nano-ta { flex: 1; min-height: 0; border: 0; outline: none; resize: none; background: transparent; color: inherit; font: inherit; padding: 4px 6px; white-space: pre; tab-size: 2; caret-color: #fff; }
.nano-st { text-align: center; min-height: 1.35em; padding: 1px 6px; }
.nano-st:not(:empty) { } .nano-st.err { background: #C01C28; color: #fff; } .nano-st.ask { background: #EEEEEC; color: #300A24; text-align: left; }
.nano-ft { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 6px 4px; }
.nano-k { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; white-space: pre; }
.nano-k b { background: #EEEEEC; color: #300A24; font-weight: 400; padding: 0 1px; } .nano-k.dis { opacity: .55; cursor: default; }
.nano-yn { display: none; }
@media (pointer: coarse) { .nano-yn { display: flex; gap: 10px; padding: 4px 6px; } .nano-ta { font-size: 16px; } }

/* ===================== Linux desktop (GNOME) ===================== */
.lx { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 420px; overflow: hidden; font: 13.5px/1.4 Ubuntu, Cantarell, "Noto Sans", system-ui, sans-serif; color: #f6f5f4; }
.lx-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 30px; padding: 0 8px; background: #000; color: #fff; font-weight: 600; z-index: 3; }
.lx-act { justify-self: start; border: 0; background: rgba(255,255,255,.08); color: #fff; font: inherit; padding: 2px 12px; border-radius: 99px; }
.lx-clock { font-weight: 600; }
.lx-tray { justify-self: end; display: flex; gap: 8px; border: 0; background: none; color: #fff; padding: 4px 10px; border-radius: 99px; }
.lx-tray:hover, .lx-act:hover { background: rgba(255,255,255,.16); }
.lx-desk { position: relative; flex: 1; display: flex; min-height: 0; background: radial-gradient(circle at 70% 30%, #E95420 0, #C34113 18%, #77216F 55%, #2C001E 100%); }
.lx-dock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px; background: rgba(0,0,0,.55); z-index: 2; }
.lx-dsp { flex: 1; }
.lx-dk { position: relative; border: 0; background: none; padding: 4px; border-radius: 12px; }
.lx-dk:hover { background: rgba(255,255,255,.14); }
.lx-dk.run::before { content: ""; position: absolute; left: -4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #E95420; }
.lx-ai { display: inline-grid; place-items: center; color: #fff; border-radius: 9px; }
.lx-ai.lg { width: 40px; height: 40px; } .lx-ai.xs { width: 18px; height: 18px; border-radius: 5px; } .lx-ai.xs svg { width: 12px; height: 12px; }
.lx-area { position: relative; flex: 1; min-width: 0; }
.lx-qs { position: absolute; right: 8px; top: 36px; z-index: 99999; width: 300px; background: #303030; color: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.4); padding: 12px; }
.lx-qs-b { display: grid; gap: 6px; } .lx-qs-b hr { border: 0; border-top: 1px solid #4a4a4a; width: 100%; }
.lx-qs-t { display: grid; padding: 10px 14px; border-radius: 99px; background: #4a4a4a; } .lx-qs-t.on { background: #E95420; }
.lx-qs-i { text-align: left; border: 0; background: none; color: #fff; font: inherit; padding: 8px 10px; border-radius: 8px; } .lx-qs-i:hover:not([disabled]) { background: #444; } .lx-qs-i[disabled] { opacity: .5; }
/* okna GNOME */
.wm-win.gnw { background: #fafafa; color: #2e3436; border-radius: 12px; box-shadow: 0 2px 18px rgba(0,0,0,.45); border: 1px solid rgba(0,0,0,.25); overflow: hidden; }
.gnw .wm-head { background: #ebebeb; color: #2e3436; height: 40px; padding: 0 6px 0 12px; border-bottom: 1px solid #d6d6d6; }
.gnw .wm-tt { flex: 1; text-align: center; font-weight: 700; }
.gnw .wm-ctl { gap: 8px; } .gnw .wm-ctl button { width: 24px; height: 24px; border-radius: 50%; background: #dcdcdc; border: 0; display: grid; place-items: center; }
.gnw .wm-ctl button:hover { background: #cfcfcf; } .gnw .wm-ctl button.x:hover { background: #E95420; color: #fff; }
.gnw.dark .wm-head { background: #303030; color: #fff; border-color: #222; } .gnw.dark .wm-ctl button { background: #444; color: #fff; }
.gnw.on { box-shadow: 0 4px 28px rgba(0,0,0,.6); }
.gnw .wm-body { background: #fafafa; }
.gnw.dark .wm-body > .sim-termbox { flex: 1; min-height: 0; } .gnw.dark .sim-keys { background: #241f20; margin: 0; padding: 6px; } .gnw.dark .kbtn { background: #3a3a3a; color: #eee; border-color: #555; }
.gn-btn { border: 1px solid #cdc7c2; background: #f2f1f0; color: #2e3436; font: inherit; padding: 6px 14px; border-radius: 6px; font-weight: 600; }
.gn-btn.pri { background: #E95420; color: #fff; border-color: #C34113; } .gn-btn.ico { padding: 4px 10px; }
.gn-btn:disabled { opacity: .5; }
.gn-in { border: 1px solid #cdc7c2; border-radius: 6px; padding: 6px 8px; font: inherit; color: #2e3436; background: #fff; width: 100%; box-sizing: border-box; }
.gn-in:focus { outline: 2px solid #E95420; outline-offset: -1px; }
.gn-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #ddd; background: #f6f5f4; }
.gn-msg { padding: 16px; display: grid; gap: 8px; color: #2e3436; } .gn-err { color: #C01C28; font-size: 12.5px; }
.gn-dlg .wm-body { display: flex; flex-direction: column; }
.gn-dbody { flex: 1; overflow: auto; padding: 0 16px 10px; color: #2e3436; }
.gn-tabs { display: flex; gap: 2px; justify-content: center; margin: 10px 0 14px; } .gn-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 6px; font: inherit; color: inherit; } .gn-tabs button.on { background: #e1dedb; font-weight: 700; } .gn-tabs button:disabled { opacity: .45; }
.gn-kv { display: grid; gap: 8px; } .gn-kv div { display: grid; grid-template-columns: 170px 1fr; } .gn-kv span { color: #666; text-align: right; padding-right: 14px; }
.gn-ip { display: grid; gap: 12px; } .gn-meth { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .gn-meth > span { font-weight: 700; margin-right: 6px; }
.gn-addr { display: grid; gap: 4px; } .gn-ah, .gn-ar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .gn-ah span { font-weight: 700; font-size: 12.5px; }
.gn-dns { display: flex; gap: 10px; align-items: center; } .gn-dns > span:first-child { font-weight: 700; }
.gn-seg { display: flex; border: 1px solid #cdc7c2; border-radius: 6px; overflow: hidden; } .gn-seg button { flex: 1; border: 0; background: #f6f5f4; padding: 6px; font: inherit; } .gn-seg button.on { background: #E95420; color: #fff; }
.gn-f { display: grid; gap: 3px; font-size: 12.5px; }
.gs-sw { position: relative; display: inline-block; width: 42px; height: 24px; } .gs-sw input { opacity: 0; width: 0; height: 0; } .gs-sw span { position: absolute; inset: 0; border-radius: 99px; background: #ccc; transition: .15s; } .gs-sw span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .gs-sw input:checked + span { background: #E95420; } .gs-sw input:checked + span::before { transform: translateX(18px); }
.gs { display: grid; grid-template-columns: 200px 1fr; height: 100%; color: #2e3436; } .gs-side { background: #ebebeb; padding: 8px; display: grid; align-content: start; gap: 2px; } .gs-side button { text-align: left; border: 0; background: none; padding: 8px 12px; border-radius: 6px; font: inherit; } .gs-side button.on { background: #d6d1cd; font-weight: 700; }
.gs-main { padding: 16px 24px; overflow: auto; } .gs-main h2 { font: 700 14px Ubuntu, system-ui; margin: 14px 0 6px; }
.gs-card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 4px 0; } .gs-card.muted { padding: 12px 14px; color: #777; }
.gs-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; } .gs-row > span:first-child { flex: 1; } .gs-row + .gs-row { border-top: 1px solid #eee; }
.nf { display: flex; flex-direction: column; height: 100%; color: #2e3436; } .nf-head { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #ddd; } .nf-path { flex: 1; background: #e8e8e7; border-radius: 6px; padding: 5px 10px; font-weight: 700; }
.nf-b { flex: 1; display: grid; grid-template-columns: 210px 1fr; min-height: 0; } .nf-side { background: #ebebeb; padding: 6px; display: grid; align-content: start; gap: 1px; } .nf-side button { text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font: inherit; } .nf-side button.on { background: #d6d1cd; }
.nf-main { padding: 12px; overflow: auto; position: relative; } .nf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .nf-it { display: grid; justify-items: center; gap: 4px; padding: 8px; border-radius: 8px; } .nf-ic { font-size: 38px; } .nf-empty { color: #888; text-align: center; margin-top: 40px; }
.nf-conn { position: sticky; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; background: #f6f5f4; border-top: 1px solid #ddd; padding: 10px; margin: 20px -12px 0; } .nf-hint { margin: 4px 0 0; }
.nf-list { display: grid; } .nf-lh, .nf-lr { display: grid; grid-template-columns: 1fr 100px 120px; padding: 6px 8px; } .nf-lh { font-weight: 700; border-bottom: 1px solid #ddd; } .nf-lr:nth-child(odd) { background: #f3f3f3; }
.wm-win.ff .w-tabsbar { background: #f0f0f4; } .wm-win.ff .w-btab { border-top: 2px solid #E66000; }

/* ===================== IoT: kamera, NVR, telefon ===================== */
.cw, .nv, .pw { height: 100%; min-height: 380px; display: flex; flex-direction: column; background: #f3f5f7; color: #1f2933; font: 13px/1.4 system-ui, "Segoe UI", sans-serif; }
.cw-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #1E2A3A; color: #fff; } .cw-top.dark { background: #111; } .cw-top.pwt { background: #0F5C3E; }
.cw-logo { font-weight: 800; letter-spacing: .04em; } .cw-sp { flex: 1; }
.cw-link { border: 0; background: none; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; padding: 0 4px; } .cw-link.bad { color: #C0392B; }
.cw-main { flex: 1; display: grid; grid-template-columns: 180px 1fr; min-height: 0; }
.cw-nav { background: #fff; border-right: 1px solid #dde3ea; display: grid; align-content: start; padding: 8px; gap: 2px; } .cw-nav button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: inherit; color: inherit; } .cw-nav button.on { background: #E6F0FB; color: #0B5CAD; font-weight: 700; }
.cw-body { padding: 14px 18px; overflow: auto; display: grid; gap: 10px; align-content: start; } .cw-body h3 { margin: 6px 0 0; font: 700 14px system-ui; }
.cw-grid { display: grid; gap: 6px; max-width: 560px; } .cw-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; } .cw-row span { color: #52606d; } .cw-row strong.ok { color: #1F8A5B; } .cw-row strong.bad { color: #C0392B; }
.cw-in { border: 1px solid #c3ccd6; border-radius: 4px; padding: 6px 8px; font: inherit; background: #fff; color: inherit; width: 100%; box-sizing: border-box; } .cw-in:disabled { background: #eef1f4; color: #7b8794; }
.cw-btn { border: 1px solid #c3ccd6; background: #fff; color: #1f2933; border-radius: 4px; padding: 6px 16px; font: inherit; font-weight: 600; justify-self: start; cursor: pointer; } .cw-btn.pri { background: #1673D1; border-color: #1673D1; color: #fff; } .cw-btn:disabled { opacity: .5; }
.cw-err { color: #C0392B; background: #FDECEA; border-radius: 4px; padding: 6px 10px; } .cw-ok { color: #1F6E43; background: #E3F4EB; border-radius: 4px; padding: 6px 10px; }
.cw-muted { color: #7b8794; } .cw-chk { display: flex; gap: 8px; align-items: center; } .cw-grid + .cw-btn, .cw-chk + .cw-muted { margin-top: 2px; }
.cw-login { flex: 1; display: grid; place-items: center; background: linear-gradient(135deg, #1E2A3A, #3B5068); padding: 20px; } .cw-login.dark { background: linear-gradient(135deg, #111, #333); } .cw-login.pwl { background: linear-gradient(135deg, #0F5C3E, #2C8C66); }
.cw-lbox { width: min(340px, 100%); background: #fff; border-radius: 10px; padding: 22px; display: grid; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.35); } .cw-lbox .cw-logo { color: #1E2A3A; font-size: 18px; }
.cw-f { display: grid; gap: 3px; } .cw-f span { font-size: 12px; color: #52606d; }
.cw-live { display: grid; gap: 0; max-width: 760px; } .cam-cv { width: 100%; height: auto; display: block; background: #000; border-radius: 4px 4px 0 0; } .cw-bar { background: #111; color: #ddd; font: 12px monospace; padding: 4px 8px; border-radius: 0 0 4px 4px; }
.iot-hw { display: flex; gap: 18px; align-items: center; padding: 14px; background: #f1f3f5; border-radius: 12px; margin-bottom: 10px; }
.cam-body { position: relative; width: 170px; height: 64px; border-radius: 34px 10px 10px 34px; background: linear-gradient(#fafafa, #d9dde1); box-shadow: inset 0 -3px 6px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.2); display: flex; align-items: center; padding-left: 10px; gap: 8px; }
.cam-lens { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #4a6, #123 35%, #000 70%); border: 4px solid #333; } .cam-lens span { display: none; }
.nvd { display: flex; flex-direction: column; height: 100%; } .nvd-front { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #222; color: #ccc; } .nvd-sp { flex: 1; } .nvd > .nv { flex: 1; min-height: 0; }
.nv-tb { display: flex; gap: 12px; align-items: center; } .nv-livebody { background: #0b0b0b; color: #ddd; }
.nv-grid { display: grid; gap: 4px; } .nv-grid.g1 { grid-template-columns: 1fr; } .nv-grid.g4 { grid-template-columns: repeat(2, 1fr); } .nv-grid.g9 { grid-template-columns: repeat(3, 1fr); }
.nv-tile { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid #333; display: grid; place-items: center; overflow: hidden; color: #888; } .nv-tile canvas { width: 100%; height: 100%; } .nv-tile.empty { display: grid; align-content: center; justify-items: center; gap: 4px; }
.nv-tile.bad { background: #1a0d0d; } .nv-nosig { color: #f08c8c; padding: 10px; text-align: center; font-size: 12px; }
.nv-tl { position: absolute; left: 6px; bottom: 4px; color: #fff; font: 11px monospace; text-shadow: 0 1px 2px #000; } .nv-rec { position: absolute; right: 6px; top: 4px; color: #ff4d4d; font: 700 11px monospace; }
.nv-tbl { width: 100%; border-collapse: collapse; background: #fff; } .nv-tbl th, .nv-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e4e8ec; } .nv-tbl td.ok { color: #1F8A5B; font-weight: 600; } .nv-tbl td.bad { color: #C0392B; }
.nv-livebody .nv-tbl { color: #222; }
.nv-dlg { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 10; } .nv { position: relative; } .nv-dbox { width: min(380px, 92%); background: #fff; color: #1f2933; border-radius: 8px; padding: 18px; display: grid; gap: 8px; } .nv-row { display: flex; gap: 8px; }
.ph { display: grid; gap: 12px; }
.ph-body { display: flex; gap: 0; justify-content: center; padding: 12px; background: #e9ecef; border-radius: 14px; }
.ph-hs { width: 54px; background: linear-gradient(90deg, #2b2b2b, #3a3a3a); border-radius: 26px 8px 8px 26px; margin-right: -6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.ph-face { width: min(420px, 100%); background: linear-gradient(#3a3d42, #25282c); border-radius: 12px; padding: 14px; display: grid; gap: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ph-scr { background: linear-gradient(#cfe3f5, #a9c8e6); color: #102030; border-radius: 6px; padding: 6px 10px; display: grid; gap: 4px; min-height: 120px; font: 13px system-ui; box-shadow: inset 0 0 0 2px #000; }
.ph-sb { display: flex; justify-content: space-between; font-size: 11px; border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 2px; } .ph-line.ok { color: #0d5c2f; font-weight: 700; } .ph-line.bad { color: #9b1c1c; font-weight: 600; font-size: 12px; }
.ph-big { font: 700 18px system-ui; min-height: 28px; word-break: break-all; } .ph-soft { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 11px; border-top: 1px solid rgba(0,0,0,.2); padding-top: 2px; }
.ph-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ph-key { border: 0; border-radius: 8px; background: #50545a; color: #fff; font: 700 18px system-ui; padding: 10px 0; box-shadow: 0 2px 0 #1b1d20; } .ph-key:active { transform: translateY(1px); box-shadow: none; }
.ph-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ph-call, .ph-end { border: 0; border-radius: 8px; padding: 10px; font: 700 14px system-ui; color: #fff; } .ph-call { background: #1F8A5B; } .ph-end { background: #C0392B; } .ph-call:disabled { opacity: .45; }
@media (max-width: 640px) { .cw-main { grid-template-columns: 1fr; } .cw-nav { display: flex; overflow-x: auto; } .cw-row { grid-template-columns: 1fr; } .gs, .nf-b { grid-template-columns: 1fr; } .gs-side, .nf-side { display: flex; overflow-x: auto; } .gn-ah, .gn-ar { grid-template-columns: 1fr; } }

/* okna zařízení v labu – plovoucí, víc najednou */
.lab-body { position: relative; }
.lw-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.lw-layer > * { pointer-events: auto; }
.dw.lw { position: absolute; max-width: none; max-height: none; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.12); }
.dw.lw.on { box-shadow: 0 16px 50px rgba(0,0,0,.4); border-color: color-mix(in srgb, var(--prim) 45%, transparent); }
.dw.lw.max { border-radius: 0; border: 0; }
.dw.lw .dw-head { cursor: grab; user-select: none; -webkit-user-select: none; padding: 6px 8px 6px 12px; }
.dw.lw.dragging { opacity: .96; } .dw.lw.dragging .dw-head { cursor: grabbing; }
.dw.lw .dw-name { font-size: .98rem; }
.lw-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.25) 60%, transparent 60%, transparent 72%, rgba(0,0,0,.25) 72%, rgba(0,0,0,.25) 82%, transparent 82%); z-index: 3; }
.dw.lw.max .lw-grip { display: none; }
.lw-sq { display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 2px; }
.lw-snap { position: absolute; border-radius: 12px; background: color-mix(in srgb, var(--prim) 16%, transparent); border: 2px solid color-mix(in srgb, var(--prim) 55%, transparent); pointer-events: none !important; z-index: 99990; }
.lw-dock { position: absolute; left: 8px; bottom: 8px; z-index: 99995; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 16px); }
.lw-tb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 .82rem var(--body); box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; }
.lw-tb.on { border-color: var(--prim); box-shadow: 0 0 0 2px color-mix(in srgb, var(--prim) 30%, transparent); }
.lw-tb.min { opacity: .75; font-style: italic; }
.lw-ic { display: inline-grid; }
.lw-x { padding: 0 6px; border-radius: 6px; font-size: 1rem; line-height: 1.2; color: var(--muted); } .lw-x:hover { background: var(--tint); color: var(--ink); }
@media (max-width: 720px) { .dw.lw { border-radius: 0; } .lw-btn.lw-maxb, .lw-grip { display: none; } .lw-dock { bottom: 6px; } }
.w-fly { z-index: 99990; }
.w-fly-h strong { font-size: 14px; }
.w-fly-card { background: #fff; border: 1px solid #E3E3E3; border-radius: 8px; padding: 10px; display: grid; gap: 8px; }
.w-fly-card.on { border-color: #9CC3EC; }
.w-fly-ct { display: flex; gap: 10px; align-items: center; } .w-fly-ci { width: 36px; height: 36px; border-radius: 6px; background: #E5E5E5; display: grid; place-items: center; color: #444; }
.w-fly-card.on .w-fly-ci { background: #0067C0; color: #fff; }
.w-fly-det { display: grid; gap: 2px; font-size: 12px; } .w-fly-kv { display: grid; grid-template-columns: 110px 1fr; } .w-fly-kv span { color: #666; }
.w-fly-btns { display: flex; gap: 6px; flex-wrap: wrap; } .w-fly-btns .w-btn { padding: 4px 10px; font-size: 12px; }
.w-fly-sec { font-weight: 600; margin-top: 4px; }
.w-fly-f { display: grid; gap: 4px; justify-items: start; }
.lab-tools .lw-dock { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; gap: 4px; max-width: none; }
.lab-tools .lw-dock[hidden] { display: none; }
.lab-tools .lw-tb { box-shadow: none; white-space: nowrap; padding: 3px 4px 3px 8px; }
/* poznámky na plánu */
.sim-canvas .note-bg { stroke-width: 1.2; cursor: move; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.sim-canvas .note-t { font: 13px var(--body); fill: #2b2b2b; pointer-events: auto; cursor: move; user-select: none; } .sim-canvas .note-t.b { font-weight: 700; }
.sim-canvas .note-area { fill-opacity: .10; stroke-width: 1.6; stroke-dasharray: 8 6; pointer-events: none; }
.sim-canvas .note-rs { fill: transparent; cursor: nwse-resize; }
.sim-canvas .note.c-y .note-bg { fill: #FFF4B8; stroke: #E1C640; } .sim-canvas .note.c-y .note-area { fill: #E1C640; stroke: #C9A800; }
.sim-canvas .note.c-b .note-bg { fill: #DCEBFF; stroke: #6C9BE0; } .sim-canvas .note.c-b .note-area { fill: #6C9BE0; stroke: #3F74C2; }
.sim-canvas .note.c-g .note-bg { fill: #DDF5E5; stroke: #5BB27A; } .sim-canvas .note.c-g .note-area { fill: #5BB27A; stroke: #2F8A50; }
.sim-canvas .note.c-r .note-bg { fill: #FDE2E0; stroke: #E07A72; } .sim-canvas .note.c-r .note-area { fill: #E07A72; stroke: #C0453B; }
.sim-canvas .note.c-p .note-bg { fill: #EEE3FB; stroke: #9C7AD8; } .sim-canvas .note.c-p .note-area { fill: #9C7AD8; stroke: #7650B8; }
.lab-fault { border: 2px solid var(--mid); background: var(--mid-bg); }
.lab-fault h3 { margin: 0 0 4px; } .lab-fault-l { margin: 4px 0 8px; padding-left: 18px; }
.lab-faultbtn.on { background: var(--mid); color: #fff; border-color: var(--mid); }
.modal.sl { max-width: 760px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sl-tasks { display: grid; gap: 8px; margin-bottom: 8px; }
.sl-task { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.sl-task .inp.sm, .sl-task select.inp { padding: 6px 8px; font-size: .9rem; width: auto; min-width: 120px; }
.sl-f { display: grid; gap: 2px; font-size: .78rem; color: var(--muted); }
.sl-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sl-o { display: flex; gap: 8px; align-items: center; margin: 4px 0; }