.admin-wrap{ flex:1; padding:26px; max-width:860px; margin:0 auto; width:100%; }
.admin-wrap h2{ font-family:'Source Serif 4', serif; font-size:1.3rem; margin:0 0 4px; }
.admin-wrap p.hint{ color:var(--ink-soft); font-size:0.85rem; margin:0 0 20px; }
.admin-block{ background:var(--white); border:1px solid var(--line); border-radius:6px; padding:18px 20px; margin-bottom:18px; }
.admin-block h3{ font-family:'Source Serif 4', serif; font-size:1.05rem; margin:0 0 12px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:0.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input[type=text], .field input[type=password], .field input[type=number], .field textarea{
  width:100%; font-family:inherit; font-size:0.9rem; padding:9px 11px; border:1px solid var(--line); border-radius:5px; background:var(--paper);
}
.field textarea{ min-height:100px; resize:vertical; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.row > .field{ flex:1; min-width:140px; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.chip{ position:relative; width:56px; height:56px; }
.chip img{ width:100%; height:100%; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.chip button{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--ink); color:#fff; border:2px solid #fff; font-size:0.65rem; cursor:pointer; padding:0; }

.status-msg{ display:block; font-size:0.82rem; margin-top:8px; color:var(--ink-soft); }
.status-msg.error{ color:var(--coral); }
.status-msg.ok{ color:var(--green); }

table.data-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
table.data-table th, table.data-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
table.data-table th{ color:var(--ink-soft); font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.03em; }
table.data-table td.mono{ font-family:monospace; letter-spacing:0.03em; }
.badge{ display:inline-block; font-size:0.7rem; padding:2px 8px; border-radius:10px; background:var(--paper-2); color:var(--ink-soft); }
.badge.used{ background:var(--teal-soft); color:var(--teal); }
.icon-btn{ background:none; border:1px solid var(--line); border-radius:5px; padding:4px 9px; font-size:0.75rem; cursor:pointer; color:var(--ink-soft); }
.icon-btn:hover{ border-color:var(--teal); color:var(--teal); }
.icon-btn.danger:hover{ border-color:var(--coral); color:var(--coral); }

/* ---------- Admin: chapdagi yon menyu (sidebar) ---------- */
.admin-shell{ flex:1; display:flex; min-height:0; }
.admin-sidebar{
  width:220px; flex:none; background:var(--white); border-right:1px solid var(--line);
  padding:18px 12px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
.admin-side-title{ font-family:'Source Serif 4', serif; font-weight:700; font-size:1.05rem; padding:4px 10px 12px; }
.admin-nav-btn{
  font-family:inherit; font-size:0.9rem; font-weight:600; text-align:left;
  padding:11px 14px; border-radius:6px; border:1px solid transparent;
  background:transparent; color:var(--ink-soft); cursor:pointer;
}
.admin-nav-btn:hover{ background:var(--paper-2); color:var(--ink); }
.admin-nav-btn.active{ background:var(--teal); color:#fff; }
.admin-main{ flex:1; min-width:0; overflow-y:auto; padding:26px; }
.admin-section{ display:none; max-width:860px; margin:0 auto; }
.admin-section.active{ display:block; }
.admin-section > h2{ font-family:'Source Serif 4', serif; font-size:1.3rem; margin:0 0 16px; }

@media (max-width:760px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--line); padding:10px; }
  .admin-side-title{ display:none; }
  .admin-main{ padding:16px; }
}