:root {
  --bg:#0b1015; --card:#111827; --text:#e5e7eb; --muted:#9ca3af; --brand:#3b82f6;
  --ok:#22c55e; --err:#ef4444; --border:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:linear-gradient(180deg,#0b1015,#0a0f14 120%); color:var(--text);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(11,16,21,.9); backdrop-filter: blur(6px);
}
.topbar h1{margin:0; font-size:20px; letter-spacing:.2px}
.nav{display:flex; gap:10px; align-items:center}
.nav a{
  color:var(--text); text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid transparent;
}
.nav a:hover{background:#0c1524; border-color:var(--border)}
.nav a.active{background:#0c1524; border-color:var(--brand)}
main{max-width:900px; margin:30px auto; padding:0 16px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; margin:16px 0; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
h2{margin:.2rem 0 1rem}
.grid{display:grid; grid-template-columns:1fr 1fr;
   /* gap:16px */
  }
.grid.one-col{grid-template-columns:1fr}
.grid textarea{min-height:120px; resize:vertical}
label{display:block; font-size:.9rem; margin:.2rem 0 .35rem; color:var(--muted)}
input,textarea,select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0b1320; color:var(--text); outline:none;
}
select{cursor:pointer}
.btn{
  background:var(--brand); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; transition:.2s transform;
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#334155}
.btn.primary{background:var(--brand)}
.btn.small{font-size:.85rem; padding:6px 10px; border-radius:8px}
.row{display:flex; gap:8px; align-items:center}
.row.between{justify-content:space-between}
.page-list{list-style:none; padding:0; margin:8px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.page-item{display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--border); border-radius:10px; background:#0c1524}
.page-item input{width:auto}
.results{margin-top:12px}
.result{padding:10px; border-radius:10px; margin:6px 0; font-size:.95rem}
.result.ok{background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3)}
.result.err{background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3)}
.inline-error{margin-top:8px; color:#fecaca; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); padding:8px 10px; border-radius:8px}
.pill-list{list-style:none; padding:0; margin:8px 0; display:flex; flex-wrap:wrap; gap:8px}
.pill{
  display:flex; align-items:center; gap:8px; border:1px solid var(--border);
  background:#0b1320; color:var(--text); padding:8px 10px; border-radius:10px; width:100%;
}
.pill a{color:#93c5fd; text-decoration:none; word-break:break-all; padding:5px;}
.pill .x{
  background:#334155; border:none; color:#e5e7eb; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:bold;
}
.pill .x:hover{background:#475569}
.muted{color:var(--muted)}

/* Video section bits */
#videosSection { margin-top:20px; margin-bottom:20px; }
.video-flex{ display:flex; gap:20px; align-items:flex-start; }
.video-col{ flex:1 1 0; min-width:280px; }
.radio-row{margin-top:4px; margin-bottom:6px; color:var(--muted)}
.radio-row label input { width:auto !important; }
.video-pane{margin-bottom:8px;}
/* vertical divider visible on wide screens */
.divider-vert{
  width:1px; background:var(--border); align-self:stretch; position:relative; margin-top:8px;
}
.divider-vert span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--card); padding:2px 8px; font-size:.85rem; color:var(--muted);
}

/* Old horizontal divider (still used elsewhere) */
.divider{
  position:relative; margin:12px 0; height:1px; background:var(--border);
}
.divider span{
  position:absolute; left:50%; top:-11px; transform:translateX(-50%);
  background:var(--card); padding:0 8px; font-size:.85rem; color:var(--muted);
}

.foot{max-width:900px; margin:20px auto 40px; padding:0 16px; color:var(--muted)}

@media (max-width:800px){
  .grid{grid-template-columns:1fr}
  .page-list{grid-template-columns:1fr}
  .video-flex{flex-direction:column}
  .divider-vert{display:none}
}

/* Cards on Scheduled/History pages */
.card.post{
  display:grid; grid-template-columns: 1fr; gap:10px;
}
.meta-row{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border);
  background:#0b1320; color:var(--text); font-size:.8rem;
}
.badge.ok{border-color:rgba(34,197,94,.5); color:#86efac}
.badge.err{border-color:rgba(239,68,68,.5); color:#fecaca}
.media-row{display:flex; gap:10px; flex-wrap:wrap}
.media-row img, .media-row video{max-width:220px; border-radius:10px; border:1px solid var(--border)}


.credit-badge{
  margin:0 8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#0b1320;
  font-size:.85rem;
  color:var(--ok);
  display:none;
}
.credit-badge.zero{
  color:var(--err);
  border-color:rgba(239,68,68,.7);
}
.credit-badge.positive{
  color:var(--ok);
  border-color:rgba(34,197,94,.7);
}

/* Subscription info */
.topbar-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.subscription-info{
  font-size:.75rem;
  color:var(--muted);
}
.subscription-info.valid{
  color:var(--ok);
}
.subscription-info.invalid{
  color:var(--err);
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal.hidden{
  display:none;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.7);
}
.modal-content{
  position:relative;
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--border);
  padding:16px 20px;
  max-width:360px;
  width:90%;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
}
.row.right{
  justify-content:flex-end;
}

.badge.pending{
  border-color:rgba(234,179,8,.5);
  color:#fde68a;
}
.row.right{
  justify-content:flex-end;
}


.loader-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.loader-overlay.hidden{
  display:none;
}
.loader-spinner{
  width:48px;
  height:48px;
  border-radius:999px;
  border:4px solid rgba(148,163,184,.5);
  border-top-color:var(--brand);
  animation:spin .7s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg);}
}

/* ===== Admin pagination ===== */
.pagination-bar,
.pagination-bar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:4px 0 8px;
  font-size:.85rem;
  color:var(--muted);
  gap:8px;
  flex-wrap:wrap;
}

.pagination-controls{
  display:flex;
  gap:6px;
  align-items:center;
}

.pagination-btn{
  border-radius:999px;
  border:1px solid var(--border);
  background:#0b1320;
  color:var(--text);
  padding:4px 8px;
  font-size:.8rem;
  cursor:pointer;
}
.pagination-btn:disabled{
  opacity:.5;
  cursor:default;
}

.pagination-page-size{
  display:flex;
  align-items:center;
  gap:6px;
}
.pagination-page-size label{
  margin:0;
  font-size:.8rem;
}
.pagination-page-size input{
  width:60px;
  padding:4px 6px;
  font-size:.8rem;
}

/* ===== Bill image placeholder (Admin) ===== */
.bill-img-wrapper{
  position:relative;
  width:220px;
  max-width:100%;
  /* make it a square, so width === height */
  aspect-ratio: 1 / 1;
  border-radius:10px;
  border:1px solid var(--border);
  overflow:hidden;
}

/* image always fills the reserved square */
.bill-img-wrapper img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* While loading: hide real img, show shimmering placeholder */
.bill-img-wrapper.loading img{
  visibility:hidden;
}
.bill-img-wrapper.loading::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#1f2937 0%, #111827 50%, #1f2937 100%);
  background-size:200% 100%;
  animation:shimmer 1.2s infinite;
}

/* In case of error, show a simple "broken" placeholder tint */
.bill-img-wrapper.error::before{
  content:"!";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(239,68,68,.25);
  color:#fecaca;
  font-weight:bold;
  font-size:1.4rem;
}

/* Stop placeholder when loaded (no loading class) */
.bill-img-wrapper:not(.loading):not(.error)::before{
  content:none;
}

@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}