:root{
  --bg:#0b0d12;
  --card:#11141b;
  --muted:#9aa3b2;
  --text:#eef2f7;
  --ok:#2dd4bf;
  --bad:#fb7185;
  --warn:#fbbf24;
  --border:#232a36;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
}
.wrap{max-width:980px;margin:0 auto;padding:12px}

/* TOP BAR: małe */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.brand{font-weight:900;letter-spacing:1px;font-size:12px}
.statusbar{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* mały przycisk */
.btnSm{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b0d12;
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.hidden{display:none}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin:10px 0;
}

/* Formularze */
.row{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center;margin:8px 0}
label{color:var(--muted);font-size:12px}

input, select{
  background:#0b0d12;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  font-size:14px;
  outline:none;
}
input:focus, select:focus{border-color:#4c85ff}

.btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b0d12;
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.btn.primary{background:#17304a;border-color:#2a4b76}
.btn.danger{background:#4a1722;border-color:#7a2a3a}
.btn:disabled{opacity:.45;cursor:not-allowed}

.hint{margin-top:8px;color:var(--muted);font-size:12px}
.msg{margin-top:8px;color:var(--muted);min-height:16px}
.msg.big{margin:10px 0;font-size:14px;font-weight:900}

/* SKAN: mały input, nie dominuje */
.scanRow{display:flex;gap:10px;align-items:center}
.scanLabel{font-size:12px;color:var(--muted);min-width:44px}
.scanInput{
  flex:1;
  font-size:16px;        /* było 28 -> małe */
  padding:10px 12px;
  border-radius:12px;
}

/* Nagłówek zamówienia: mały */
.orderHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:10px;
  gap:10px;
}
.hMain{font-size:15px;font-weight:900}
.hSub{color:var(--muted);margin-top:3px;font-size:12px}
.timer{min-width:170px;text-align:right}
.timerLabel{color:var(--muted);font-size:11px}
.timerValue{font-size:16px;font-weight:900}

/* TOWAR: największy i najczytelniejszy */
.items{margin-top:10px}
.item{
  display:grid;
  grid-template-columns: 220px 110px 1fr;
  gap:12px;
  padding:12px 10px;
  border-top:1px solid var(--border);
  align-items:center;
}
.sym{
  font-size:30px;     /* DUŻE */
  font-weight:950;
  letter-spacing:0.5px;
}
.qty{
  font-size:34px;     /* DUŻE */
  font-weight:950;
  text-align:center;
}
.qty.multi{color:var(--warn)}
.name{
  color:var(--muted);
  font-size:12px;     /* małe szczegóły */
  line-height:1.25;
}

/* Flash OK/BAD */
.flash-ok{animation: flashOk .22s ease-in-out}
.flash-bad{animation: flashBad .22s ease-in-out}
@keyframes flashOk { from{box-shadow:0 0 0 0 rgba(45,212,191,.55)} to{box-shadow:0 0 0 18px rgba(45,212,191,0)} }
@keyframes flashBad { from{box-shadow:0 0 0 0 rgba(251,113,133,.55)} to{box-shadow:0 0 0 18px rgba(251,113,133,0)} }

.actions{display:flex;gap:10px;margin-top:12px}

/* --- ITEM LAYOUT v2 (img + mniejszy symbol + większa nazwa) --- */
.item{
  display:grid;
  grid-template-columns: 70px 140px 90px 1fr; /* img, symbol, qty, meta */
  gap:12px;
  padding:12px 10px;
  border-top:1px solid var(--border);
  align-items:center;
}
.img{
  width:70px;height:55px;
  border-radius:10px;
  background:#0b0d12;
  border:1px dashed #232a36;
}
.sym{ font-size:22px; font-weight:950; letter-spacing:0.4px; }
.qty{ font-size:30px; font-weight:950; text-align:center; }
.meta{ display:flex; flex-direction:column; gap:4px; }
.name{ color:var(--text); font-size:18px; font-weight:800; line-height:1.15; }
.desc{ color:var(--muted); font-size:13px; line-height:1.2; }

/* === ITEM v3: 2 linie (nazwa+opis) + miejsce na foto === */
.item{
  display:grid;
  grid-template-columns: 64px 130px 80px 1fr; /* img, symbol, qty, meta */
  gap:12px;
  padding:12px 10px;
  border-top:1px solid var(--border);
  align-items:center;
}
.img{
  width:64px;height:52px;
  border-radius:10px;
  background:#0b0d12;
  border:1px dashed #232a36;
}
.sym{
  font-size:20px;     /* mniejszy symbol */
  font-weight:950;
  letter-spacing:0.3px;
}
.qty{
  font-size:28px;
  font-weight:950;
  text-align:center;
}
.qty.multi{color:var(--warn)}
.meta{display:flex;flex-direction:column;gap:4px}
.name{
  color:var(--text);
  font-size:18px;     /* NAZWA dużo większa */
  font-weight:900;
  line-height:1.15;
}
.desc{
  color:var(--muted);
  font-size:13px;     /* OPIS czytelny, ale mniejszy */
  line-height:1.25;
  white-space:pre-wrap;
}

/* ITEM: foto placeholder + 2 linie (nazwa+opis) */
.item{
  display:grid;
  grid-template-columns: 64px 120px 80px 1fr;
  gap:12px;
  padding:12px 10px;
  border-top:1px solid var(--border);
  align-items:center;
}
.img{
  width:64px;height:52px;
  border-radius:10px;
  background:#0b0d12;
  border:1px dashed #232a36;
}
.sym{ font-size:18px; font-weight:950; }
.qty{ font-size:30px; font-weight:950; text-align:center; }
.qty.multi{ color:var(--warn); }
.meta{ display:flex; flex-direction:column; gap:6px; }
.name{ color:var(--text); font-size:22px; font-weight:950; line-height:1.1; }
.desc{ color:var(--muted); font-size:15px; line-height:1.2; }

/* OPIS = wielkość NAZWY + zawijanie */
.name{ font-size:22px; font-weight:950; line-height:1.12; }
.desc{
  font-size:22px;          /* tak samo jak nazwa */
  font-weight:700;         /* trochę lżej, ale czytelnie */
  color:var(--text);       /* nie szare */
  line-height:1.12;
  white-space:normal;      /* zawijaj */
  overflow-wrap:anywhere;  /* łam długie ciągi */
  word-break:break-word;
}