:root { --bg:#fff; --fg:#111; --muted:#666; --line:#e6e6e6; --accent:#111; --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.08); --container:1160px; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; min-height:100%; }
body { display:flex; flex-direction:column; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header { display:flex; gap:16px; align-items: flex-end; justify-content: space-between; padding:32px 20px; max-width: var(--container); margin: 0 auto; border-bottom:1px solid var(--line); background:var(--bg); z-index:10; }
.brand h1 { margin:0; font-size: clamp(20px, 3vw, 28px); font-weight:800; letter-spacing:-0.02em; }
.subtitle { margin:.25rem 0 0; color:var(--muted); font-size:14px; }
.header-actions { display:flex; gap:12px; align-items:center; }
.search-wrap { display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.search-wrap input { border:0; padding:10px 12px; width: min(56vw, 420px); outline: none; }
/* Force white background and black text for search input */
.search-wrap input {
  background: #fff !important;
  color: #000 !important;
  caret-color: #000;
}
.search-wrap input::placeholder { color: #000; }
.search-wrap button { border:0; background:transparent; padding:0 10px; height:100%; cursor:pointer; color:var(--muted); }
.ghost { background:#f6f6f6; border:1px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer; }
.ghost:hover { background:#efefef; }
.danger { color:#b00020; border-color:#ffd7db; }

.admin-panel { padding:20px; max-width: var(--container); margin: 0 auto; border-bottom:1px solid var(--line); display:grid; gap:16px; background:#f8f8f8; }
.admin-list { display:flex; flex-direction:column; gap:8px; }
.admin-list .row { display:flex; gap:8px; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:#fff; }
.admin-list .meta { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#fff; }
.card h3 { margin-top:0; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.grid .full { grid-column: 1 / -1; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; }
input, textarea, button { font: inherit; }
input[type="text"], input[type="url"], input[type="search"], input:not([type]), textarea, input[type="password"] {
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none; background:#fff;
}
textarea { resize: vertical; }
.file-field legend { font-size:12px; color:var(--muted); padding:0 4px; }
.note, .hint { color:var(--muted); font-size:12px; margin:6px 0 0; }
.actions { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
button { background:var(--fg); color:#fff; border:1px solid var(--fg); border-radius:10px; padding:10px 14px; cursor:pointer; transition: transform .06s ease; }
button:active { transform: translateY(1px); }

.tags-bar { display:flex; gap:8px; flex-wrap:wrap; padding:16px 20px; max-width: var(--container); margin: 0 auto; border-bottom:1px solid var(--line); }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:13px; cursor:pointer; background:#fff; transition: border-color .15s ease, box-shadow .15s ease; }
.chip.active { border-color:#000; box-shadow: inset 0 0 0 1px #000; }

.count-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  white-space: nowrap;
}

.pill-link {
  display:inline-flex; align-items:center; padding:8px 12px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  color:#000; font-weight:700; text-decoration:none;
}

.open-btn {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #fff; border-radius:10px;
  padding:8px 12px; background:#111; color:#fff; font-weight:700;
  text-decoration:none; width:fit-content;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  margin-top: auto; /* bottom-align within the card */
}
.open-btn:hover { opacity:.9; }

.grid-list { padding:28px 20px 80px; max-width: var(--container); margin: 0 auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
/* Ensure tiles stretch to the tallest in the row */
.grid-list .tile { height: 520px; }
.tile { border:1px solid var(--line); border-radius:16px; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: box-shadow .18s ease; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.thumb { display:block; flex:0 0 50%; height:50%; background:#f2f2f2; border-bottom:1px solid var(--line); }
.thumb img { width:100%; height:100%; object-fit: cover; display:block; }
.tile-body { 
  padding:12px; display:flex; flex-direction:column; gap:8px;
  flex: 0 0 50%; min-height:50%; overflow:hidden;
}
/* Normalize title spacing and height (single line) */
.title { margin:0; font-size:20px; font-weight:600; letter-spacing:-0.01em; line-height:1.3; min-height: calc(1em * 1.3); }
/* Clamp description to 4 lines with a fixed min-height so cards align */
.desc {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1em * 1.5 * 4); /* 4 lines */
}
/* Push the button to the bottom of the card body */
.open-btn { 
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #fff; border-radius:10px;
  padding:8px 12px; background:#111; color:#fff; font-weight:700;
  text-decoration:none; width:fit-content;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  margin-top: auto; /* bottom-align within the card */
}
.open-btn:hover { opacity:.9; }
/* Give tags a consistent minimum height to stabilize the bottom area */
.tags { display:flex; gap:6px; flex-wrap:wrap; min-height: 28px; }
/* Normalize tag appearance */
.tag { font-size:12px; color:#333; border:1px solid var(--line); border-radius:999px; padding:4px 8px; background:#fafafa; }

.site-footer { border-top:1px solid var(--line); padding:18px 20px; color:var(--muted); font-size:14px; }

.gear-btn {
  position: fixed;
  left: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  z-index: 20;
  opacity: .7;
}
.gear-btn svg { width: 22px; height: 22px; display: block; }
.gear-btn:hover { opacity: 1; }

.tile:hover { box-shadow: var(--shadow); }

@media (max-width: 720px) {
  .site-header { flex-direction: column; align-items: flex-start; padding: 20px; gap: 20px; }
  .header-actions { width: 100%; flex-direction: row-reverse; justify-content: space-between; }
  .search-wrap { flex: 1; }
  .search-wrap input { width: 100%; }
  
  .grid { grid-template-columns: 1fr; }
  .grid-list .tile { height: auto; min-height: 480px; }
  .thumb { flex-basis:200px; height:200px; }
  .tile-body { flex: 1 1 auto; min-height: 280px; }
  .yt-callout { margin: 8px 20px; }
}

main { flex:1 0 auto; }

.yt-callout {
  max-width: var(--container);
  margin: 8px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #000;
  font-weight: 700;
}

.video { margin-top: 4px; }
.video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; display:block; }

/* Bottom CTA row to align buttons side-by-side at the bottom */
.cta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

/* Watch button styled in dark YouTube red */
.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 8px 12px;
  background: #cc0000; /* YouTube red */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.watch-btn:hover { opacity: .9; }