/* ============================================================
   BinAref — shared UI: background-free project media, the video
   cover + in-browser BinAref Player lightbox, and the admin badge.
   Loaded on every page AFTER the page's own stylesheet so these win.
   ============================================================ */

/* ---- project media shown as-is, no frame / no background ---- */
.proj-thumb, .p-avatar, .p-banner, .more-thumb {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
}
.proj-thumb img, .p-avatar img, .p-banner img, .more-thumb img {
  object-fit: contain;
}
/* keep the monogram placeholders styled (they still need a surface) */
.proj-thumb.mono, .p-avatar.mono, .more-thumb.mono {
  background: linear-gradient(155deg, rgba(159,214,245,.16), rgba(255,122,47,.12)) !important;
}

/* ---- video cover: big image doubles as a play button ---- */
.p-banner.has-video { cursor: pointer; }
.p-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,20,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 40px -8px rgba(0,0,0,.6), 0 0 32px -6px rgba(255,90,40,.5);
  color: #fff; transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
.p-play svg { width: 34px; height: 34px; margin-left: 4px; }
.p-banner.has-video:hover .p-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,90,40,.35); }

/* ---- BinAref Player lightbox ---- */
.bap {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
  padding: max(18px, env(safe-area-inset-top)) 18px;
}
.bap.bap-open { opacity: 1; pointer-events: auto; }
.bap-back { position: absolute; inset: 0; background: rgba(4,6,12,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bap-shell {
  position: relative; width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(18,20,30,.92), rgba(10,11,18,.94));
  border: 1px solid rgba(159,214,245,.16);
  box-shadow: 0 50px 130px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(255,90,40,.25);
  transform: translateY(12px) scale(.98); transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.bap-open .bap-shell { transform: none; }
.bap-shell:fullscreen { width: 100vw; max-height: 100vh; border-radius: 0; border: none; }

.bap-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.bap-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: #cfe6f6; }
.bap-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff7a2f; box-shadow: 0 0 10px 1px rgba(255,122,47,.8); }
.bap-title { flex: 1; min-width: 0; color: #9fb2c4; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bap-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #dbe7f1; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.bap-x:hover { background: rgba(255,90,40,.18); border-color: rgba(255,122,47,.5); }

.bap-stage { position: relative; background: #05060a; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bap-video { width: 100%; max-height: 74vh; display: block; background: #05060a; }
.bap-shell:fullscreen .bap-video { max-height: none; height: 100%; }
.bap-big {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: #fff; transition: opacity .2s ease;
}
.bap-big svg { width: 74px; height: 74px; padding: 20px; border-radius: 50%; background: rgba(10,12,20,.5); border: 1.5px solid rgba(255,255,255,.5); box-shadow: 0 0 40px -6px rgba(255,90,40,.5); }
.bap-playing .bap-big { opacity: 0; pointer-events: none; }

.bap-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(8,9,15,.7); border-top: 1px solid rgba(255,255,255,.06); }
.bap-idle .bap-bar { opacity: 0; transition: opacity .5s ease; }
.bap-bar button { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #dbe7f1; cursor: pointer; border-radius: 8px; transition: color .2s, background .2s; }
.bap-bar button:hover { color: #fff; background: rgba(255,255,255,.07); }
.bap-bar svg { width: 20px; height: 20px; }
.bap-play .i-pause, .bap-playing .bap-play .i-play { display: none; }
.bap-playing .bap-play .i-pause { display: block; }
.bap-mute .i-mute, .bap-muted .bap-mute .i-vol { display: none; }
.bap-muted .bap-mute .i-mute { display: block; }
.bap-time { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; color: #9fb2c4; flex: none; min-width: 38px; text-align: center; }
.bap-seek { position: relative; flex: 1; height: 20px; display: flex; align-items: center; }
.bap-buff { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; width: 0; background: rgba(255,255,255,.16); border-radius: 3px; pointer-events: none; }
.bap-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #ff7a2f, #ffb04a); background-size: var(--p,0%) 100%; background-repeat: no-repeat; box-shadow: none; outline: none; }
.bap-range { background-color: rgba(255,255,255,.14); }
.bap-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,122,47,.9); cursor: pointer; }
.bap-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(255,122,47,.9); cursor: pointer; }

/* ---- admin badge + toast (Ctrl+Space) ---- */
.admin-badge {
  position: fixed; left: 14px; bottom: 14px; z-index: 3000; display: none;
  align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; color: #d7ffe6;
  background: rgba(10,20,14,.72); border: 1px solid rgba(80,220,140,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7), 0 0 20px -6px rgba(80,220,140,.5);
}
.admin-badge.on { display: inline-flex; }
.admin-dot { width: 8px; height: 8px; border-radius: 50%; background: #46e08a; box-shadow: 0 0 10px 1px rgba(70,224,138,.9); }
.admin-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 3200;
  padding: 10px 18px; border-radius: 12px; opacity: 0; transition: opacity .3s ease, transform .3s ease;
  font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .05em; color: #eaf3fb;
  background: rgba(14,16,26,.92); border: 1px solid rgba(159,214,245,.22);
  box-shadow: 0 20px 50px -18px rgba(0,0,0,.75);
}
.admin-toast.show { opacity: 1; transform: translate(-50%, 0); }

[dir="rtl"] .admin-badge { left: auto; right: 14px; }
@media (max-width: 640px) { .p-play { width: 62px; height: 62px; } .p-play svg { width: 26px; height: 26px; } .bap-title { display: none; } }

/* ---- admin badge buttons + login modal ---- */
.admin-badge .admin-imp, .admin-badge .admin-out {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(80,220,140,.35);
  background: rgba(80,220,140,.1); color: #d7ffe6; cursor: pointer; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.admin-badge .admin-imp { display: none; }
.admin-badge.sb .admin-imp { display: inline-flex; }
.admin-badge .admin-imp:hover, .admin-badge .admin-out:hover { background: rgba(80,220,140,.28); }

.admin-modal { position: fixed; inset: 0; z-index: 4200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.admin-modal.open { opacity: 1; pointer-events: auto; }
.admin-back { position: absolute; inset: 0; background: rgba(4,6,12,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.admin-card {
  position: relative; width: min(360px, 92vw); display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,20,30,.96), rgba(10,11,18,.97));
  border: 1px solid rgba(159,214,245,.18); box-shadow: 0 50px 120px -30px rgba(0,0,0,.8);
  transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.admin-modal.open .admin-card { transform: none; }
.admin-title { font: 700 17px/1.2 "Space Grotesk", system-ui, sans-serif; color: #eaf3fb; margin-bottom: 4px; text-align: center; }
.admin-in {
  width: 100%; padding: 12px 14px; border-radius: 11px; font-size: 15px; color: #eaf3fb;
  background: rgba(255,255,255,.05); border: 1px solid rgba(159,214,245,.18); outline: none;
  transition: border-color .2s, background .2s;
}
.admin-in:focus { border-color: var(--ice, #9fd6f5); background: rgba(255,255,255,.08); }
.admin-in::placeholder { color: #8aa0b4; }
.admin-err { color: #ff8a6a; font-size: 12.5px; min-height: 1em; text-align: center; }
.admin-go {
  width: 100%; padding: 12px; border-radius: 11px; border: 0; cursor: pointer;
  font: 700 15px/1 "Space Grotesk", system-ui, sans-serif; color: #06120b;
  background: linear-gradient(135deg, #8ce6a0, #7bd88f 55%, #56c08a);
  transition: filter .2s, transform .15s;
}
.admin-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.admin-go:disabled { opacity: .6; cursor: default; }