:root {
  --bg:#0c1624; --fg:#111; --muted:#555; --line:rgba(148,163,184,.18);
  --accent:#00c2ff; --accent-2:#2bd9ff; --radius:14px; --container:1160px;
  --shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
html,body { background: #f0f0f0; color: var(--fg); }
a { color: var(--accent); }
.site-header { background: #f0f0f0; border-color: var(--line); }
.admin-panel,
.tags-bar,
.grid-list,
.site-footer { background: transparent; border-color: var(--line); }
.brand h1 { color: #000; }
.subtitle { color: #000; }

.search-wrap { background: #fff; border-color: var(--line); backdrop-filter: none; }
.search-wrap input { color: #000; background: #fff; }
.search-wrap button { color: var(--muted); }
/* Prevent generic input styling from overriding the search box */
.site-header .search-wrap input {
  background: #fff !important;
  color: #000 !important;
  caret-color: #000;
}
.site-header .search-wrap input::placeholder { color: #000; }

.card,
.tile { background: rgba(17,26,40,.6); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.tile:hover { box-shadow: 0 24px 80px rgba(0,194,255,.15), var(--shadow); }
.thumb { background: rgba(255,255,255,.03); border-color: var(--line); }
.title { color: #fff; }
.desc { color: rgba(255,255,255,.9); }

button { background: linear-gradient(180deg, #0f1f34 0%, #0c1624 100%); border:1px solid rgba(0,194,255,.35); color:#e8f1f8; box-shadow: 0 8px 24px rgba(0,194,255,.12); transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease; }
button:hover { box-shadow: 0 12px 36px rgba(0,194,255,.18); border-color: rgba(0,194,255,.6); }

.ghost { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--fg); }
.danger { color: #ff6b7a; border-color: rgba(255,107,122,.25); }

.chip,
.tag { background: rgba(255,255,255,.06); color: #fff; }
.chip { background: rgba(255,255,255,.06); color: #000; }
.tag { background: rgba(255,255,255,.06); color: #fff; }
.chip.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 18px rgba(0,194,255,.18); }

.gear-btn { background: rgba(17,26,40,.7); color: var(--muted); border-color: var(--line); box-shadow: var(--shadow); }
.site-footer { color: var(--muted); }

input[type="text"], input[type="url"], input[type="search"], input:not([type]), textarea, input[type="password"] {
  background: rgba(255,255,255,.05); color: #fff; border-color: var(--line);
}

.admin-list .row { background: rgba(17,26,40,.6); border-color: var(--line); color: #fff; }

@media (max-width: 720px) {
  .grid-list { padding-bottom: 100px; }
}