* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'IBM Plex Sans', sans-serif; background: #f0f1f5; }

.sf-gradient-line {
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f43f5e);
}

.sf-nav {
  background: #0f0f1a;
  backdrop-filter: blur(20px);
}

.sf-sidebar {
  background: #13132b;
  min-height: calc(100vh - 59px);
}

.sf-sidebar-item {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.sf-sidebar-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
.sf-sidebar-item.active {
  background: rgba(99, 102, 241, 0.12);
  border-left-color: #6366f1;
}

.sf-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sf-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.sf-stat-card {
  border-top: 3px solid;
  border-radius: 12px;
}

.sf-btn {
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
}
.sf-btn:active {
  transform: scale(0.97);
}
.sf-btn-primary {
  background: #6366f1;
  color: white;
}
.sf-btn-primary:hover {
  background: #4f46e5;
}

.sf-toggle-track {
  width: 240px;
  height: 42px;
  background: #1e1e3a;
  border-radius: 21px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(99,102,241,0.3);
}
.sf-toggle-thumb {
  position: absolute;
  top: 3px;
  width: 116px;
  height: 36px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 18px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(99,102,241,0.4);
}
.sf-toggle-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  z-index: 2;
  transition: color 0.3s;
  user-select: none;
}

.sf-modal-overlay {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideInDown { from { transform: translateY(-100%); opacity:0; } to { transform: translateY(0); opacity:1; } }

.sf-modal-content { animation: slideUp 0.25s ease; }
.sf-slide-panel { animation: slideInRight 0.3s ease; }
.sf-toast { animation: slideInDown 0.3s ease; }

.sf-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

.sf-input {
  border: 1.5px solid #e2e4ea;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
  font-family: 'IBM Plex Sans', sans-serif;
}
.sf-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.sf-product-card-store {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sf-product-card-store:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  animation: confettiFall 2.5s ease-out forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.sf-storefront-hero {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.sf-storefront-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4c6cf; border-radius: 3px; }

@media (max-width: 768px) {
  .sf-sidebar { display: none; }
  .sf-mobile-nav { display: flex !important; }
}
@media (min-width: 769px) {
  .sf-mobile-nav { display: none !important; }
}