.inspector-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.inspector-mode-switch-tabs {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 10px;
  margin-bottom: 16px;
}

.inspector-mode-switch-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(115, 177, 255, 0.18);
}

.inspector-mode-switch-btn {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(115, 177, 255, 0.18);
  border-radius: 10px;
  background: rgba(18, 24, 36, 0.74);
  color: #dbe7ff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.inspector-mode-switch-tabs .inspector-mode-switch-btn {
  position: relative;
  min-height: 42px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: rgba(219, 231, 255, 0.56);
  font-size: 14px;
  font-weight: 800;
}

.inspector-mode-switch-btn:hover,
.inspector-mode-switch-btn:focus-visible {
  border-color: rgba(115, 177, 255, 0.38);
  outline: none;
}

.inspector-mode-switch-tabs .inspector-mode-switch-btn:hover,
.inspector-mode-switch-tabs .inspector-mode-switch-btn:focus-visible {
  border-color: transparent;
  color: rgba(239, 244, 255, 0.88);
}

.inspector-mode-switch-btn.is-active {
  border-color: rgba(214, 64, 134, 0.52);
  background: linear-gradient(180deg, rgba(210, 56, 125, 0.96), rgba(163, 43, 98, 0.96));
  color: #fff7fb;
}

.inspector-mode-switch-tabs .inspector-mode-switch-btn.is-active {
  border-bottom-color: rgba(214, 64, 134, 0.92);
  background: linear-gradient(180deg, rgba(30, 38, 58, 0.96), rgba(17, 23, 35, 0.98));
  color: #f6f8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.media-explorer-shell {
  display: grid;
  gap: 12px;
}

.media-explorer-sidebar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.media-explorer-node {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(115, 177, 255, 0.2);
  border-radius: 10px;
  background: rgba(18, 24, 36, 0.74);
  color: #dbe7ff;
  text-align: center;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.media-explorer-node:hover,
.media-explorer-node:focus-visible {
  border-color: rgba(115, 177, 255, 0.38);
  outline: none;
}

.media-explorer-node.is-active {
  border-color: rgba(214, 64, 134, 0.52);
  background: linear-gradient(180deg, rgba(210, 56, 125, 0.96), rgba(163, 43, 98, 0.96));
  color: #fff7fb;
}

.media-explorer-node-gold {
  border-color: rgba(201, 154, 63, 0.42);
  background: linear-gradient(180deg, rgba(64, 48, 20, 0.92), rgba(30, 24, 12, 0.94));
  color: #f6e7bd;
}

.media-explorer-node-gold.is-active {
  border-color: rgba(241, 204, 118, 0.84);
  background: linear-gradient(180deg, rgba(193, 144, 46, 0.98), rgba(126, 88, 20, 0.98));
  color: #fff9ea;
  box-shadow: inset 0 1px 0 rgba(255, 242, 196, 0.32), 0 0 0 1px rgba(79, 57, 10, 0.28);
}

.media-explorer-content {
  display: grid;
  align-content: start;
  min-width: 0;
}

.media-explorer-panel {
  display: none;
}

.media-explorer-panel.is-active {
  display: block;
  padding: 16px;
  border: 1px solid rgba(115, 177, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 24, 36, 0.88), rgba(11, 16, 25, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.media-explorer-stack {
  display: grid;
  gap: 14px;
}

.media-create-typebar,
.media-library-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-create-type,
.media-library-filter {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(115, 177, 255, 0.18);
  border-radius: 999px;
  background: rgba(18, 24, 36, 0.72);
  color: #dbe7ff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.media-create-type.is-active,
.media-library-filter.is-active {
  border-color: rgba(214, 64, 134, 0.5);
  background: rgba(214, 64, 134, 0.16);
  color: #fff0f7;
}

.media-explorer-panel .input-row {
  display: grid;
  gap: 7px;
}

.media-explorer-panel .input-row > span {
  color: rgba(245, 248, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
}

.media-explorer-panel .input-row input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(115, 177, 255, 0.18);
  border-radius: 10px;
  background: rgba(18, 28, 43, 0.82);
  color: #eff4ff;
  font: inherit;
}

.media-explorer-panel .input-row input::placeholder {
  color: rgba(219, 231, 255, 0.42);
}

.media-explorer-panel .input-row input:focus {
  outline: none;
  border-color: rgba(214, 64, 134, 0.45);
  box-shadow: 0 0 0 3px rgba(214, 64, 134, 0.12);
}

.media-explorer-panel .primary-btn.full {
  min-height: 46px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
}

.media-explorer-panel[data-media-panel="ai-create"] .primary-btn.full {
  border: 1px solid rgba(229, 188, 95, 0.48);
  background: linear-gradient(180deg, rgba(192, 144, 48, 0.98), rgba(126, 87, 18, 0.98));
  color: #fff9ea;
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.28), 0 10px 22px rgba(84, 53, 8, 0.22);
}

.media-library-header {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.media-library-header strong {
  color: #f7f8fc;
  font-size: 16px;
}

.media-library-header small {
  color: rgba(219, 231, 255, 0.62);
  font-size: 12px;
}

.media-explorer-note {
  margin: 12px 0 0;
  color: rgba(219, 231, 255, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.media-explorer-status {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(214, 64, 134, 0.24);
  border-radius: 12px;
  background: rgba(214, 64, 134, 0.08);
  color: #f3d9e8;
  font-size: 13px;
  line-height: 1.5;
}

.media-explorer-status[data-type="success"] {
  border-color: rgba(201, 154, 63, 0.36);
  background: rgba(201, 154, 63, 0.12);
  color: #f7e7bf;
}

.media-explorer-status[data-type="error"] {
  border-color: rgba(214, 64, 134, 0.36);
  background: rgba(214, 64, 134, 0.12);
  color: #ffd9ea;
}