*{box-sizing:border-box}
:root{--bg:#0f1109;--olive:#4c5a35;--olive2:#2a2e22;--cream:#e7e2d8;--paper:#ebe3d3;--brown:#3b2b1f;--orange:#c85a1c;--muted:#afa78f;--line:rgba(231,226,216,.13)}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cream);background:radial-gradient(circle at 35% 0,rgba(76,90,53,.22),transparent 35rem),linear-gradient(135deg,#080904,var(--bg));}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,textarea,select{font:inherit}
.login{min-height:100vh;display:grid;place-items:center;padding:22px}
.login-card{width:min(920px,100%);display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:rgba(231,226,216,.06);box-shadow:0 28px 90px rgba(0,0,0,.36)}
.login-preview{display:grid;place-items:center;background:radial-gradient(circle at center,rgba(76,90,53,.28),transparent 28rem);padding:35px}
.login-preview img{border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-form{padding:48px}.login-form p{letter-spacing:.22em;color:var(--orange);font-weight:900;font-size:12px}.login-form h1{font-family:"Playfair Display",serif;font-size:52px;margin:0 0 10px}.login-form span,.login-form small{display:block;color:var(--muted);line-height:1.6}
label{display:block;margin:12px 0;color:rgba(231,226,216,.82);font-weight:800;font-size:12px}
input,textarea,select{width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.24);color:var(--cream);outline:0}
textarea{min-height:74px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:0;border-radius:999px;padding:0 17px;font-weight:900;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,#dd6824,var(--orange));color:#fff}.btn.ghost{border:1px solid var(--line);background:rgba(231,226,216,.06);color:var(--cream)}
.alert{padding:12px 14px;border-radius:14px;margin:14px 0;font-weight:800}.alert.success{background:rgba(76,90,53,.25);border:1px solid rgba(133,160,91,.3)}.alert.error{background:rgba(200,90,28,.18);border:1px solid rgba(200,90,28,.35)}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;padding:28px 22px;border-right:1px solid var(--line);background:rgba(7,8,4,.72);backdrop-filter:blur(20px);overflow:auto}
.brand strong{display:block;font-family:"Playfair Display",serif;font-size:30px}.brand span{display:block;margin-top:7px;letter-spacing:.28em;font-size:10px;color:var(--muted)}
.sidebar nav{display:grid;gap:8px;margin-top:34px}.sidebar nav a{padding:13px 15px;border-radius:13px;color:rgba(231,226,216,.74);font-size:14px;font-weight:800}.sidebar nav a.active,.sidebar nav a:hover{background:linear-gradient(135deg,rgba(76,90,53,.75),rgba(76,90,53,.34));color:#fff}
.side-art{margin:36px -10px 20px;opacity:.95}.side-art img{border-radius:18px}
.help{padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(231,226,216,.055)}.help b{display:block;margin-bottom:8px}.help span{display:block;font-size:12px;line-height:1.55;color:var(--muted)}.help a{display:inline-flex;margin-top:14px;padding:10px 14px;border-radius:10px;background:rgba(231,226,216,.08);font-size:12px;font-weight:900}
.main{margin-left:245px;padding:28px;max-width:1600px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:20px}.topbar h1{font-family:"Playfair Display",serif;font-size:32px;letter-spacing:-.04em;margin:0 0 3px}.topbar p{margin:0;color:var(--muted)}.search{display:flex;gap:12px}.search input{width:320px;margin:0}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:16px}.stats article{padding:19px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(231,226,216,.085),rgba(231,226,216,.04));box-shadow:0 18px 48px rgba(0,0,0,.2)}.stats span{font-size:12px;color:var(--muted);font-weight:800}.stats b{display:block;font-family:"Playfair Display",serif;font-size:36px;margin:8px 0}.stats small{color:#99b66b;font-size:12px}
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:16px}.panel{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(231,226,216,.085),rgba(231,226,216,.038));box-shadow:0 18px 48px rgba(0,0,0,.19);padding:18px}.panel h2{font-family:"Playfair Display",serif;font-size:24px;letter-spacing:-.03em;margin:0 0 14px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.editor{grid-column:span 2}.editor-grid{display:grid;grid-template-columns:300px 1fr;gap:18px}.live-preview{position:relative;min-height:315px;overflow:hidden;border-radius:12px;background:#12150b;padding:32px}.live-preview p{font-family:Caveat,cursive;color:var(--orange);font-size:24px;margin:0 0 8px}.live-preview h3{position:relative;z-index:2;font-family:"Playfair Display",serif;font-size:48px;line-height:.95;letter-spacing:-.05em;margin:0 0 12px}.live-preview h3 span{color:var(--olive)}.live-preview small{position:relative;z-index:2;display:block;max-width:310px;color:rgba(231,226,216,.72);line-height:1.5}.live-preview img{position:absolute;right:0;bottom:0;width:58%;max-width:520px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.colors{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.colors input{height:42px;padding:3px}.settings iframe{width:100%;height:180px;border:0;border-radius:12px;filter:grayscale(.25) sepia(.15) brightness(.82)}
.wide{margin-bottom:16px}.table-wrap{overflow:auto;margin-bottom:14px}table{width:100%;min-width:900px;border-collapse:collapse}.compact-table{min-width:100% !important}.compact-table th,.compact-table td{padding:8px;vertical-align:middle}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}td input,td textarea,td select{margin:0}.thumb{width:58px;height:58px;object-fit:cover;border-radius:10px;margin-bottom:7px}.danger{border:1px solid rgba(255,111,83,.35);background:rgba(255,111,83,.08);color:#ff8d70;border-radius:10px;padding:9px 12px;font-weight:900;cursor:pointer}.hide{display:none}
.add-box{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.add-box h3{margin:0 0 12px}
.upload{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:15px;border:1px dashed rgba(231,226,216,.24);border-radius:14px;margin-bottom:16px}.upload small{grid-column:1/-1;color:var(--muted)}
.gallery-admin{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}.gallery-admin article{padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.15)}.gallery-admin img{height:140px;width:100%;object-fit:cover;border-radius:10px;margin-bottom:8px}
.admin-footer{text-align:center;color:var(--muted);padding:18px}

/* Help description below labels */
.help-desc {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
}

/* Mobile top bar and drawer styles */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 190;
  align-items: center;
  padding: 0 20px;
  background: rgba(8, 9, 4, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.mobile-header strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  color: var(--cream);
}
.admin-menu-btn {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 24px;
  cursor: pointer;
  margin-right: 16px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar transition */
.sidebar {
  transition: transform 0.3s ease-in-out;
}

@media(max-width:1024px){
  .mobile-header {
    display: flex;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    width: 280px;
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main {
    margin-left: 0;
    padding-top: 80px; /* Space for mobile top bar */
  }
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid, .editor-grid {
    grid-template-columns: 1fr;
  }
  .editor {
    grid-column: span 1;
  }
  .gallery-admin {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Table reflow to card layout on mobile screens */
  .table-wrap {
    overflow: visible;
  }
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead {
    display: none; /* Hide header rows */
  }
  tr {
    margin-bottom: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.01);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
  td {
    border-bottom: none;
    padding: 8px 0 8px 35%;
    position: relative;
    text-align: left;
    min-height: 42px;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 18px;
    width: 30%;
    font-weight: 800;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  td[data-label="Gambar Menu"]::before {
    top: 30px;
  }
  td input, td textarea, td select {
    width: 100%;
    margin-top: 0;
  }
  td textarea {
    min-height: 60px;
  }
  td[data-label="Unggulan"] {
    display: flex;
    align-items: center;
  }
  td[data-label="Unggulan"] input {
    width: auto;
    margin: 0;
  }
  .thumb {
    width: 70px;
    height: 70px;
  }
}

@media(max-width:480px){
  .login-card {
    grid-template-columns: 1fr;
  }
  .login-form {
    padding: 24px;
  }
  .topbar, .search {
    flex-direction: column;
    align-items: stretch;
  }
  .search input {
    width: 100%;
  }
  .main {
    padding: 16px;
  }
  .stats, .two, .colors, .gallery-admin, .upload {
    grid-template-columns: 1fr;
  }
  td {
    padding-left: 0;
  }
  td::before {
    position: static;
    display: block;
    width: 100%;
    margin-bottom: 4px;
  }
}