/* Knoxlink High-End UI layer (non-destructive) */
:root{
  --knox-surface: #ffffff;
  --knox-surface-2: #f6f7fb;
  --knox-text: #0f172a;
  --knox-muted: #64748b;
  --knox-border: rgba(15,23,42,.10);
  --knox-shadow: 0 10px 30px rgba(2,6,23,.08);
  --knox-radius: 18px;
  --knox-radius-sm: 12px;
  --knox-focus: 0 0 0 3px rgba(59,130,246,.25);
}
body.knox-dark{
  --knox-surface: #0b1220;
  --knox-surface-2: #0f1b33;
  --knox-text: #e5e7eb;
  --knox-muted: #9aa4b2;
  --knox-border: rgba(226,232,240,.10);
  --knox-shadow: 0 14px 38px rgba(0,0,0,.35);
}
/* Background is handled by themes.css (starry premium bg). */
body.knox-dark{ background: transparent; color: var(--knox-text); }

.knox-icon-btn{
  margin-left: 12px;
  border: 1px solid var(--knox-border);
  background: var(--knox-surface);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items:center;
  justify-content:flex-end;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(2,6,23,.05);
}
.knox-icon-btn:focus{ outline: none; box-shadow: var(--knox-focus); }

.knox-card{
  background: var(--knox-surface);
  border: 1px solid var(--knox-border);
  border-radius: var(--knox-radius);
  box-shadow: var(--knox-shadow);
}
.knox-card .knox-card-hd{ padding: 18px 18px 0 18px; }
.knox-card .knox-card-bd{ padding: 18px; }

.knox-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--knox-border);
  background: var(--knox-surface-2);
  color: var(--knox-text);
  font-size: 12px;
  font-weight: 600;
}
.knox-badge--hot{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }
.knox-badge--ok{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); }

.knox-skeleton{
  position: relative;
  overflow: hidden;
  background: var(--knox-surface-2);
  border-radius: var(--knox-radius-sm);
}
.knox-skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: knoxShimmer 1.15s infinite;
}
body.knox-dark .knox-skeleton::after{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
@keyframes knoxShimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

/* Creator sticky CTA */
.knox-sticky-cta{
  position: sticky;
  top: 14px;
  border-radius: var(--knox-radius);
  border:1px solid var(--knox-border);
  background: var(--knox-surface);
  box-shadow: var(--knox-shadow);
  padding: 14px;
}
.knox-sticky-cta .knox-cta-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: space-between;
}
.knox-sticky-cta .knox-cta-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}
.knox-progress{
  height: 10px;
  border-radius: 999px;
  background: var(--knox-surface-2);
  overflow: hidden;
  border: 1px solid var(--knox-border);
}
.knox-progress > span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(34,197,94,.85));
}
.knox-milestones{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.knox-milestones .knox-badge{ font-weight:700; }

/* Mobile floating bar */
.knox-floatbar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2000;
  display:none;
}
.knox-floatbar .inner{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: space-between;
  padding: 12px;
}
@media (max-width: 860px){
  .knox-floatbar{ display:block; }
  .knox-hide-mobile{ display:none !important; }
}

.knox-supporter-row{
  padding: 10px 0;
  border-top: 1px solid var(--knox-border);
}
.knox-supporter-row:first-child{ border-top: none; }
.muted{ color: var(--knox-muted); }


/* Knoxlink creator dashboard action alignment fix */
.post-actions,
.content-actions,
.library-actions,
.creator-post-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: right !important;
    min-width: 140px !important;
}

.post-actions a,
.content-actions a,
.library-actions a,
.creator-post-actions a {
    display: block !important;
    width: 120px !important;
    text-align: right !important;
}

/* Remove unnecessary badges */
.post-badge,
.content-badge,
.status-badge {
    display: none !important;
}