* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--rdk-font-ui); color: var(--rdk-text); background: #e9edf2; }
a { color: inherit; }
button, input { font-family: inherit; }
.desk { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; color: var(--rdk-text);
  background:
    radial-gradient(circle at 20% 15%, rgb(255 255 255 / .06), transparent 40%),
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #2c3a52, #1d2736 70%); }
.desk-bar { display: flex; align-items: center; gap: 1.1rem; height: 2.2rem; padding: 0 .9rem; background: rgb(15 20 30 / .55); color: #cfd8e3; font-size: .82rem; backdrop-filter: blur(6px); }
.desk-bar b { color: #fff; letter-spacing: .08em; }
.desk-bar .sp { flex: 1; }
.desk-bar .led { display: inline-flex; align-items: center; gap: .35rem; }
.desk-area { position: relative; min-height: 0; display: grid; place-items: center; padding: 1.2rem 1.2rem 1.2rem 7.6rem; }
.desk-icons { position: absolute; left: 1rem; top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.desk-ic { width: 5.2rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .2rem; border: 0; background: transparent; color: #e6ecf3; font-size: .74rem; text-align: center; cursor: pointer; border-radius: .4rem; }
.desk-ic i { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; background: #f4f6f9; color: var(--ic); border-radius: .55rem; box-shadow: 0 2px 5px rgb(0 0 0 / .35); }
.desk-ic:hover { background: rgb(255 255 255 / .1); }
.desk-win { width: 100%; max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: .6rem; overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / .45), 0 0 0 1px rgb(0 0 0 / .5); }
.desk-win[data-layout="narrow"] { max-width: 640px; }
.desk-win[data-layout="medium"] { max-width: 940px; }
.desk-win[data-layout="wide"] { max-width: 1280px; }
.desk-title { display: flex; align-items: center; gap: .6rem; height: 2.4rem; padding: 0 .5rem 0 .8rem; background: linear-gradient(#34445e, #243247); color: #fff; font-weight: 600; font-size: .9rem; flex: none; }
.desk-title svg { width: 18px; height: 18px; color: #fff; }
.desk-title .sp { flex: 1; }
.desk-title button { width: 1.7rem; height: 1.5rem; border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .08); color: #fff; border-radius: .25rem; cursor: pointer; line-height: 1; }
.desk-title button:hover { background: rgb(255 255 255 / .2); }
.desk-title button.x:hover { background: #b42330; }
.desk-tabs { display: flex; gap: .2rem; padding: .35rem .6rem 0; background: var(--rdk-surface-recessed); border-bottom: 1px solid var(--rdk-border); flex: none; overflow-x: auto; }
.desk-tabs a { padding: .45rem .9rem; font-size: .88rem; border: 1px solid transparent; border-bottom: 0; border-radius: .4rem .4rem 0 0; text-decoration: none; color: var(--rdk-text-muted); white-space: nowrap; }
.desk-tabs a.is-sel { background: #fff; border-color: var(--rdk-border); color: var(--rdk-text); box-shadow: inset 0 3px 0 var(--acc); margin-bottom: -1px; }
.desk-body { display: flex; min-height: 0; flex: 1; }
.desk-side { width: 16rem; flex: none; background: var(--rdk-surface-recessed); border-right: 1px solid var(--rdk-border); padding: .8rem; overflow: auto; }
.desk-scroll { flex: 1; overflow: auto; min-width: 0; }
.desk-status { display: flex; gap: 1rem; padding: .3rem .8rem; font-size: .75rem; color: var(--rdk-text-muted); background: var(--rdk-surface-recessed); border-top: 1px solid var(--rdk-border); flex: none; }
.desk-task { display: flex; align-items: center; gap: .35rem; padding: .4rem .6rem; background: rgb(12 17 26 / .8); overflow-x: auto; }
.desk-tb { display: flex; align-items: center; gap: .5rem; height: 2.3rem; padding: 0 .8rem; border: 1px solid transparent; border-radius: .35rem; background: transparent; color: #d5dde8; cursor: pointer; font-size: .85rem; white-space: nowrap; }
.desk-tb svg { width: 18px; height: 18px; }
.desk-tb:hover { background: rgb(255 255 255 / .1); }
.desk-tb.is-active { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .22); box-shadow: inset 0 -3px 0 var(--m-acc); color: #fff; }


.desk { height: 100dvh; --acc:var(--rdk-accent-blue); }
.desk-area { min-width:0; }
.desk-ic, .desk-tb { text-decoration:none; }
.desk-title .close { display:grid; place-items:center; width:1.7rem; height:1.5rem; border:1px solid rgb(255 255 255 / .25); background:rgb(255 255 255 / .08); color:#fff; border-radius:.25rem; text-decoration:none; line-height:1; }
.desk-title .close:hover { background:#b42330; }
.desk-container { container-type:inline-size; min-height:0; flex:1; display:flex; }
#module-view { display:flex; flex-direction:column; flex:1; min-height:0; }
.desk-container > .desk-body { width:100%; }
.desk-side:empty { display:none; }
.desk-win[data-layout="narrow"]:has(.desk-side:not(:empty)) { max-width:896px; }
.desk-win[data-layout="medium"]:has(.desk-side:not(:empty)) { max-width:1196px; }
.desk-win[data-layout="wide"]:has(.desk-side:not(:empty)) { max-width:1536px; }
.content { width:100%; margin:0 auto; padding:1.6rem 1.8rem 2.4rem; }
.desk-win[data-layout="narrow"] .content { max-width:600px; }
.desk-win[data-layout="medium"] .content { max-width:860px; }
.desk-win[data-layout="wide"] .content { max-width:1240px; }
.page-head { margin-bottom:1.2rem; }
.page-head h1 { margin:.15rem 0 .25rem; font-size:2rem; line-height:1.1; letter-spacing:-.02em; }
.page-head p, .side-card p { margin:0; color:var(--rdk-text-muted); }
.demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.demo-card { padding:1rem; } .demo-card h2 { margin:0 0 .4rem; } .demo-card p { margin:0; }
.side-card { padding:.5rem; }
.skip-link { position:fixed; left:.5rem; top:.5rem; z-index:100; background:#fff; color:#111; padding:.5rem; transform:translateY(-200%); }
.skip-link:focus { transform:none; }
.logout { background:transparent; border:0; color:#fff; cursor:pointer; font:inherit; text-decoration:underline; }
.login-desk { grid-template-rows:auto 1fr; }
.login-area { display:grid; place-items:center; padding:1rem; }
.login-window { max-width:400px; }
.login-content { padding:1.8rem; }
.login-content h1 { margin:0 0 .4rem; }
.login-content p { color:var(--rdk-text-muted); }
.login-content form { display:flex; flex-direction:column; gap:.6rem; }
.login-content .login-error { color:#a01725; font-weight:700; }
@container (max-width: 800px) { .desk-side { width:13.5rem; } }
@container (max-width: 560px) { .desk-body { flex-direction:column; } .desk-side { width:100%; max-height:9.5rem; border-right:0; border-bottom:1px solid var(--rdk-border); } .content { padding:1rem; } .page-head h1 { font-size:1.6rem; } .demo-grid { grid-template-columns:1fr; } }
@media (max-width:1099px) { .desk-icons { display:none; } .desk-area { padding:1.2rem; } }
@media (max-width:760px) { .desk-area { padding:0; } .desk-win { border-radius:0; max-width:none !important; height:100%; } .desk-bar .hide-m { display:none; } .desk-status { display:none; } .desk-tb { flex-direction:column; justify-content:center; height:3rem; gap:.1rem; font-size:.62rem; padding:0 .55rem; } }

/* Interakcje okna, powiadomienia i dialog potwierdzenia. */
.desk-win[hidden] { display:none; }
.desk-win-positioned { position:absolute; max-width:none !important; max-height:none; }
.desk-win-maximized { border-radius:0; }
.desk-win[data-module] .desk-title { cursor:move; touch-action:none; }
.desk-gesturing, .desk-gesturing * { user-select:none !important; }
.desk-resize { position:absolute; z-index:2; touch-action:none; }
.desk-resize-right { right:0; top:2.4rem; bottom:12px; width:7px; cursor:ew-resize; }
.desk-resize-bottom { left:0; right:12px; bottom:0; height:7px; cursor:ns-resize; }
.desk-resize-corner { right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; }
.desk-win:not(.desk-win-positioned) { position:relative; }
.desk-win-maximized .desk-resize { display:none; }
#toast-region { position:fixed; z-index:50; right:1rem; bottom:4.2rem; display:flex;
  flex-direction:column; gap:.5rem; width:min(24rem, calc(100vw - 2rem)); }
.shell-toast { display:flex; align-items:start; justify-content:space-between; gap:1rem;
  padding:.65rem .8rem; animation:toast-in .15s ease-out; }
.shell-toast.is-leaving { animation:toast-out .15s ease-in forwards; pointer-events:none; }
.shell-toast strong { display:block; }
.toast-close { border:0; background:transparent; color:inherit; font-size:1.3rem;
  line-height:1; cursor:pointer; }
.shell-dialog { min-width:min(22rem, calc(100vw - 2rem)); max-width:min(32rem, calc(100vw - 2rem)); padding:0; }
.shell-dialog .rdk-dialog-header { padding:.8rem 1rem; }
.shell-dialog .rdk-dialog-body { padding:1rem; }
.shell-dialog .rdk-dialog-footer { display:flex; justify-content:flex-end; gap:.6rem; padding:.8rem 1rem; }
.shell-dialog::backdrop { background:rgb(0 0 0 / .5); }
.shell-dialog h2 { margin:0; font-size:1.2rem; }
@keyframes toast-in { from { opacity:0; transform:translateY(.5rem); } }
@keyframes toast-out { to { opacity:0; transform:translateY(.5rem); } }
@media (max-width:760px) {
  .desk-win-positioned {
    position:relative; left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
  }
  .desk-win[data-module] .desk-title { cursor:default; }
  .desk-win[data-module] .desk-title button, .desk-resize { display:none; }
  #toast-region { left:.5rem; right:.5rem; bottom:4.5rem; width:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .shell-toast, .shell-toast.is-leaving { animation:none; }
}
.effects-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.rdk-badge { padding:.15rem .45rem; line-height:1.25; }
.form-modal {
  width:min(36rem, calc(100vw - 2rem)); max-width:calc(100vw - 2rem);
  max-height:calc(100dvh - 2rem); overflow:auto; color:var(--rdk-text);
}
.form-modal-body { padding:1.25rem; }
.form-modal-close {
  position:absolute; top:.4rem; right:.5rem; background:transparent; border:0;
  font-size:1.5rem; cursor:pointer; color:inherit; width:2rem; height:2rem;
}
.form-modal .page-head { padding-right:1.5rem; margin-bottom:.85rem; }
.form-modal h1 { margin:0; font-size:1.4rem; }
.form-modal .fit-form, .form-modal .op-form { border:0; box-shadow:none; padding:0; }
.form-modal .op-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-modal .op-reading-banner { margin-bottom:.85rem; padding:.65rem; }
.form-modal-error { color:#a01725; }
@media (max-width:520px) {
  .form-modal-body { padding:1rem; }
  .form-modal .op-form-grid { grid-template-columns:1fr; }
}
.demo-card form { margin-top:.5rem; }

/* Wspólny język wizualny modułów: kafelek, ikona kafelka, plakietka stanu, nagłówek sekcji. */
.tile, .rdk-card.tile { --tile-tone:var(--acc); position:relative; background:linear-gradient(160deg, color-mix(in srgb, var(--tile-tone) 20%, #fff), color-mix(in srgb, var(--tile-tone) 4%, #fff) 75%); border-top:5px solid var(--tile-tone); }
.tile[data-state="on"] { --tile-tone:var(--rdk-accent-green); }
.tile[data-state="off"] { --tile-tone:var(--rdk-accent-red); }
.tile[data-state="offline"] { --tile-tone:#64748b; }
.tile-icon { display:grid; place-items:center; flex:none; width:3.4rem; height:3.4rem; border-radius:.8rem; color:#fff; background:var(--tile-tone); box-shadow:0 2px 6px color-mix(in srgb, var(--tile-tone) 45%, transparent); }
.tile-icon svg { width:28px; height:28px; }
.tile-note { color:var(--rdk-text-muted); font-size:.85rem; }
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.15rem .65rem; border-radius:999px; font-size:.82rem; color:var(--tile-tone); background:color-mix(in srgb, var(--tile-tone) 16%, #fff); border:1px solid color-mix(in srgb, var(--tile-tone) 45%, #fff); font-weight:700; }
.pill::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
.section-head { display:flex; align-items:baseline; gap:.6rem; margin:1.4rem 0 .6rem; }
.section-head h2 { margin:0; font-size:1.15rem; }

.bar-toggle { display:inline-flex; align-items:center; gap:.45rem; height:1.5rem; padding:0 .7rem; border:1px solid rgb(255 255 255 / .22); border-radius:999px; background:rgb(255 255 255 / .06); color:#e6ecf3; font-size:.76rem; cursor:pointer; }
.bar-toggle:hover { background:rgb(255 255 255 / .14); }
.bar-led { width:.55rem; height:.55rem; border-radius:50%; background:#34d399; box-shadow:0 0 6px #34d399; }
.bar-toggle[aria-pressed="false"] .bar-led { background:#f87171; box-shadow:0 0 6px #f87171; }
.bar-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Ekran monitora: strona wyśrodkowana do 1200 px, po bokach cień na ciemnym tle. */
body { background: radial-gradient(ellipse at 50% 30%, #3a4152, #14171f 75%) fixed; }
.desk { position:relative; max-width:1200px; margin:0 auto; overflow:hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 0 0 10px #0b0d12, 0 0 0 11px rgb(255 255 255 / .1), 0 0 90px 30px rgb(0 0 0 / .75); }
@media (max-width: 1240px) {
  .desk { max-width:none; box-shadow:none; }
}

/* Tryb samodzielny: tylko okno modułu i owca. */
html[data-solo] .desk { grid-template-rows:1fr; }
html[data-solo] .desk-bar, html[data-solo] .desk-icons, html[data-solo] .desk-task,
html[data-solo] [data-window-minimize] { display:none; }
html[data-solo] .desk-area { padding-left:1.2rem; }
@media (max-width:760px) { html[data-solo] .desk-area { padding:0; } }

/* Owca chodząca po pasku zadań. */
.sheep { position:absolute; left:0; bottom:var(--sheep-floor, 3.2rem); z-index:5; background-repeat:no-repeat; background-size:100% 100%; image-rendering:pixelated; cursor:grab; touch-action:none; transform-origin:center bottom; will-change:transform; user-select:none; }
.desk-task { position:relative; }