:root{
  --bg:#0b0f14; --panel:#0f1620; --line:#1c2a3a; --text:#e5eef7; --muted:#8aa0b5;
  --danger:#e53935; --accent:#5cc8ff;
  --pad:12px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
[x-cloak]{display:none !important;}
[hidden]{display:none !important;}

/* Edit view: scrolluje tylko textarea (stopka zawsze “przyklejona” do dołu edytora) */
body.is-edit{overflow:hidden}
body.is-edit #appRoot{height:calc(100dvh - 56px);overflow:hidden}
@supports not (height: 100dvh){
  body.is-edit #appRoot{height:calc(100vh - 56px)}
}
body.is-edit .pane{height:100%}
body.is-edit .editor{
  height:100%;
  display:flex;flex-direction:column;
  gap:10px;
  padding-bottom:0;
}
body.is-edit .editor-text{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow:auto;
}
body.is-edit .editorbar{
  position:static;
  left:auto;right:auto;bottom:auto;
  flex:0 0 auto;
}

.topbar{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;
  height:56px;
  padding:0 var(--pad);
  background:linear-gradient(180deg,#0f1620,#0b0f14);
  border-bottom:1px solid var(--line);
}
.topbar-center{justify-self:center;display:flex;align-items:center;height:100%}
.topbar-center #topTitle{color:var(--muted);font-size:14px;letter-spacing:.12em}
.topbar-center #topTitle{touch-action:manipulation}
.topbar-left{justify-self:start;display:flex;align-items:center;height:100%}
.topbar-right{justify-self:end;display:flex;align-items:center;height:100%;gap:8px}
.icon-btn{
  width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
}
.icon-btn.pressed{box-shadow:inset 0 0 0 999px rgba(92,200,255,.14)}

.pane{padding:var(--pad)}
.list{display:flex;flex-direction:column;gap:8px}
.list.drag-active{touch-action:none}
.item{
  display:grid;grid-template-columns:44px 1fr 28px;
  gap:10px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none;
  touch-action: pan-y;
  position:relative;
}
.item.dragging{opacity:.35}
.item.dragging{touch-action:none}
.item.hover-target{outline:2px solid var(--accent)}
.item.drop-after::after{
  content:"";
  position:absolute;left:10px;right:10px;bottom:-6px;height:2px;
  background:var(--accent);border-radius:99px;
}
.item-title{font-weight:600}
.item-meta{color:var(--muted);font-size:12px}
.item-icon{position:relative;display:flex;align-items:center;justify-content:center;width:44px}
.item-icon-link{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:inherit;text-decoration:none}
.nav-ring{display:none;width:24px;height:24px;pointer-events:none}
.nav-ring{position:absolute;left:0;top:0}
.nav-ring circle{
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
  animation:navRing var(--navDur, 2000ms) linear forwards;
}
.item.nav-anim .item-icon .icon{opacity:0}
.item.nav-anim .item-icon .nav-ring{display:block}
.item.lp-anim .item-icon .icon{opacity:0}
.item.lp-anim .item-icon .nav-ring{display:block}
@keyframes navRing{to{stroke-dashoffset:0}}
.dot{position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:50%}
.dot-red{background:var(--danger)}
.dot-inline{position:static !important;right:auto;top:auto;vertical-align:middle;display:inline-block;margin-right:8px}
.hdr-dot{width:10px;height:10px;border-radius:50%;display:none;margin-right:8px;flex:0 0 auto}
.hdr-dot.is-on{display:inline-block}
.item-grip{opacity:.55}

.editorbar{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  display:flex;justify-content:space-between;gap:10px;
  padding:10px var(--pad);
  background:rgba(15,22,32,.95);
  border-top:1px solid var(--line);
}
.btn{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  padding:12px 14px;border-radius:14px;min-width:120px;
}
.btn.pressed{box-shadow:inset 0 0 0 999px rgba(92,200,255,.14)}
.btn-danger{background:rgba(229,57,53,.15);border-color:rgba(229,57,53,.55)}
.btn-ok{background:rgba(67,160,71,.18);border-color:rgba(67,160,71,.60)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.editor-text{
  width:100%;min-height:calc(100vh - 120px);
  background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:14px;padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;line-height:1.4;
}
.editor{padding-bottom:86px}

.login{padding:24px;max-width:520px;margin:0 auto}
.login-title{letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:6px 0 10px;text-align:center}
.pin-input{
  width:100%;height:54px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-size:24px;text-align:center;letter-spacing:.4em;
  caret-color: transparent;
}
.pad{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pad-btn{
  height:56px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:18px;
}
.pad-btn-danger{background:rgba(229,57,53,.18);border-color:rgba(229,57,53,.60)}
.pad-btn-ok{background:rgba(67,160,71,.18);border-color:rgba(67,160,71,.60)}
.pad-btn.pressed{box-shadow:inset 0 0 0 999px rgba(92,200,255,.14)}
.pinpad.is-locked .pad{pointer-events:none;opacity:.45}
.pinpad.is-locked .pin-input{opacity:.75}
.pad-btn-wide{grid-column: span 1}
.warn{color:var(--danger)}

/* Pinpad sizing: mobile full, tablet/desktop ~7cm */
@media (min-width: 720px){
  .pinpad{max-width:7cm;margin:0 auto}
  .pad-btn{height:2cm; width:2cm; justify-self:center}
  .pad{grid-template-columns:repeat(3,2cm); justify-content:center}
}

.menu{
  position:fixed;left:12px;top:62px;z-index:30;
  width:220px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:8px;display:flex;flex-direction:column;gap:6px;
}
.menu-item{
  display:block;padding:10px 12px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:var(--text);text-align:left;text-decoration:none;
}
.menu-item.pressed{box-shadow:inset 0 0 0 999px rgba(92,200,255,.14)}
.menu-item:hover{border-color:var(--line)}
.menu-item-muted{color:var(--muted)}

/* tiny inline icons */
.icon{display:inline-block;width:24px;height:24px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}
.icon-menu{mask-image:linear-gradient(#000,#000); clip-path:polygon(0 20%,100% 20%,100% 30%,0 30%, 0 45%,100% 45%,100% 55%,0 55%, 0 70%,100% 70%,100% 80%,0 80%)}
.icon-plus{clip-path:polygon(45% 10%,55% 10%,55% 45%,90% 45%,90% 55%,55% 55%,55% 90%,45% 90%,45% 55%,10% 55%,10% 45%,45% 45%)}
.icon-folder{clip-path:polygon(10% 30%,40% 30%,48% 18%,90% 18%,90% 82%,10% 82%)}
.icon-folder-plus{clip-path:polygon(10% 30%,40% 30%,48% 18%,90% 18%,90% 82%,10% 82%)}
.icon-file{clip-path:polygon(22% 12%,60% 12%,78% 30%,78% 88%,22% 88%)}
.icon-up{clip-path:polygon(50% 18%,80% 48%,68% 48%,68% 82%,32% 82%,32% 48%,20% 48%)}
.icon-grip{clip-path:polygon(30% 25%,40% 25%,40% 35%,30% 35%,30% 45%,40% 45%,40% 55%,30% 55%,30% 65%,40% 65%, 60% 25%,70% 25%,70% 35%,60% 35%,60% 45%,70% 45%,70% 55%,60% 55%,60% 65%,70% 65%)}

/* Static pages: menu toggle without Alpine */
[data-menu-panel]{display:none}
[data-menu-panel].is-open{display:flex}

.drag-ghost{
  position:fixed;left:0;top:0;z-index:80;
  pointer-events:none;
  opacity:.92;
  transform:translate3d(0,0,0);
}

.modal{position:fixed;inset:0;z-index:60;display:none}
.modal.is-open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{
  position:absolute;left:50%;top:22%;transform:translateX(-50%);
  width:min(520px, calc(100vw - 24px));
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:12px;
}
.modal-title{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:13px;margin:4px 2px 10px}
.modal-body{display:flex;flex-direction:column;gap:10px}
.modal-text{color:var(--text);font-size:14px;line-height:1.3}

/* Info modal: wycentrowane treści (tytuł jak w innych modalach) */
#infoModal .modal-card{ text-align:center; }
#infoModal .modal-body{ align-items:center; }
#infoModal .modal-actions{ display:flex; justify-content:center; }
#infoModal .info-app{ font-size:18px; font-weight:700; letter-spacing:.08em; color:var(--text); padding:10px 0 10px; }
#infoModal .info-lines{ color:var(--muted); font-size:13px; line-height:1.4; }
.modal-input{
  width:100%;height:54px;border-radius:16px;
  border:1px solid var(--line);background:transparent;color:var(--text);
  font-size:16px;padding:0 12px;
}
.modal-warn{min-height:18px;color:var(--danger);font-size:13px}
.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:10px}