:root{
  --bg: #38373B;
  --dark: #451F28;
  --accent: #E5C830;
  --white: #ffffff;
  --black: #000000;

  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --muted: rgba(255,255,255,0.70);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--white);
}

.wrap{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

header.wrap{ padding: 28px 0 10px; }
main.wrap{ padding: 10px 0 24px; }
footer.wrap{ padding: 18px 0 28px; }

.brandbar{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

h1{
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.2px;
}

.meta{
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  backdrop-filter: blur(6px);
}

.controls{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.control{
  min-width: 280px;
  flex: 1 1 420px;
}

label{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

input[type="search"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.22);
  color: var(--white);
  outline: none;
}

input[type="search"]:focus{
  border-color: rgba(229,200,48,0.7);
  box-shadow: 0 0 0 3px rgba(229,200,48,0.15);
}

.buttons{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

button{
  border: 1px solid rgba(229,200,48,0.55);
  background: rgba(229,200,48,0.12);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.2px;
}

button:hover{
  background: rgba(229,200,48,0.18);
}

button.secondary{
  border-color: var(--border);
  background: rgba(255,255,255,0.06);
}

button.secondary:hover{
  background: rgba(255,255,255,0.10);
}

.tableWrap{
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

table{
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

thead th{
  position: sticky;
  top: 0;
  background: rgba(69,31,40,0.72);
  color: var(--white);
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.2px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}

tbody td{
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}

tbody tr:hover td{
  background: rgba(255,255,255,0.04);
}

.muted{ color: var(--muted); }
.hidden{ display: none; }

.error{
  margin-top: 12px;
  border-color: rgba(255, 80, 80, 0.5);
  background: rgba(255, 80, 80, 0.08);
  color: rgba(255,255,255,0.92);
}

.imgCell{
  width: 160px;
}

.thumb{
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
}