/* Admin: floating button, overlay, lock screen, lists, forms. */
/* ---------------- ADMIN FAB ---------------- */
.admin-fab{
  position:fixed; left:calc(50% - 280px + 16px); bottom:calc(16px + var(--safe-b)); z-index:60;
  width:46px; height:46px; border-radius:50%; background:var(--ink); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.admin-fab svg{width:21px; height:21px; stroke:#fff;}
@media (max-width:559px){ .admin-fab{ left:16px; } }

/* ---------------- ADMIN OVERLAY ---------------- */
.admin-overlay{
  position:fixed; inset:0; z-index:200; background:var(--paper);
  pointer-events:none; transform:translateY(100%);
  transition:transform .38s cubic-bezier(.22,.9,.3,1);
}
.admin-overlay.open{pointer-events:auto; transform:translateY(0);}
.admin-wrap{max-width:560px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;}
.admin-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 16px calc(14px); background:var(--ink); color:#fff;
  position:sticky; top:0; z-index:5;
}
.admin-top h3{margin:0; font-size:15.5px; font-weight:700;}
.admin-top button.icon-btn{
  background:rgba(255,255,255,.12); border:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.admin-top button.icon-btn svg{width:17px; height:17px; stroke:#fff;}

.lock-screen{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:30px; text-align:center;}
.lock-screen svg{width:34px; height:34px; stroke:var(--red-500);}
.lock-screen p{margin:0; color:var(--muted); font-size:13.5px; max-width:260px; line-height:1.8;}
.pin-input{
  font-size:22px; letter-spacing:.5em; text-align:center; width:180px; padding:12px 0;
  border:1.5px solid var(--line); border-radius:12px; font-family:inherit; direction:ltr;
}
.pin-input:focus{outline:none; border-color:var(--red-500);}
.primary-btn{
  background:var(--red-500); color:#fff; border:none; font-weight:700; font-size:14.5px;
  padding:13px 26px; border-radius:12px; cursor:pointer; width:100%; max-width:220px;
}
.pin-error{color:var(--red-500); font-size:12.5px; font-weight:600; min-height:16px;}

.admin-tabs{display:flex; gap:0; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:57px; z-index:4;}
.admin-tab{flex:1; text-align:center; padding:13px 8px; font-size:13px; font-weight:700; color:var(--muted); background:none; border:none; cursor:pointer; border-bottom:2.5px solid transparent;}
.admin-tab.active{color:var(--red-500); border-color:var(--red-500);}

.admin-body{flex:1; overflow-y:auto; padding:16px 16px 60px;}
.admin-section-title{font-size:12px; color:var(--muted); font-weight:700; margin:18px 0 10px; letter-spacing:.04em;}
.admin-section-title:first-child{margin-top:0;}

.row-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:12px; display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.row-thumb{width:48px; height:48px; border-radius:10px; background:var(--card-2); flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.row-thumb img{width:100%; height:100%; object-fit:cover;}
.row-thumb svg{width:22px; height:22px; stroke:var(--muted);}
.row-main{flex:1; min-width:0;}
.row-title{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}
.row-actions{display:flex; align-items:center; gap:4px; flex:none;}
.icon-sm{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-sm svg{width:14px; height:14px; stroke:var(--charcoal);}
.icon-sm.danger svg{stroke:var(--red-500);}
.icon-sm:disabled{opacity:.3; cursor:default;}

.add-btn{
  width:100%; border:1.5px dashed var(--line); background:none; color:var(--red-500);
  font-weight:700; font-size:13.5px; padding:13px; border-radius:var(--radius-md); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px;
}
.add-btn svg{width:16px; height:16px;}

.field{margin-bottom:13px;}
.field label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 13px;
  font-family:inherit; font-size:13.5px; background:#fff; color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--red-500);}
.field textarea{min-height:88px; resize:vertical; line-height:1.7;}
.field-hint{font-size:11px; color:var(--muted); margin-top:5px;}
.icon-choice-row{display:flex; gap:8px; flex-wrap:wrap;}
.icon-choice{
  width:44px; height:44px; border-radius:10px; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-choice svg{width:20px; height:20px; stroke:var(--charcoal);}
.icon-choice.active{border-color:var(--red-500); background:var(--red-500);}
.icon-choice.active svg{stroke:#fff;}

.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; margin-bottom:16px;}
.form-actions{display:flex; gap:10px; margin-top:6px;}
.form-actions button{flex:1; padding:12px; border-radius:10px; font-weight:700; font-size:13.5px; cursor:pointer; border:none;}
.btn-save{background:var(--red-500); color:#fff;}
.btn-cancel{background:var(--card-2); color:var(--charcoal);}

.admin-fab[hidden]{display:none;}
.admin-tools{display:flex; gap:8px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line);}
.admin-tools button{
  flex:1; padding:9px; border-radius:10px; border:1.5px solid var(--line); background:#fff;
  font-weight:700; font-size:12.5px; color:var(--charcoal); cursor:pointer;
}

.row-thumb img.ico{width:24px; height:24px; object-fit:contain; filter:brightness(0);}
.icon-choice img{width:26px; height:20px; object-fit:contain; filter:brightness(0);}
.icon-choice.active img{filter:none;}

.field label.check{display:flex; align-items:center; gap:10px; margin:0; font-size:13.5px; color:var(--charcoal);}
.field label.check input{width:20px; height:20px; padding:0; accent-color:var(--red-500);}

.admin-fab{bottom:calc(86px + var(--safe-b));}  /* stay clear of the catalog bottom bar */