body{ background:var(--bg); }

.login-screen[hidden], .dashboard[hidden]{ display:none; }

.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius);
  padding:36px 32px; width:100%; max-width:360px; display:flex; flex-direction:column; gap:16px;
}
.login-card h1{ font-size:1.6rem; }
.login-card label{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.login-card input{
  font-family:var(--sans); font-size:0.95rem; padding:10px 12px; border-radius:var(--radius);
  border:1px solid var(--surface-border); background:var(--bg); color:var(--ink);
}

.field-error{ color:var(--cta); font-family:var(--mono); font-size:0.78rem; }

.admin-header{ border-bottom:1px solid var(--surface-border); background:var(--surface); }
.admin-header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:16px; flex-wrap:wrap; }
.admin-header-actions{ display:flex; gap:10px; }

.admin-main{ padding-block:32px 80px; display:flex; flex-direction:column; gap:32px; }

.panel{ background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius); padding:24px; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.panel-head h2{ font-size:1.3rem; }

.listing-form{ display:flex; flex-direction:column; gap:16px; }
.listing-form label{
  display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:0.66rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}
.listing-form input, .listing-form select, .listing-form textarea{
  font-family:var(--sans); font-size:0.92rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--surface-border); border-radius:var(--radius); padding:10px 12px; resize:vertical;
}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.photo-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.photo-thumb{ position:relative; width:96px; height:72px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--surface-border); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb button{
  position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%;
  background:rgba(20,39,34,0.75); color:#fff; border:none; cursor:pointer; font-size:0.7rem; line-height:1;
}
.upload-status{ font-family:var(--mono); font-size:0.76rem; color:var(--ink-soft); min-height:1em; }

.form-actions{ display:flex; align-items:center; gap:16px; }

.table-wrap{ overflow-x:auto; }
.listing-table{ width:100%; border-collapse:collapse; font-size:0.9rem; }
.listing-table th{
  text-align:left; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:8px 10px; border-bottom:1px solid var(--surface-border);
}
.listing-table td{ padding:10px; border-bottom:1px solid var(--surface-border); vertical-align:middle; }
.listing-table .empty-row{ text-align:center; color:var(--ink-soft); font-family:var(--mono); padding:24px; }
.row-thumb{ width:56px; height:42px; object-fit:cover; border-radius:2px; border:1px solid var(--surface-border); display:block; }
.status-pill{
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; border:1px solid var(--surface-border);
}
.status-pill.is-draft{ color:var(--cta); border-color:var(--cta); }
.status-pill.is-published{ color:var(--accent); border-color:var(--accent); }
.row-actions{ display:flex; gap:8px; }
.row-actions button{
  background:none; border:1px solid var(--surface-border); border-radius:var(--radius); padding:6px 10px;
  font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; cursor:pointer; color:var(--ink);
}
.row-actions button:hover{ border-color:var(--ink); }
.row-actions .danger:hover{ border-color:var(--cta); color:var(--cta); }

@media (max-width:760px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr 1fr; }
}