@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600&family=Jost:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --color-bg:        #0C1210;
  --color-bg-alt:     #121A17;
  --color-bg-card:    #16211D;
  --color-gold:       #B8944F;
  --color-gold-bright:#D4AF6A;
  --color-ivory:      #EDE7DA;
  --color-burgundy:   #4A1620;
  --color-muted:      #8A9490;
  --color-line:       rgba(184,148,79,0.25);
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--color-bg);
  color:var(--color-ivory);
  font-family:var(--font-body);
  line-height:1.5;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-display); font-weight:600;}

.facet{
  clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
}

/* ---- Admin shell ---- */
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{
  width:230px;
  background:var(--color-bg-alt);
  border-right:1px solid var(--color-line);
  padding:24px 0;
  flex-shrink:0;
}
.admin-sidebar .brand{
  font-family:var(--font-display);
  font-size:1.2rem;
  padding:0 24px 24px;
  display:block;
  border-bottom:1px solid var(--color-line);
  margin-bottom:16px;
}
.admin-sidebar .brand span{color:var(--color-gold);}
.admin-nav a{
  display:block;
  padding:12px 24px;
  font-size:0.9rem;
  color:var(--color-muted);
  border-left:3px solid transparent;
}
.admin-nav a:hover{color:var(--color-ivory); background:rgba(184,148,79,0.06);}
.admin-nav a.active{color:var(--color-gold-bright); border-left-color:var(--color-gold); background:rgba(184,148,79,0.08);}
.admin-nav .logout{margin-top:20px; border-top:1px solid var(--color-line); padding-top:20px;}

.admin-main{flex:1; padding:32px 40px; max-width:1100px;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.admin-topbar h1{font-size:1.8rem;}
.admin-topbar .user{font-family:var(--font-mono); font-size:0.8rem; color:var(--color-muted);}

/* ---- Cards / stats ---- */
.stat-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px;}
.stat-card{background:var(--color-bg-card); border:1px solid var(--color-line); padding:20px;}
.stat-card .num{font-family:var(--font-display); font-size:2.2rem; color:var(--color-gold-bright);}
.stat-card .label{font-size:0.8rem; color:var(--color-muted); letter-spacing:0.04em;}
@media (max-width:800px){ .stat-cards{grid-template-columns:1fr 1fr;} }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:11px 20px;
  border:1px solid var(--color-gold);
  background:transparent; color:var(--color-gold-bright);
  cursor:pointer; transition:background 0.2s ease, color 0.2s ease;
}
.btn:hover{background:var(--color-gold); color:#12160F;}
.btn-solid{background:var(--color-gold); color:#12160F;}
.btn-danger{border-color:var(--color-burgundy); color:#e08a8a;}
.btn-danger:hover{background:var(--color-burgundy); color:#fff;}
.btn-sm{padding:7px 14px; font-size:0.68rem;}

/* ---- Table ---- */
.admin-table{width:100%; border-collapse:collapse; background:var(--color-bg-card); border:1px solid var(--color-line);}
.admin-table th, .admin-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--color-line); font-size:0.9rem;}
.admin-table th{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-gold); background:rgba(184,148,79,0.05);}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table .actions{display:flex; gap:8px;}
.admin-table img.thumb{width:44px; height:44px; object-fit:cover; border:1px solid var(--color-line);}

/* ---- Forms ---- */
.admin-form{background:var(--color-bg-card); border:1px solid var(--color-line); padding:28px; max-width:640px;}
.admin-form .field{margin-bottom:18px;}
.admin-form label{display:block; font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-muted); margin-bottom:6px;}
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=password],
.admin-form textarea, .admin-form select{
  width:100%; background:var(--color-bg); border:1px solid var(--color-line); color:var(--color-ivory);
  padding:11px 14px; font-family:var(--font-body); font-size:0.95rem;
}
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus{outline:2px solid var(--color-gold); outline-offset:2px;}
.admin-form .checkbox-row{display:flex; align-items:center; gap:8px;}
.admin-form .checkbox-row input{width:auto;}
.admin-form .hint{font-size:0.78rem; color:var(--color-muted); margin-top:4px;}

.existing-images{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.existing-images .img-wrap{position:relative; width:90px;}
.existing-images img{width:90px; height:90px; object-fit:cover; border:1px solid var(--color-line);}
.existing-images label{display:flex; align-items:center; gap:4px; font-size:0.68rem; margin-top:4px; color:#e08a8a; text-transform:none;}

/* ---- Alerts ---- */
.alert{padding:14px 18px; margin-bottom:20px; font-size:0.9rem; border:1px solid;}
.alert-success{border-color:var(--color-gold); color:var(--color-gold-bright); background:rgba(184,148,79,0.08);}
.alert-error{border-color:var(--color-burgundy); color:#e08a8a; background:rgba(74,22,32,0.2);}

/* ---- Login / setup screens ---- */
.auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:100%; max-width:380px; background:var(--color-bg-card); border:1px solid var(--color-line); padding:36px;}
.auth-card h1{font-size:1.6rem; margin-bottom:6px; text-align:center;}
.auth-card .eyebrow{display:block; text-align:center; font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.15em; color:var(--color-gold); text-transform:uppercase; margin-bottom:20px;}
.auth-card .field{margin-bottom:16px;}
.auth-card label{display:block; font-size:0.75rem; color:var(--color-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;}
.auth-card input{width:100%; background:var(--color-bg); border:1px solid var(--color-line); color:var(--color-ivory); padding:12px 14px; font-family:var(--font-body);}
.auth-card input:focus{outline:2px solid var(--color-gold); outline-offset:2px;}
.auth-card .btn{width:100%; justify-content:center; margin-top:8px;}

@media (max-width:800px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{width:100%; padding:16px;}
  .admin-nav{display:flex; flex-wrap:wrap; gap:4px;}
  .admin-nav a{padding:8px 12px; border-left:none; border-bottom:2px solid transparent;}
  .admin-nav a.active{border-bottom-color:var(--color-gold); border-left-color:transparent;}
  .admin-main{padding:20px;}
}