:root{
  --bg:#0d1b2a; --bg2:#1b263b; --accent:#ff6a00; --text:#e0e6ee; --muted:#000000; --card:#10243d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.header .left{display:flex;align-items:center;gap:10px}
.logo{height:48px}
.admin-link a{background:var(--accent);color:#081018;padding:8px 12px;border-radius:10px;font-weight:700}
.hero{background:var(--bg2);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);margin:12px 0}
.hero img{width:100%;display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:18px 0}
.card{background:var(--card);padding:14px;border-radius:16px;border:1px solid #173353;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card h3{margin:0 0 8px 0;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.controls{display:flex;gap:10px;align-items:center;margin-top:8px}
.btn{display:inline-block;padding:8px 12px;border-radius:10px;background:var(--bg2);border:1px solid #28476d}
.btn:hover{filter:brightness(1.1)}
.footer{margin:28px 0 12px 0;color:var(--muted);text-align:center}
.contact{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:8px}
.contact .item{display:flex;gap:6px;align-items:center;color:var(--text)}
.icon{width:18px;height:18px}
.table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #173353;text-align:left}
.table th{background:var(--bg2)}
form.inline{display:flex;gap:8px;align-items:center}
input,select,textarea{background:#0b2038;color:var(--text);border:1px solid #173353;border-radius:8px;padding:8px;width:100%}
input[type=file]{padding:10px;background:#0b2038}
label{display:block;margin:10px 0 6px 0}
.button{background:var(--accent);color:#0a1322;border:none;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.button.secondary{background:#0b2038;color:var(--text);border:1px solid #28476d}
.actions{display:flex;gap:8px}
.notice{padding:10px 12px;background:#09223f;border:1px solid #1f3c61;border-radius:10px;margin:10px 0}
.small{font-size:12px;color:var(--muted)}
.login-wrap{max-width:420px;margin:48px auto;padding:20px;background:var(--card);border:1px solid #173353;border-radius:16px}
.login-wrap h1{margin-top:0}
.social-bar {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 20px;
}

.social-bar a svg {
  width: 18px;
  height: 18px;
  transition: color 0.3s, transform 0.3s;
}

/* Colors */
.icon-facebook svg { color: #412f1f; }
.icon-youtube svg { color: #412f1f; }
.icon-whatsapp svg { color: #412f1f; }
.icon-telegram svg { color: #412f1f; }
.icon-discord svg { color: #412f1f; }

/* Hover Effects */
.social-bar a:hover svg {
  transform: scale(1.15);
  opacity: 0.9;
}

/* ✅ Gospel wallpaper background */
body{
  background: url("../assets/gospel_wallpaper.jpg") center center / cover no-repeat fixed !important;
  position: relative;
}

/* Dark overlay so text stays readable */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.58);
  z-index: -1;
}

/* Make sure your content stays above the overlay */
.container{
  position: relative;
  z-index: 1;
}