:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1c2330;
  --muted: #5d6778;
  --line: #dde2ea;
  --accent: #1f6feb;
  --accent-ink: #ffffff;
  --danger: #c62828;
  --warn-bg: #fff4e0;
  --warn-line: #f0b44c;
  --ok: #1a7f37;
  --cell: #ffffff;
  --cell-line: #e6eaf0;
  --hit: #fff1a8;
  --shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 16px rgba(20, 30, 50, .05);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11151c;
    --card: #1a2029;
    --text: #e4e8ef;
    --muted: #97a1b2;
    --line: #2c3440;
    --accent: #4c8dff;
    --warn-bg: #3a2c12;
    --warn-line: #a8782a;
    --cell: #f7f8fa;
    --cell-line: #3a4350;
    --hit: #7a6a10;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: .98rem; margin: 1rem 0 .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--danger); min-height: 1.2em; }
.ok { color: var(--ok); }

button, input, select { font: inherit; color: inherit; }
button {
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  padding: .45rem .9rem; border-radius: 8px; cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--accent); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.wide { width: 100%; }
input[type=text], input[type=password], input[type=number], input[type=search], input:not([type]), select {
  border: 1px solid var(--line); background: var(--card); border-radius: 7px; padding: .4rem .55rem; min-width: 0;
}
input.narrow { width: 5.5rem; }
input.narrow2 { width: 11rem; }
label.inline { display: inline-flex; gap: .4rem; align-items: center; }
label.check { display: flex; gap: .45rem; align-items: center; margin: .35rem 0; }

.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--line); padding: .5rem 1rem;
}
.brand { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.brand-mark {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 7px;
  background: var(--accent); color: #fff; font-weight: 700;
}
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; }
.tabs button { background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 8px; }
.tabs button.active { background: var(--bg); border-color: var(--line); color: var(--accent); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; max-width: 34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

main { padding: 1rem; max-width: 1500px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem; min-width: 0; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.row.end { justify-content: flex-end; }
.toolbar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.toolbar h2 { margin: 0; }
.spacer { flex: 1; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: .55rem .7rem; margin: .5rem 0; font-size: .9rem; }
.danger-title { color: var(--danger); margin-top: 1.4rem; }

/* przegladarka plikow */
.fb-bar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.fb-crumbs { display: flex; flex-wrap: wrap; gap: .1rem; align-items: center; font-size: .9rem; }
.fb-crumbs button { background: none; border: none; color: var(--accent); padding: .1rem .25rem; }
.fb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; max-height: 26rem; overflow: auto; }
.fb-list li { display: flex; align-items: center; gap: .5rem; padding: .32rem .6rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.fb-list li:last-child { border-bottom: none; }
.fb-list li:hover { background: var(--bg); }
.fb-list li.sel { background: var(--bg); outline: 2px solid var(--accent); outline-offset: -2px; }
.fb-list .ico { width: 1.2rem; text-align: center; }
.fb-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-list .meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.fb-list .cpro .name { font-weight: 600; }
.fb-list .act { visibility: hidden; }
.fb-list li:hover .act { visibility: visible; }
.fb-list .act button { padding: .1rem .45rem; font-size: .8rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .4rem 0 .8rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
table.nodes { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.nodes th, table.nodes td { text-align: left; padding: .25rem .45rem; border-bottom: 1px solid var(--line); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: .6rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }

.progress { height: .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.log { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; max-height: 16rem; overflow: auto; font-size: .82rem; white-space: pre-wrap; margin: .6rem 0 0; }

/* drabinka CLAD */
.clad-scroll { overflow: auto; max-height: calc(100vh - 13rem); border: 1px solid var(--line); border-radius: 8px; }
.clad { display: grid; --cs: 72px; grid-template-columns: 3rem repeat(10, var(--cs)) minmax(12rem, 1fr); background: var(--cell); color: #1c2330; }
.clad .hdr { position: sticky; top: 0; z-index: 2; background: #eef1f6; border-bottom: 1px solid var(--cell-line); font-size: .75rem; text-align: center; padding: .2rem 0; color: #5d6778; }
.clad .ln { font-size: .78rem; color: #5d6778; display: flex; align-items: center; justify-content: flex-end; padding-right: .4rem; border-right: 3px solid #1c2330; background: #fafbfc; }
.clad .cell { position: relative; width: var(--cs); height: var(--cs); border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); overflow: hidden; }
.clad .cell img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; }
.clad .cell .t, .clad .cell .st { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.clad .cell .t { font: 600 calc(var(--cs) * .14)/1.1 Tahoma, Arial, sans-serif; color: #0b3a8c; }
.clad .cell .st { font: calc(var(--cs) * .085)/1 Tahoma, Arial, sans-serif; color: #3c4656; }
.clad .cell.unknown { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f3f4f7 6px, #f3f4f7 12px); }
.clad .cell.hit { background: var(--hit); }
.clad .cm { font-size: .82rem; padding: .2rem .6rem; border-bottom: 1px solid var(--cell-line); display: flex; align-items: center; color: #3c4656; overflow: hidden; }
.clad .row-hit { background: #fff8cc; }

dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); width: min(46rem, 94vw); padding: 1rem 1.1rem; }
dialog::backdrop { background: rgba(10, 15, 25, .45); }

.toast { position: fixed; right: 1rem; bottom: 1rem; background: #1c2330; color: #fff; padding: .6rem .9rem; border-radius: 8px; max-width: 32rem; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 20; }
.toast.err { background: var(--danger); }

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-card { width: min(24rem, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; box-shadow: var(--shadow); }
.login-card form { display: grid; gap: .5rem; margin-top: 1rem; }
.login-card input[type=password] { width: 100%; padding: .55rem .6rem; }
.upload-row { border-top: 1px solid var(--line); padding-top: .7rem; margin-top: .8rem; }

/* tryb online */
.clad .cell.on { background: #d9f7d9; }
.clad .cell .val { position: absolute; right: 2px; bottom: 2px; background: #fff36b; color: #222; border: 1px solid #c9b800; border-radius: 3px; font: 600 calc(var(--cs) * .12)/1.1 Tahoma, Arial, sans-serif; padding: 0 .2em; }
.ok-pill { border-color: var(--ok); color: var(--ok); }
.err-pill { border-color: var(--danger); color: var(--danger); }
.bits { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.bit { display: inline-grid; place-items: center; width: 1.45rem; height: 1.35rem; font-size: .7rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--muted); padding: 0; }
button.bit { cursor: pointer; }
.bit.lit { background: #2ea043; border-color: #1a7f37; color: #fff; }

/* edycja programu (E3) */
.clad.editing .cell { cursor: pointer; }
.clad.editing .cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.clad.editing .cm { cursor: text; }
.clad .ln { position: relative; }
.clad.editing .ln .lnbtn { display: block; position: absolute; left: 1px; width: 1.1rem; height: 1.1rem; padding: 0; font-size: .7rem; line-height: 1; border-radius: 3px; }
.clad.editing .ln .add { top: 1px; }
.clad.editing .ln .del { bottom: 1px; background: var(--danger); border-color: var(--danger); }
.params { display: grid; gap: .5rem; margin: .8rem 0; }
.params label { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
.params input, .params select { min-width: 12rem; }
.dirty-pill { border-color: var(--warn-line); background: var(--warn-bg); }
.nodes-scroll { max-height: 60vh; overflow: auto; }
#nodes-table input { width: 100%; }

.ghost-link { color: var(--accent); text-decoration: none; border: 1px solid var(--accent); border-radius: 8px; padding: .45rem .9rem; }
.ghost-link:hover { background: var(--bg); }

/* edytor strony WWW (.cweb) */
.web-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .web-ed-grid { grid-template-columns: 1fr; } }
.web-canvas-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.web-canvas { position: relative; background: #ffffff; background-image:
    linear-gradient(var(--cell-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cell-line) 1px, transparent 1px);
  background-size: 20px 20px; }
.web-komp { position: absolute; border: 1px dashed transparent; box-sizing: border-box; cursor: default;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.web-komp:hover { border-color: var(--accent); }
.web-komp.sel { border: 2px solid var(--accent); background: rgba(31, 111, 235, .08); }
.web-komp img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.web-komp-txt { font-size: .72rem; color: var(--muted); padding: 0 .2rem; text-align: center;
  background: rgba(255, 255, 255, .75); border: 1px solid var(--cell-line); border-radius: 4px; }
.web-props { display: grid; gap: .45rem; }
.web-props h3 { margin: .2rem 0; }
.web-fld { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .5rem; align-items: center; }
.web-fld > span { color: var(--muted); font-size: .82rem; }
.web-fld input[type="checkbox"] { justify-self: start; }
.web-fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.web-fld2 .web-fld { grid-template-columns: 4.5rem minmax(0, 1fr); }
.web-pagebox { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; }
button.danger { color: var(--danger); border-color: var(--danger); }
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.web-komp-txt.brak { color: var(--danger); border-color: var(--danger); }