@import "https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&display=swap";
.storage-onboarding-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff1a !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-family: Inter, sans-serif;
  padding: 20px;
}
.storage-onboarding-overlay.hidden {
  display: none !important;
}
.storage-card {
  background: var(--bg-sidebar, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 32px;
  box-shadow:
    0 24px 56px -12px #0f172a38,
    0 8px 16px -6px #0f172a14;
  width: min(900px, 100%);
  padding: 2px;
  display: flex;
  gap: 2px;
}
.storage-pane {
  border-radius: 28px;
  display: flex;
  flex-direction: column;
}
.storage-card-compact {
  width: min(680px, 96%);
  padding: 16px;
  border-radius: 22px;
  box-shadow:
    0 14px 34px -16px #0f172a33,
    0 6px 14px -10px #0f172a14;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
}
.storage-card-compact .storage-pane-compact {
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  height: 100%;
}
.storage-card-compact .storage-pane-info {
  order: 1;
  background: linear-gradient(180deg, #5c4ae40d, #5c4ae400);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.storage-card-compact .storage-pane-recents {
  order: 2;
  background: #fff;
}
.storage-card-compact .storage-card-toprow {
  margin-bottom: 8px;
}
.storage-card-compact .storage-card-header {
  margin-bottom: 6px;
}
.storage-card-compact .storage-divider {
  margin-bottom: 8px;
}
.storage-card-compact .storage-features {
  margin: 0 0 32px;
  gap: 6px;
}
.storage-card-compact .storage-warning {
  margin-bottom: 80px;
}
.storage-card-compact .storage-actions {
  flex-direction: column;
  gap: 12px;
}
.storage-card-compact .storage-actions .storage-btn-primary,
.storage-card-compact .storage-actions .storage-btn-danger,
.storage-card-compact .storage-actions .storage-btn-ghost {
  width: 100%;
}
.storage-card-compact .storage-recents-header {
  margin-bottom: 16px;
}
.storage-card-compact .storage-recents-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}
.storage-card-compact .storage-recents-empty {
  height: 100%;
}
.storage-pane-info {
  background: linear-gradient(180deg, #5c4ae412, #5c4ae408);
  padding: 40px;
  width: 420px;
}
.storage-pane-recents {
  background: linear-gradient(180deg, #fffffff5, #ffffffe0);
  padding: 40px;
  flex: 1;
  min-width: 0;
  border-radius: 28px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (max-width: 980px) {
  .storage-card {
    flex-direction: column;
  }
  .storage-pane-info,
  .storage-pane-recents {
    width: 100%;
  }
}
.storage-card-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.storage-icon {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.storage-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storage-icon--danger {
  background: #ef4444;
  box-shadow: 0 4px 18px #ef444447;
}
.storage-close-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-color, #e2e8f0);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.storage-close-btn:hover {
  background: var(--border-color-light, #f1f5f9);
  color: var(--text-main, #0f172a);
  border-color: var(--text-muted, #94a3b8);
}
.storage-card-title {
  font-family:
    Manrope,
    Public Sans,
    sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  letter-spacing: -0.04em;
  line-height: 36px;
  margin: 0 0 8px;
}
.storage-card-desc {
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  line-height: 24px;
  font-weight: 400;
  margin: 0;
}
.storage-divider {
  width: 100%;
  height: 1px;
  background: var(--border-color-light, #f1f5f9);
  margin-bottom: 20px;
}
.storage-features {
  list-style: none;
  margin: 0 0 80px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none;
  background: transparent;
}
.storage-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: #191c1e;
}
.storage-feature-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.storage-feature-check img {
  width: 100%;
  height: 100%;
  display: block;
}
.storage-feature-text {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: #191c1e;
}
.storage-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ef44440d;
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  margin-bottom: 140px;
  color: #dc2626;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}
.storage-warning-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.storage-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.storage-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(170deg, #5448c7, #8a7bff);
  color: var(--text-white, #ffffff);
  border: none;
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 20px #5448c733;
  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease;
}
.storage-btn-primary:hover {
  background: linear-gradient(170deg, #5c4ae4, #9f95ff);
  box-shadow: 0 12px 26px #5448c742;
  transform: translateY(-1px);
}
.storage-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px #4647d340;
}
.storage-btn-primary img {
  width: 20px;
  height: 20px;
}
.storage-btn-ghost {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: #6f6b80;
  border: 1px solid rgba(120, 113, 142, 0.2);
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.storage-btn-ghost:hover {
  color: var(--text-secondary, #64748b);
  border-color: #78718e80;
}
.storage-recents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.storage-recents-title {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #787585;
  letter-spacing: -0.4px;
  text-transform: capitalize;
}
.storage-recents-count {
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: #474554;
  text-align: right;
}
.storage-recents-empty {
  border: 1px dashed rgba(120, 113, 142, 0.3);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  max-width: 420px;
  color: #8b8aa0;
  font-family: Inter, sans-serif;
  font-size: 13px;
}
.storage-recents-empty.hidden {
  display: none;
}
.storage-recents-empty-btn {
  transition: filter 0.2s ease;
  filter: grayscale(100%) brightness(1);
  background: #5c4ae414;
  color: #5c4ae4;
  border: none;
  border-radius: 100px;
  padding: 10px 18px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.storage-recents-empty-btn:hover {
  background: #5c4ae41f;
}
.storage-recents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 418px;
  overflow-y: auto;
}
.storage-recent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(120, 113, 142, 0.1);
  border-radius: 16px;
  padding: 17px 21px 17px 17px;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  position: relative;
  z-index: 0;
}
.storage-recent-card:hover,
.storage-recent-card:focus-visible {
  border-color: #78718e18;
  background-image:
    linear-gradient(90deg, #5c4ae40a, #5c4ae40a),
    linear-gradient(90deg, #fff, #fff);
  box-shadow: none;
  outline: none;
  z-index: 1;
}
.storage-recent-icon {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: #f5f5f5;
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.storage-recent-card:hover .storage-recent-icon,
.storage-recent-card:focus-visible .storage-recent-icon {
  background: #fff;
  border-color: #f1f5f9;
}
.storage-recent-icon img {
  width: 20px;
  height: 20px;
}
.storage-recent-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.storage-recent-name {
  display: block;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #191c1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-recent-meta {
  display: block;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 10px;
  line-height: 15px;
  color: #00000089;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-recent-delete {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.storage-recent-card:hover .storage-recent-delete,
.storage-recent-card:focus-visible .storage-recent-delete {
  opacity: 1;
  pointer-events: auto;
}
.storage-recent-delete img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) saturate(100%) invert(63%) sepia(7%) saturate(94%)
    hue-rotate(184deg) brightness(94%) contrast(88%);
  transition: filter 0.2s ease;
}
.storage-recent-delete:hover img,
.storage-recent-delete:focus-visible img {
  filter: invert(28%) sepia(82%) saturate(3784%) hue-rotate(339deg)
    brightness(90%) contrast(101%);
}
.storage-btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  filter: grayscale(100%) brightness(0.5);
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  filter: invert(12%) sepia(25%) saturate(6624%) hue-rotate(343deg)
    brightness(93%) contrast(101%);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.storage-btn-danger:hover {
  background: #ef444407;
  border-color: #ef44445c;
  transform: translateY(-1px);
}
.storage-btn-danger:active {
  transform: translateY(0);
}
.connector-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.2s;
}
.connector-trigger:hover {
  background: #0000000a;
}
.connector-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 25px #0f172a26;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.connector-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.connector-dropdown-content {
  padding: 24px;
  text-align: center;
}
.connector-dropdown h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  color: #0f172a;
  font-weight: 700;
}
.connector-dropdown p {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 20px;
}
.connector-dropdown .storage-card-features {
  font-size: 12px;
  margin-bottom: 24px;
  gap: 10px;
}