:root{
  --bg: #0b0f14;
  --card: #0f1720;
  --muted: #9ca3af;
  --accent: #06b6d4;
  --primary: #1a5490;
  --secondary: #2d6ba8;
  --gap: 16px;
  --max-width: 1200px;
  --font-sans: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Inter", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.45;
  margin:0;
  background:var(--bg);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Footer anchored to bottom */
:root{--footer-height:48px}
body{padding-bottom:var(--footer-height)}

.site-footer{position:fixed;left:0;right:0;bottom:0;height:var(--footer-height);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(2,6,10,0.0), rgba(0,0,0,0.28));color:var(--muted);z-index:60;pointer-events:auto}
.site-footer .footer-inner{background:rgba(255,255,255,0.03);padding:6px 12px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:8px}
.site-footer .heart{color:#ff5577;font-weight:700;display:inline-block;transform-origin:center;animation:beat 1s infinite}
@keyframes beat{0%{transform:scale(1)}25%{transform:scale(1.18)}40%{transform:scale(0.95)}60%{transform:scale(1.08)}100%{transform:scale(1)}}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 6px 18px rgba(2,6,10,0.45);
}
.site-header h1{margin:0;font-size:1.1rem}
.header-content{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo-section{display:flex;align-items:center;gap:1rem}
.header-text .site-title{font-size:1.35rem;margin:0;font-weight:700}
.header-text .site-subtitle{margin:0;font-size:0.95rem;opacity:0.92}
.stats-bar{display:flex;gap:.5rem;align-items:center}
.stat-item{font-weight:600}
.stat-divider{opacity:0.6}

/* Search/filter card */
.search-filter-section{
  max-width:var(--max-width);
  margin:var(--gap) auto;
  padding:16px 20px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.06));
  box-shadow:0 10px 28px rgba(2,6,10,0.55);
  display:flex;
  flex-direction:column;
  gap:10px;
  position: relative;
}

/* Top row: search + actions */
.search-bar-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.search-bar-container{flex:1;min-width:220px}
.search-input{
  width:100%;
  padding:.6rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);
  background:rgba(255,255,255,0.03);
  color:inherit;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.results-info{
  color:var(--muted);
  font-size:0.9rem;
}

/* Buttons on the right */
.settings-btn,
.admin-btn{
  padding:0.4rem 0.8rem;
  border-radius:999px;
  border:1px solid rgba(148, 163, 184, 0.55);
  background:radial-gradient(circle at top left,
              rgba(15,23,42,0.98),
              rgba(15,23,42,0.95));
  color:inherit;
  font-size:0.85rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
}
.settings-btn:hover,
.admin-btn:hover{
  border-color:rgba(148,163,184,0.9);
  background:radial-gradient(circle at top left,
              rgba(31,41,55,0.98),
              rgba(15,23,42,0.96));
}

/* Settings / filter level UI (panel) */
.settings-panel {
  position: absolute;
  right: 20px;
  top: 52px; /* just under the Settings/Admin row */
  width: 380px;
  max-width: calc(100% - 40px);

  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);

  display: none;               /* hidden by default */
  flex-direction: column;
  gap: 10px;
  z-index: 40;                 /* above the card, below viewer */
}

.settings-panel.open {
  display: flex;
}


.settings-row {
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}

.settings-section-title {
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  flex:0 0 64px;
  padding-top:3px;
}

.settings-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  min-width: 160px;
}

.settings-label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* reuse toggle look but inside settings */
.toggle{
  display:flex;
  align-items:center;
  gap:6px;
}
.settings-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
}

.settings-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* generic inputs in settings */
.settings-panel select,
.settings-panel input[type="text"]{
  padding:.35rem .5rem;
  border-radius:6px;
  background:#0b1220;
  color:inherit;
  border:1px solid rgba(255,255,255,0.06);
}

/* old .controls is no longer used for layout but we keep it safe */
.controls{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}

/* Pager */
.pager{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.pager button{
  padding:.4rem .6rem;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.04);
  background:#081216;
  color:inherit;
}

/* Grid + cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:calc(var(--gap) + 6px);
  padding:18px;
}
.card{
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  display:block;
  height:280px;
  position:relative;
  transition:transform .14s ease, box-shadow .14s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(2,6,10,0.65);
}
.card .media-wrapper{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.24));
}
.card .media-wrapper img,
.card .media-wrapper video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card .media-wrapper{z-index:1}
.badge{
  position:absolute;
  left:8px;
  top:8px;
  background:rgba(2,8,12,0.6);
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
  color:var(--muted);
  backdrop-filter: blur(4px);
  z-index:5;
}

/* gradient overlay + tags + caption */
.card::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  border-radius:12px;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(to bottom,
    rgba(2,6,10,0.18) 0%,
    rgba(2,6,10,0.35) 40%,
    rgba(2,6,10,0.7) 65%,
    rgba(2,6,10,0.9) 80%,
    rgba(2,6,10,0.98) 100%);
}
.card .tags{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:42%;
  overflow:auto;
  padding:6px;
  z-index:5;
}
.card .tags .tag{
  background:rgba(6,35,40,0.95);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.card .caption{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:66px;
  color:#e6eef6;
  background:rgba(6,182,212,0.12);
  border:1px solid rgba(6,182,212,0.2);
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:6;
  max-width:85%;
  text-align:center;
  box-shadow:0 6px 18px rgba(2,6,10,0.35);
  color:var(--accent);
}
.card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
  pointer-events:none;
  z-index:2;
}

/* Viewer */
.viewer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:10000;
}
.viewer.hidden{display:none}
.viewer-inner{
  max-width:1100px;
  width:100%;
  max-height:92vh;
  background:var(--card);
  padding:16px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  position:relative;
}
.viewer-title{
  background:rgba(6,35,40,0.95);
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  display:inline-block;
  font-weight:600;
  margin-bottom:6px;
  box-shadow:0 6px 18px rgba(2,6,10,0.45);
}
#mediaWrap{
  width:min(1100px,90vw);
  aspect-ratio:16 / 9;
  max-height:72vh;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  overflow:hidden;
}
.viewer-inner img,
.viewer-inner video{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:6px;
  display:block;
  margin:0 auto;
  background:#000;
}
.close{
  position:absolute;
  right:18px;
  top:18px;
  background:transparent;
  border:0;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.meta{
  display:flex;
  gap:8px;
  align-items:center;
}
.meta input{
  flex:1;
  padding:.6rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:#071018;
  color:inherit;
}
.meta button{
  padding:.5rem 0.8rem;
  border-radius:6px;
  background:var(--accent);
  border:0;
  color:#042b2f;
  cursor:pointer;
}

/* focus styles */
button:focus,
.admin-btn:focus,
.search-input:focus,
.settings-btn:focus,
.settings-panel select:focus{
  outline:3px solid rgba(6,182,212,0.12);
  outline-offset:2px;
}

/* Responsive tweaks */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card{height:180px}
  .viewer-inner{padding:12px}
}
@media (max-width:640px){
  .search-bar-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .top-actions{
    width:100%;
    justify-content:space-between;
  }
  .results-info{
    order:1;
  }
}
@media (max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .viewer-inner{padding:8px}
  .header-content{padding:0 8px}
  .site-header{padding:12px 10px}
  .header-text .site-title{font-size:1.05rem}
}

/* Content Warning Modal */
.cw-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.98));
  backdrop-filter: blur(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cw-backdrop.cw-hidden {
  opacity: 0;
  visibility: hidden;
}

.cw-modal {
  width: 100%;
  max-width: 460px;
  background: rgba(15, 23, 42, 1);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  padding: 20px 22px 18px;
}

.cw-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
}

.cw-text {
  margin: 4px 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.cw-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.cw-checkbox-row input[type="checkbox"] {
  accent-color: #5eead4;
}

.cw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.8);
  background: radial-gradient(circle at top left,
    rgba(94, 234, 212, 0.18),
    rgba(15, 23, 42, 0.98));
  color: #e5e7eb;
  padding: 8px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.05s ease;
}

.cw-button:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.9);
  background: radial-gradient(circle at top left,
    rgba(94, 234, 212, 0.22),
    rgba(15, 23, 42, 0.98));
}