/* Cards */
.card{
  background-color:var(--bg-surface);
  border-radius:var(--radius);
  padding:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  border:1px solid var(--bg-overlay);
  margin-bottom:var(--space-3);
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.card-title{
  font-size:var(--fs-title);
  font-weight:700;
}

.card-content{
  flex:1;
  min-width:0; /* Important for flex overflow prevention */
}

/* Lists */
.list{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--bg-overlay);
  gap:var(--space-2);
}
.list-item:last-child{
  border-bottom:none;
}

.list-item-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.list-item-title{
  font-size:var(--fs-body);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.list-item-subtitle{
  font-size:var(--fs-small);
  color:var(--text-secondary);
}

.list-item-right{
  text-align:right;
  flex-shrink:0;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px var(--space-3);
  border-radius:var(--radius-sm);
  font-size:var(--fs-body);
  font-weight:600;
  transition:all 0.2s;
  width:100%;
}

.btn-primary{
  background-color:var(--brand-primary);
  color:#fff;
}
.btn-primary:active{
  opacity:0.8;
}

.btn-secondary{
  background-color:var(--bg-overlay);
  color:var(--text-primary);
}

/* Tabs */
.tabs{
  display:flex;
  gap:var(--space-1);
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:var(--space-1);
}
.tabs::-webkit-scrollbar{
  display:none;
}
.tab-item{
  padding:8px var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--bg-overlay);
  color:var(--text-secondary);
  font-size:var(--fs-body);
  font-weight:600;
  white-space:nowrap;
}
.tab-item.active{
  background:var(--text-primary);
  color:var(--bg-base);
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  background:var(--bg-overlay);
  color:var(--text-secondary);
}

/* Stock Data Display Components */
.price-display{
  font-size:var(--fs-h1);
  font-weight:700;
}
.rate-display{
  font-size:var(--fs-body);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:4px;
}
.val-up{ color:var(--color-up); }
.val-down{ color:var(--color-down); }
.val-flat{ color:var(--text-muted); }

.skeleton{
  background:linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  color:transparent !important;
  border-radius:4px;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}