.regab-storage-tile {
  appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.regab-storage-overlay,
.regab-storage-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(12, 24, 40, 0.46);
  overscroll-behavior: contain;
}

.regab-storage-edit-overlay {
  z-index: 12020;
  background: rgba(8, 18, 32, 0.55);
}

.regab-storage-card {
  width: min(1520px, calc(100vw - 40px)) !important;
  max-width: min(1520px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 28px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #d7e3f0;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(20, 40, 70, 0.22);
  padding: 22px 26px 20px;
  box-sizing: border-box;
}

.regab-storage-edit-card {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: #fff;
  border: 1px solid #d7e3f0;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(20, 40, 70, 0.28);
  padding: 20px 22px 18px;
  box-sizing: border-box;
}

.regab-storage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.regab-storage-head h2 {
  margin: 4px 0 0;
  font: 800 22px/1.2 Manrope, DM Sans, sans-serif;
  color: #1d3148;
}

.regab-storage-close,
.regab-storage-edit-card .icon-button {
  border: 0;
  background: #eef3f8;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #45607c;
}

.regab-storage-options {
  display: none !important;
}

.regab-storage-block h3,
.regab-storage-bucket strong {
  display: block;
  color: #213346;
  font: 800 14px/1.3 Manrope, DM Sans, sans-serif;
}

.regab-storage-block {
  border: 1px solid #e1eaf3;
  border-radius: 14px;
  padding: 14px 15px;
  margin-bottom: 14px;
  background: #fff;
}

.regab-storage-block-head,
.regab-storage-path-row,
.regab-storage-bucket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.regab-storage-path,
.regab-storage-path-row code {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5fa;
  color: #35506c;
  font-size: 12px;
  word-break: break-all;
}

.regab-storage-bucket code {
  display: none !important;
}

.regab-storage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.regab-storage-meta span,
.regab-storage-badge,
.regab-storage-extra,
.regab-storage-hint {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  background: #eef5ff;
  color: #2f6fed;
}

.regab-storage-hint {
  margin-top: 8px;
  background: #eef2f6;
  color: #6a7c90;
}

.regab-storage-extra {
  margin-top: 8px;
  background: #e8f8ef;
  color: #1f8a4c;
}

.regab-storage-badge.is-ok { background: #e8f8ef; color: #1f8a4c; }
.regab-storage-badge.is-warn { background: #fff4e5; color: #b15b00; }
.regab-storage-badge.is-muted { background: #eef2f6; color: #6a7c90; }

.regab-storage-buckets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1000px) {
  .regab-storage-buckets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.regab-storage-help {
  margin: 0;
  color: #6d7f94;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.regab-storage-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.regab-storage-tokens button {
  appearance: none;
  border: 1px solid #cfe0f0;
  background: #f4f8fc;
  color: #2f4f6e;
  border-radius: 999px;
  padding: 4px 9px;
  font: 700 11px/1 Manrope, DM Sans, sans-serif;
  cursor: pointer;
}

.regab-storage-tokens button:hover {
  border-color: #9fc0ef;
  background: #eaf2fb;
}

.regab-storage-example {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5fa;
  color: #35506c;
  font-size: 12px;
  word-break: break-all;
}

.regab-storage-bucket {
  appearance: none;
  text-align: left;
  border: 1px solid #e1eaf3;
  border-radius: 12px;
  background: #f8fbfe;
  padding: 14px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.regab-storage-bucket:hover {
  border-color: #9fc0ef;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(31, 72, 130, 0.08);
}

.regab-storage-form {
  display: grid;
  gap: 12px;
}

.regab-storage-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #314860;
}

.regab-storage-form input:not([type="checkbox"]) {
  border: 1px solid #cfe0f0;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.regab-storage-switch {
  display: flex !important;
  align-items: center;
  gap: 10px;
  grid-template-columns: none !important;
}

.regab-storage-form hr {
  border: 0;
  border-top: 1px solid #e4edf6;
  margin: 4px 0;
}

.regab-storage-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.regab-storage-msg {
  min-height: 1.2em;
  margin: 0;
}

.regab-storage-secondary {
  display: grid;
  gap: 10px;
}

.regab-storage-secondary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.muted {
  color: #6d7f94;
  font-size: 12px;
  margin: 0;
}

.theme-dark .regab-storage-card,
.theme-dark .regab-storage-edit-card,
.theme-dark .regab-storage-block,
.theme-dark .regab-storage-bucket {
  background: #0a243f;
  border-color: #94b7e138;
  color: #e7eef8;
}

.theme-dark .regab-storage-head h2,
.theme-dark .regab-storage-block h3,
.theme-dark .regab-storage-bucket strong,
.theme-dark .regab-storage-form label {
  color: #e7eef8;
}

.theme-dark .regab-storage-path,
.theme-dark .regab-storage-path-row code,
.theme-dark .regab-storage-form input:not([type="checkbox"]),
.theme-dark .regab-storage-close,
.theme-dark .regab-storage-edit-card .icon-button {
  background: #082039;
  color: #cfe0f5;
  border-color: #94b7e138;
}

@media (max-width: 700px) {
  .regab-storage-buckets {
    grid-template-columns: 1fr;
  }
}