.piot-widget{
  --piot-blue:#0E7CCB;
  --piot-blue-dark:#0A4D81;
  --piot-bg:#F4F7FB;
  --piot-text:#18233B;
  --piot-muted:#6B7C98;
  --piot-line:#C9D6E3;
  --piot-soft:#F2F7FC;
  --piot-radius:6px;
  --piot-shadow:0 10px 24px rgba(15,23,42,.06);
  font-family:Arial, Helvetica, sans-serif;
  color:var(--piot-text);
  background:var(--piot-bg);
  padding:14px;
  border-radius:var(--piot-radius);
}

.piot-widget *{box-sizing:border-box}

.piot-shell{
  max-width:1400px;
  margin:0 auto;
}

.piot-title{
  text-align:center;
  font-size:31px;
  line-height:1.15;
  font-weight:700;
  margin:0 0 18px;
  color:#16223D;
}

.piot-filters{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:end;
  margin-bottom:10px;
}

.piot-field-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--piot-muted);
  font-weight:700;
  margin:0 0 6px;
}

.piot-input,
.piot-btn{
  width:100%;
  height:42px;
  border-radius:var(--piot-radius);
  border:1px solid var(--piot-line);
  background:#fff;
  padding:0 11px;
  font-size:14px;
  outline:none;
  color:var(--piot-text);
  font-family:Arial, Helvetica, sans-serif;
}

.piot-input:focus{
  border-color:rgba(14,124,203,.45);
  box-shadow:0 0 0 4px rgba(14,124,203,.08);
}

.piot-btn{
  width:auto;
  min-width:120px;
  cursor:pointer;
  font-weight:700;
  transition:.18s ease;
}

.piot-btn:hover{
  background:#f8fafc;
}

.piot-status-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.piot-status-box{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:6px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  border:1px solid var(--piot-line);
  background:#fff;
  color:#475569;
}

.piot-status-box.error{
  background:#fff3f3;
  color:#8d1f1f;
  border-color:#efb1b1;
}

.piot-table-wrap{
  background:#fff;
  border:1px solid var(--piot-line);
  border-radius:var(--piot-radius);
  overflow:hidden;
  box-shadow:var(--piot-shadow);
}

.piot-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.piot-table thead th{
  background:#f8fafc;
  color:#597397;
  font-size:13px;
  font-weight:700;
  text-align:left;
  padding:11px 12px;
  border-bottom:1px solid #cfd9e4;
}

.piot-table tbody td{
  padding:11px 12px;
  vertical-align:top;
  font-size:13px;
  line-height:1.35;
  border-bottom:1px solid #edf2f7;
}

.piot-row-name{
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  color:#16223D;
  word-break:break-word;
}

.piot-row-extra{
  margin-top:4px;
  font-size:12px;
  color:var(--piot-muted);
  line-height:1.35;
}

.piot-phone{
  display:flex;
  align-items:flex-start;
  gap:7px;
  line-height:1.4;
  margin-bottom:4px;
}

.piot-phone:last-child{margin-bottom:0}

.piot-phone-icon{
  color:#94a3b8;
  flex:0 0 auto;
}

.piot-empty{
  padding:24px;
  text-align:center;
  color:var(--piot-muted);
  font-weight:700;
}

.piot-cards{
  display:none;
  gap:12px;
  padding:12px;
}

.piot-card{
  border:1px solid var(--piot-line);
  border-radius:var(--piot-radius);
  background:#fff;
  overflow:hidden;
}

.piot-card-top{
  padding:14px;
}

.piot-card-name{
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:4px;
  color:#16223D;
}

.piot-card-sub{
  color:var(--piot-muted);
  font-size:13px;
  font-weight:700;
  margin-bottom:10px;
}

.piot-card-extra{
  font-size:12px;
  color:var(--piot-muted);
  margin-bottom:10px;
}

.piot-card-address{
  font-size:13px;
  line-height:1.45;
  margin-bottom:10px;
}

@media (max-width:980px){
  .piot-title{font-size:26px}
  .piot-filters{grid-template-columns:1fr}
  .piot-btn{width:100%}
  .piot-table{display:none}
  .piot-cards{display:grid}
}

@media (max-width:560px){
  .piot-widget{padding:12px}
  .piot-title{font-size:22px}
}