/* TOP HAIR admin — utilitarian, on-brand. */
:root{
  --bone:#f3ece2;--bone-2:#ece2d4;--espresso:#2a221d;--espresso-soft:#5a4f46;
  --brass:#9a6a33;--line:#d8ccbb;--danger:#9a3333;--ok:#3a7a3a;
}
*{box-sizing:border-box;margin:0;padding:0}
body.admin{
  font-family:"Hanken Grotesk",sans-serif;color:var(--espresso);
  background:var(--bone-2);min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:var(--brass)}
button{font:inherit;cursor:pointer}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login .card{
  background:var(--bone);border:1px solid var(--line);border-radius:14px;
  padding:2.4rem;width:min(380px,100%);box-shadow:0 20px 60px rgba(42,34,29,.12);
  display:flex;flex-direction:column;gap:1rem;
}
.login h1{font-family:"Cormorant Garamond",serif;font-weight:500;letter-spacing:.12em;text-align:center;font-size:2rem}
.login .sub{text-align:center;font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--espresso-soft);margin-top:-.4rem}
.login label{display:flex;flex-direction:column;gap:.35rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso-soft)}
.login input{
  font:inherit;padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--espresso);
}
.login input:focus{outline:2px solid var(--brass);outline-offset:1px}
.login button{
  margin-top:.5rem;padding:.8rem;border:0;border-radius:999px;
  background:var(--espresso);color:var(--bone);letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;font-weight:600;
}
.login button:hover{background:var(--brass)}
.error{background:rgba(154,51,51,.1);color:var(--danger);padding:.6rem .8rem;border-radius:8px;font-size:.85rem}

/* admin chrome */
.admin-bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  padding:.9rem 1.4rem;background:var(--espresso);color:var(--bone);
}
.admin-bar .brand{font-family:"Cormorant Garamond",serif;font-size:1.3rem;letter-spacing:.12em;color:var(--bone);text-decoration:none}
.admin-bar .brand span{font-family:"Hanken Grotesk",sans-serif;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.admin-bar nav{display:flex;gap:1.2rem;justify-self:center}
.admin-bar nav a{color:var(--bone);text-decoration:none;font-size:.8rem;opacity:.8}
.admin-bar nav a:hover,.admin-bar nav a.active{opacity:1;color:#fff}
.admin-bar form{margin:0;justify-self:end}
.admin-bar .link{background:none;border:0;color:var(--brass);font-size:.8rem}
.admin-bar .link:hover{color:#fff}

.admin-main{max-width:860px;margin:0 auto;padding:2.4rem 1.4rem}
.admin-main h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:2.2rem;letter-spacing:.03em}
.admin-main .lead{color:var(--espresso-soft);margin:.4rem 0 2rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card-link{
  display:block;background:var(--bone);border:1px solid var(--line);border-radius:12px;
  padding:1.4rem;text-decoration:none;color:var(--espresso);transition:transform .15s ease,box-shadow .15s ease;
}
.card-link:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(42,34,29,.1)}
.card-link h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.4rem;margin-bottom:.3rem}
.card-link p{color:var(--espresso-soft);font-size:.88rem}

/* forms (content + prices) */
.stack{display:flex;flex-direction:column;gap:1.2rem;max-width:560px}
.field{display:flex;flex-direction:column;gap:.4rem}
.field > span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso-soft)}
.field input,.field textarea,.price-row input,.price-add input{
  font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--espresso);width:100%;
}
.field textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px}

.form-actions{display:flex;align-items:center;gap:1rem}
button[type=submit]{
  padding:.6rem 1.4rem;border:0;border-radius:999px;background:var(--espresso);color:var(--bone);
  letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;font-weight:600;
}
button[type=submit]:hover{background:var(--brass)}
.status{font-size:.85rem}
.status.ok{color:var(--ok)}
.status.bad{color:var(--danger)}
.muted{color:var(--espresso-soft);font-size:.9rem}

/* prices */
.price-add{display:flex;gap:.6rem;margin-bottom:1.4rem;flex-wrap:wrap;max-width:640px}
.price-add input{flex:1;min-width:160px;width:auto}
.price-list{display:flex;flex-direction:column;gap:.6rem;max-width:640px}
.price-row{
  display:flex;gap:.6rem;align-items:center;background:var(--bone);
  border:1px solid var(--line);border-radius:10px;padding:.6rem;
}
.price-row input{width:auto}
.price-row input:first-child{flex:2}
.price-row input:nth-child(2){flex:1;min-width:110px}
.row-actions{display:flex;gap:.3rem;flex-shrink:0}
.row-actions button{
  border:1px solid var(--line);background:#fff;border-radius:7px;padding:.4rem .6rem;font-size:.78rem;color:var(--espresso);
}
.row-actions button:hover:not(:disabled){border-color:var(--brass);color:var(--brass)}
.row-actions button:disabled{opacity:.35;cursor:default}
.row-actions .danger:hover{border-color:var(--danger);color:var(--danger)}
@media (max-width:560px){
  .price-row{flex-wrap:wrap}
  .price-row input:first-child,.price-row input:nth-child(2){flex:1 1 100%}
}

/* gallery */
.gallery-upload{display:flex;gap:.6rem;margin-bottom:1.6rem;flex-wrap:wrap;align-items:center;max-width:680px}
.gallery-upload input[type=file]{font:inherit;flex:1;min-width:200px}
.gallery-upload input[type=text]{
  font:inherit;flex:1;min-width:200px;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.gallery-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;max-width:860px}
.gallery-item{
  background:var(--bone);border:1px solid var(--line);border-radius:12px;padding:.7rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.gallery-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;display:block;background:var(--bone-2)}
.alt-form{display:flex;gap:.4rem}
.alt-form input{
  font:inherit;flex:1;min-width:0;padding:.45rem .55rem;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:.82rem;
}
.alt-form button{
  border:1px solid var(--line);background:#fff;border-radius:7px;padding:.3rem .6rem;font-size:.75rem;color:var(--espresso);
}
.alt-form button:hover{border-color:var(--brass);color:var(--brass)}
.gallery-item .row-actions{justify-content:flex-end}