:root { --dark: #1d2a3a; --primary: #15aeb4; --primary-dark: #0f8f94; --border: #dde3ea; --muted: #6b7785; --warn: #e08a00; --bg: #f3f6f9; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: #1f2933; min-height: 100vh; }
header { background: var(--dark); color: #fff; padding: 0 28px; height: 64px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
header .logo { display: flex; align-items: center; gap: 12px; }
header .znak { width: 34px; height: 34px; border-radius: 8px; background: var(--primary); display: grid; place-items: center; font-weight: 800; }
header h1 { font-size: 1.1rem; }
header h1 span { color: var(--primary); }
header .vpravo { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
main { max-width: 1200px; margin: 0 auto; padding: 22px 16px; }
.skryte { display: none !important; }
.karta { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.karta.uzka { max-width: 460px; margin: 40px auto; }
.karta.uzka-vlavo { max-width: 460px; }
h2 { font-size: 1.2rem; margin-bottom: 6px; }
h3 { font-size: 1rem; margin-bottom: 6px; }
.sub { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.odsad { margin-top: 12px; }
.pole { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 160px; }
.pole.sirsie { flex: 1 1 260px; }
.pole label { font-size: .78rem; font-weight: 600; color: #556; }
.pole input, .pole select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: .9rem; font-family: inherit; background: #fff; }
.pole input:focus, .pole select:focus { outline: 2px solid rgba(21,174,180,.35); border-color: var(--primary); }
.riadok { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.riadok > .btn { margin-bottom: 10px; }
.btn { background: var(--primary); color: #fff; border: 0; border-radius: 5px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-size: .84rem; white-space: nowrap; }
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sek { background: #eef2f5; color: var(--dark); }
.btn.sek:hover { background: #e0e6ec; }
.btn.del { background: #fdecea; color: #b03a2e; }
.btn.del:hover { background: #f9d6d2; }
.btn.pozor { background: #b03a2e; color: #fff; }
header .btn.sek { background: #2c3d52; color: #dfe7ef; }
.chyba { color: #b03a2e; font-size: .84rem; margin-top: 10px; min-height: 1.2em; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .72rem; font-weight: 600; background: #eef2f5; color: #556; }
.pill.ok { background: #e3f6ea; color: #1e7d45; }
.pill.warn { background: #fff1e0; color: #a85a00; }
.pill.err { background: #fdecea; color: #b03a2e; }
header .pill { background: #2c3d52; color: #9fe3e6; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.tabs button { background: none; border: 0; padding: 8px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .9rem; }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .86rem; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: .72rem; text-transform: uppercase; color: #fff; background: var(--dark); letter-spacing: .04em; }
td.akcie { text-align: right; white-space: nowrap; }
td.akcie .btn { margin-left: 6px; }
.mono, code { font-family: Menlo, Consolas, monospace; font-size: .78rem; }
.info { background: #e3f6f6; border-left: 3px solid var(--primary); padding: 10px 14px; border-radius: 4px; font-size: .86rem; line-height: 1.55; margin-top: 12px; word-break: break-all; }
.kroky { margin: 6px 0 12px 18px; font-size: .86rem; line-height: 1.55; }
.kroky li { margin-bottom: 8px; }
.qr { margin: 10px 0; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--border); }
.term-hlava { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.term-hlava .sub { margin: 0; flex: 1; }
.porty { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.porty .port { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; cursor: pointer; }
.porty .port .sub { margin: 0; }
.chyba-text { color: #b03a2e; }
td.akcie .btn.sek { margin-left: 6px; }
.meradla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 16px; }
.meradlo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 8px; }
.meradlo svg { width: 104px; height: 104px; }
.meradlo b { font-size: .86rem; }
.meradlo .sub { margin: 0; font-size: .74rem; line-height: 1.4; }
.kruh-pod { fill: none; stroke: #eef2f5; stroke-width: 10; }
.kruh { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s; }
.kruh-hodnota { font-size: 19px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: #1f2933; }
.stav-mriezka { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.stav-blok { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.stav-blok:last-child { grid-column: 1 / -1; }
.graf { width: 100%; height: auto; display: block; }
.graf .mriezka { stroke: #eef2f5; stroke-width: 1; }
.graf .os { font-size: 11px; fill: var(--muted); }
.graf path { fill: none; stroke-width: 2; stroke-linejoin: round; }
.graf .l-cpu { stroke: #15aeb4; } .graf .l-ssd { stroke: #7a5cc4; } .graf .l-otacky { stroke: #e08a00; stroke-dasharray: 4 3; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); margin-top: 4px; }
.legenda i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; }
.z-cpu { background: #15aeb4; } .z-ssd { background: #7a5cc4; } .z-otacky { background: #e08a00; }
.pruh-riadok { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 8px; font-size: .84rem; margin: 6px 0; }
.pruh-riadok b { text-align: right; }
.pruh { height: 10px; background: #eef2f5; border-radius: 5px; overflow: hidden; }
.pruh i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 5px; transition: width .6s; }
.vent-pevne { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 8px; font-size: .84rem; margin: 8px 0; }
.vent-pevne b { text-align: right; }
.vent-pevne input { accent-color: var(--primary); }
#stav-karta .port { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; cursor: pointer; }
#stav-karta .port .sub { margin: 0; }
.ssd-hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
table.mala { font-size: .82rem; margin-top: 8px; }
table.mala td { padding: 5px 6px; }
table.mala td:last-child { text-align: right; }
#terminal { height: 520px; background: #0b1016; border-radius: 6px; padding: 6px; }
#toasty { position: fixed; top: 76px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: #fff; border-left: 4px solid var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: 10px 14px; border-radius: 4px; font-size: .86rem; max-width: 380px; }
.toast.chyba { border-left-color: #b03a2e; color: #1f2933; margin: 0; }
@media (max-width: 700px) { header { padding: 0 16px; } header h1 { font-size: .95rem; } .porty { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.porty .port { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; cursor: pointer; }
.porty .port .sub { margin: 0; }
.chyba-text { color: #b03a2e; }
td.akcie .btn.sek { margin-left: 6px; }
#terminal { height: 380px; }
.stav-mriezka { grid-template-columns: 1fr; } .pruh-riadok, .vent-pevne { grid-template-columns: 96px 1fr 46px; } }
/* výberové polia (vlastný rozbaľovací zoznam v dizajne konzoly) */
.vyber { position: relative; }
.vyber-natvny { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; }
.vyber-tl { width: 100%; text-align: left; padding: 8px 32px 8px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: .9rem; font-family: inherit; color: inherit; background: #fff; cursor: pointer; position: relative; min-height: 36px; }
.vyber-tl::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.vyber.otvorene .vyber-tl::after { transform: translateY(-20%) rotate(-135deg); }
.vyber-tl:hover { border-color: #c5ced8; }
.vyber-tl:focus { outline: 2px solid rgba(21,174,180,.35); border-color: var(--primary); }
.vyber-zoznam { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(29,42,58,.14); padding: 4px; max-height: 260px; overflow-y: auto; }
.vyber-zoznam li { padding: 7px 10px 7px 28px; border-radius: 4px; font-size: .9rem; cursor: pointer; position: relative; }
.vyber-zoznam li.aktivne { background: #e8f7f7; color: var(--primary-dark); }
.vyber-zoznam li.vybrane { font-weight: 600; color: var(--primary-dark); }
.vyber-zoznam li.vybrane::before { content: ""; position: absolute; left: 11px; top: 50%; width: 5px; height: 9px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-65%) rotate(45deg); }
/* servis boxu */
.tabs.pod { margin: 4px 0 12px; }
.tabs.pod button { font-size: .84rem; padding: 6px 12px; }
.servis-mriezka { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.servis-mriezka .stav-blok:last-child { grid-column: auto; }
.tlacidla { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.log { background: #0b1016; color: #d6e2ee; font-family: Menlo, Consolas, monospace; font-size: .76rem; line-height: 1.45; padding: 10px 12px; border-radius: 6px; max-height: 520px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin-top: 8px; }
.zasahy { max-height: 420px; overflow: auto; margin-top: 6px; }
.zasah { border-bottom: 1px solid var(--border); padding: 6px 0; font-size: .84rem; }
.zasah .sub { margin: 0; font-size: .74rem; }
.odkaz { background: none; border: 0; padding: 0; color: var(--primary-dark); font-weight: 600; cursor: pointer; font: inherit; text-align: left; }
.odkaz:hover { text-decoration: underline; }
.zdravie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; margin-top: 4px; }
.zdravie .sub { margin: 0; }
.dovody { margin: 3px 0 0; font-size: .72rem; line-height: 1.35; }
.blok-hlava { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.blok-hlava h3 { margin: 0; }
.mala-pole { margin: 0; min-width: 170px; }
.mala-pole .vyber-tl { padding: 5px 30px 5px 10px; min-height: 30px; font-size: .82rem; }
.graf .l-vyuz { stroke: #9aa6b2; stroke-width: 1.5; stroke-dasharray: 1 3; }
.z-vyuz { background: #9aa6b2; }
.pole textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; font-size: .9rem; font-family: inherit; resize: vertical; }
.pole textarea:focus { outline: 2px solid rgba(21,174,180,.35); border-color: var(--primary); }
#f-karta .pole { margin-bottom: 8px; }
@media (max-width: 860px) { .servis-mriezka { grid-template-columns: 1fr; } }