:root{
  --charcoal:#1B1712;
  --charcoal-2:#241F18;
  --ink:#2A2318;
  --cream:#F4EFE3;
  --cream-2:#EAE2D0;
  --hide:#8B5A3C;
  --hide-dark:#6B4229;
  --tag:#E8B94A;
  --tag-dim:#C99A34;
  --line: rgba(244,239,227,0.14);
  --line-dark: rgba(27,23,18,0.12);
  --danger:#c65a4a;
  --danger-bg: rgba(198,90,74,0.12);
  --ok:#5f9e6f;
  --ok-bg: rgba(95,158,111,0.12);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', Arial, sans-serif;
  font-size:15px;
  line-height:1.55;
}
a{color:inherit;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.01em; margin:0;}
.mono{font-family:'IBM Plex Mono', monospace;}

/* ---- Top bar ---- */
.topbar{
  background:var(--charcoal); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  border-bottom:1px solid var(--line);
}
.topbar .brand{
  font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.1rem;
}
.topbar .brand span{color:var(--tag);}
.topbar nav{display:flex; align-items:center; gap:22px;}
.topbar nav a{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem;
  letter-spacing:0.05em; text-transform:uppercase; text-decoration:none;
  color:var(--cream); opacity:0.75;
}
.topbar nav a:hover{opacity:1;}
.topbar nav a.current{opacity:1; color:var(--tag);}
.topbar .view-site{
  background:var(--tag); color:var(--charcoal); padding:8px 14px;
  border-radius:2px; font-weight:600; opacity:1 !important;
}

.shell{max-width:1080px; margin:0 auto; padding:40px 28px 80px;}

.page-title{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:28px;}
.page-title h1{font-size:1.6rem;}
.page-title p{margin-top:6px; color:rgba(42,35,24,0.65); font-size:0.92rem;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.03em; text-transform:uppercase; font-weight:500;
  text-decoration:none; border-radius:3px; border:1px solid transparent;
  cursor:pointer; background:none;
}
.btn-primary{background:var(--charcoal); color:var(--tag); border-color:var(--charcoal);}
.btn-primary:hover{background:#000;}
.btn-outline{border-color:var(--line-dark); color:var(--ink);}
.btn-outline:hover{border-color:var(--hide-dark);}
.btn-danger{background:var(--danger-bg); color:var(--danger); border-color:rgba(198,90,74,0.3);}
.btn-danger:hover{background:rgba(198,90,74,0.2);}
.btn-sm{padding:7px 12px; font-size:0.7rem;}

/* ---- Cards / panels ---- */
.panel{
  background:#fff; border:1px solid var(--line-dark); border-radius:4px;
  padding:28px;
}
.flash{
  padding:12px 16px; border-radius:3px; margin-bottom:22px;
  font-size:0.88rem; font-family:'IBM Plex Mono', monospace;
}
.flash-ok{background:var(--ok-bg); color:#3d6b48; border:1px solid rgba(95,158,111,0.3);}
.flash-err{background:var(--danger-bg); color:var(--danger); border:1px solid rgba(198,90,74,0.3);}

/* ---- Login ---- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--charcoal); padding:20px;
}
.login-card{
  width:100%; max-width:380px; background:var(--charcoal-2);
  border:1px solid var(--line); border-radius:5px; padding:38px 32px;
  color:var(--cream);
}
.login-card .brand{font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.3rem; margin-bottom:6px;}
.login-card .brand span{color:var(--tag);}
.login-card .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(244,239,227,0.5); margin-bottom:28px; display:block;
}

/* ---- Forms ---- */
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px;
  color:rgba(42,35,24,0.65);
}
.login-card .field label{color:rgba(244,239,227,0.6);}
.field input[type=text], .field input[type=password], .field input[type=number],
.field select, .field textarea{
  width:100%; padding:11px 12px; border-radius:3px;
  border:1px solid var(--line-dark); background:#fff; color:var(--ink);
  font-family:'Inter', Arial, sans-serif; font-size:0.92rem;
}
.login-card .field input{
  background:rgba(244,239,227,0.06); border-color:var(--line); color:var(--cream);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--tag); outline-offset:1px; border-color:var(--tag);
}
.field .hint{margin-top:6px; font-size:0.78rem; color:rgba(42,35,24,0.5);}
.field-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}

.file-drop{
  border:1.5px dashed var(--line-dark); border-radius:4px; padding:28px;
  text-align:center; color:rgba(42,35,24,0.6); font-size:0.88rem;
}

/* ---- Tabs ---- */
.tabs{display:flex; gap:6px; margin-bottom:24px; border-bottom:1px solid var(--line-dark);}
.tabs a{
  padding:10px 16px; text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.03em;
  text-transform:uppercase; color:rgba(42,35,24,0.55);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a.active{color:var(--ink); border-color:var(--tag); font-weight:600;}
.tabs .count{
  display:inline-block; margin-left:6px; background:var(--cream-2); padding:1px 7px;
  border-radius:10px; font-size:0.7rem;
}

/* ---- Image grid ---- */
.img-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px;
}
.img-card{
  border:1px solid var(--line-dark); border-radius:4px; overflow:hidden; background:#fff;
}
.img-card .thumb{aspect-ratio:4/3; overflow:hidden; background:var(--cream-2);}
.img-card .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.img-card .body{padding:12px 14px;}
.img-card .meta-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:rgba(42,35,24,0.55);
  margin-bottom:10px;
}
.img-card .temps{
  display:flex; gap:10px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; color:var(--hide-dark); margin-bottom:10px;
}
.img-card .caption{font-size:0.85rem; margin-bottom:12px; color:rgba(42,35,24,0.75); min-height:1.2em;}
.img-card .actions{display:flex; gap:8px;}

.empty-state{
  border:1px dashed var(--line-dark); border-radius:4px; padding:48px 24px;
  text-align:center; color:rgba(42,35,24,0.55);
}
.empty-state h3{margin-bottom:8px; font-size:1.1rem; color:var(--ink);}

.top-actions{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px;}