#bdastra-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

#bdastra-photos-button {
  appearance: none;
  border: 0;
  border-radius: 7px;
  padding: 10px 14px;
  background: #222;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

#bdastra-photos-button.is-active {
  background: #075f83;
  outline: 3px solid rgba(255, 255, 255, 0.75);
}

#bdastra-photos-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 390px;
  max-width: calc(100vw - 24px);
  height: 100vh;
  z-index: 2147483642;
  box-sizing: border-box;
  padding: 20px;
  background: #f6f7f8;
  color: #171717;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: -8px 0 26px rgba(0, 0, 0, 0.28);
  transform: translateX(105%);
  transition: transform 180ms ease;
  overflow-y: auto;
}

#bdastra-photos-panel.is-open { transform: translateX(0); }

.bdastra-photos-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.bdastra-photos-header h2 { margin: 0; }
.bdastra-photos-header p { margin: 4px 0 0; color: #666; font-size: 13px; }
.bdastra-photos-header-actions { display: flex; align-items: center; gap: 4px; }

#bdastra-photos-close,
#bdastra-photos-refresh {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #222;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

#bdastra-photos-refresh { font-size: 23px; }
#bdastra-photos-close:hover,
#bdastra-photos-refresh:hover { background: #e4e7e9; }
#bdastra-photos-refresh.is-loading { animation: bdastra-spin .8s linear infinite; }
@keyframes bdastra-spin { to { transform: rotate(360deg); } }

.bdastra-photos-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 10px;
  padding: 0 11px;
  border: 1px solid #cfd4d8;
  border-radius: 8px;
  background: #fff;
}

.bdastra-photos-search span { color: #6b7378; font-size: 22px; }
.bdastra-photos-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 14px "Segoe UI", Arial, sans-serif;
}

.bdastra-photos-status {
  margin: 0 0 14px;
  color: #687178;
  font-size: 12px;
  line-height: 1.4;
}
.bdastra-photos-status.is-error { color: #b42318; }

#bdastra-photos-empty {
  padding: 28px 14px;
  text-align: center;
  color: #777;
  border: 1px dashed #b9c0c5;
  border-radius: 8px;
  background: #fff;
  line-height: 1.5;
}

#bdastra-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
  gap: 8px;
}

.bdastra-photo-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d4d7da;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.bdastra-photo-card:hover {
  border-color: #075f83;
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0,0,0,.13);
}
.bdastra-photo-card img { display: block; width: 100%; height: 96px; object-fit: cover; background: #e7e7e7; }
.bdastra-photo-card-info { display: block; padding: 6px; }
.bdastra-photo-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bdastra-photo-card small { display: block; min-height: 15px; margin-top: 3px; color: #777; }

#bdastra-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  background: rgba(0, 0, 0, .94);
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
}
#bdastra-photo-viewer.is-open { display: block; }

.bdastra-photo-viewer-toolbar {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  padding: 10px 16px;
  background: rgba(0,0,0,.72);
}

#bdastra-photo-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdastra-photo-viewer-toolbar > div { display: flex; gap: 6px; }
.bdastra-photo-viewer-toolbar button,
.bdastra-photo-nav {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}
.bdastra-photo-viewer-toolbar button { min-width: 38px; height: 38px; font-size: 17px; }
#bdastra-photo-reset { min-width: 68px; font-size: 13px; }
#bdastra-photo-close { font-size: 25px; }

#bdastra-photo-stage {
  position: absolute;
  inset: 58px 58px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
#bdastra-photo-stage.is-dragging { cursor: grabbing; }
#bdastra-photo-large {
  display: block;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  transform-origin: center center;
  transition: transform 50ms linear;
}

.bdastra-photo-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 46px;
  height: 70px;
  margin-top: -35px;
  font-size: 42px;
}
.bdastra-photo-prev { left: 6px; }
.bdastra-photo-next { right: 6px; }
.bdastra-photo-nav:disabled { opacity: .25; cursor: default; }

@media (max-width: 620px) {
  #bdastra-toolbar { flex-direction: column; align-items: stretch; }
  #bdastra-photos-grid { grid-template-columns: 1fr; }
  #bdastra-photo-stage { left: 38px; right: 38px; }
  #bdastra-photo-title { max-width: 42vw; }
}


#bdastra-photo-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 95, 131, .84);
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
  pointer-events: none;
}
#bdastra-photo-drop-overlay.is-visible { display: flex; }
#bdastra-photo-drop-overlay > div {
  min-width: 340px;
  max-width: calc(100vw - 48px);
  padding: 38px 46px;
  border: 3px dashed rgba(255,255,255,.88);
  border-radius: 18px;
  text-align: center;
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
#bdastra-photo-drop-overlay strong { display: block; font-size: 28px; }
#bdastra-photo-drop-overlay span { display: block; margin-top: 8px; font-size: 15px; opacity: .9; }

#bdastra-photo-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 2147483647;
  padding: 12px 18px;
  border-radius: 9px;
  background: #173f2a;
  color: #fff;
  font: 600 14px "Segoe UI", Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
#bdastra-photo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
#bdastra-photo-toast.is-error { background: #9b1c1c; }


.bdastra-photo-card.is-selected{
  border-color:#0b7db0;
  box-shadow:0 0 0 2px rgba(11,125,176,.25),0 4px 12px rgba(0,0,0,.15);
}

.bdastra-photo-card{border:1px solid #dce1e6;background:#fff;border-radius:9px;overflow:hidden;text-align:left}
.bdastra-photo-card-actions{display:flex;gap:6px;margin-top:7px}.bdastra-photo-card-actions button{border:1px solid #d3dae1;border-radius:5px;background:#fff;padding:5px 8px;cursor:pointer}
#bdastra-photo-link-modal{position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,.48);display:none;align-items:center;justify-content:center;font-family:"Segoe UI",Arial,sans-serif}
#bdastra-photo-link-modal.is-open{display:flex}.bdastra-photo-link-dialog{width:420px;max-width:calc(100vw - 30px);background:#fff;border-radius:10px;padding:18px;box-shadow:0 16px 50px rgba(0,0,0,.3)}
.bdastra-photo-link-dialog header,.bdastra-photo-link-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.bdastra-photo-link-dialog h3{margin:0}.bdastra-photo-link-dialog label{display:block;margin-top:13px;font-weight:650}.bdastra-photo-link-dialog input,.bdastra-photo-link-dialog textarea{width:100%;box-sizing:border-box;margin-top:5px;padding:9px;border:1px solid #cfd6dc;border-radius:6px;font:inherit}.bdastra-photo-link-dialog footer{justify-content:flex-end;margin-top:16px}.bdastra-photo-link-dialog button{padding:8px 12px;border:1px solid #ccd4dc;border-radius:6px;background:#fff;cursor:pointer}.bdastra-photo-link-dialog .is-primary{background:#132033;color:#fff;border-color:#132033}